carriera-intern 1.1.89 → 1.1.91
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/carriera-intern.mjs +1008 -1294
- package/fesm2022/carriera-intern.mjs.map +1 -1
- package/index.d.ts +116 -181
- package/package.json +1 -1
- package/src/styles/_variables.scss +1 -0
- package/src/styles/popover.scss +4 -0
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import * as i1 from '@angular/forms';
|
|
2
|
-
import { Validators, FormsModule, FormControl, ReactiveFormsModule, FormGroup } from '@angular/forms';
|
|
2
|
+
import { Validators, FormsModule, FormControl, ReactiveFormsModule, NgControl, NG_VALIDATORS, FormGroup } from '@angular/forms';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { Pipe, input, output, signal, effect, Optional, Self, Component, HostListener, Directive, EventEmitter, Output, Input, computed, ViewChild, Injectable, inject, Inject, forwardRef, ViewContainerRef,
|
|
4
|
+
import { Pipe, input, output, signal, effect, Optional, Self, Component, HostListener, Directive, EventEmitter, Output, Input, computed, ViewChild, Injectable, inject, Inject, forwardRef, ViewContainerRef, DestroyRef, Injector, ElementRef, Renderer2, NgZone, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
|
|
5
5
|
import * as i2 from '@ng-bootstrap/ng-bootstrap';
|
|
6
6
|
import { NgbPopover, NgbTooltipModule, NgbDropdownModule, NgbTooltip, NgbPopoverModule, NgbModule } from '@ng-bootstrap/ng-bootstrap';
|
|
7
|
-
import * as
|
|
7
|
+
import * as i1$2 from 'angular-svg-icon';
|
|
8
8
|
import { SvgIconComponent, AngularSvgIconModule } from 'angular-svg-icon';
|
|
9
9
|
import * as i2$1 from '@angular/common';
|
|
10
10
|
import { NgTemplateOutlet, CommonModule } from '@angular/common';
|
|
@@ -12,12 +12,13 @@ import { base64ToFile, ImageCropperComponent } from 'ngx-image-cropper';
|
|
|
12
12
|
import { LottieComponent } from 'ngx-lottie';
|
|
13
13
|
import * as pdfjsLib from 'pdfjs-dist';
|
|
14
14
|
import * as i1$1 from '@angular/platform-browser';
|
|
15
|
+
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
15
16
|
import moment from 'moment';
|
|
16
17
|
import { Subject, takeUntil, distinctUntilChanged as distinctUntilChanged$1, tap, filter, debounceTime, switchMap, of, catchError } from 'rxjs';
|
|
17
18
|
import { distinctUntilChanged, takeUntil as takeUntil$1 } from 'rxjs/operators';
|
|
18
19
|
import * as i3 from '@angular/cdk/scrolling';
|
|
19
20
|
import { ScrollingModule, VIRTUAL_SCROLL_STRATEGY, CdkScrollable } from '@angular/cdk/scrolling';
|
|
20
|
-
import * as i1$
|
|
21
|
+
import * as i1$3 from '@angular/cdk/clipboard';
|
|
21
22
|
|
|
22
23
|
/**
|
|
23
24
|
* Creates a validator that ignores validation rules when the control is autofilled.
|
|
@@ -5657,7 +5658,7 @@ class DropZoneComponent {
|
|
|
5657
5658
|
this.onDocumentDropZoneOpenChange.emit(false);
|
|
5658
5659
|
}
|
|
5659
5660
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DropZoneComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
5660
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: DropZoneComponent, isStandalone: true, selector: "cai-drop-zone", inputs: { crop: { classPropertyName: "crop", publicName: "crop", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, deletedFileIds: { classPropertyName: "deletedFileIds", publicName: "deletedFileIds", isSignal: true, isRequired: false, transformFunction: null }, maxCountFiles: { classPropertyName: "maxCountFiles", publicName: "maxCountFiles", isSignal: true, isRequired: false, transformFunction: null }, isDetailsSlider: { classPropertyName: "isDetailsSlider", publicName: "isDetailsSlider", isSignal: true, isRequired: false, transformFunction: null }, isDrawerMode: { classPropertyName: "isDrawerMode", publicName: "isDrawerMode", isSignal: true, isRequired: false, transformFunction: null }, isCoverDetails: { classPropertyName: "isCoverDetails", publicName: "isCoverDetails", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, isDocumentsMode: { classPropertyName: "isDocumentsMode", publicName: "isDocumentsMode", isSignal: true, isRequired: false, transformFunction: null }, documentsDropZoneOpen: { classPropertyName: "documentsDropZoneOpen", publicName: "documentsDropZoneOpen", isSignal: true, isRequired: false, transformFunction: null }, searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null }, avatarColor: { classPropertyName: "avatarColor", publicName: "avatarColor", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: false, isRequired: false, transformFunction: null }, parentForm: { classPropertyName: "parentForm", publicName: "parentForm", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, documentTags: { classPropertyName: "documentTags", publicName: "documentTags", isSignal: true, isRequired: false, transformFunction: null }, excludedFileTypes: { classPropertyName: "excludedFileTypes", publicName: "excludedFileTypes", isSignal: true, isRequired: false, transformFunction: null }, fileTypes: { classPropertyName: "fileTypes", publicName: "fileTypes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDeletedFileIds: "onDeletedFileIds", onDocsChange: "onDocsChange", onDocumentPreviewClick: "onDocumentPreviewClick", onDocumentFileNameChange: "onDocumentFileNameChange", onCropPendingChange: "onCropPendingChange", onDocumentDropZoneOpenChange: "onDocumentDropZoneOpenChange" }, host: { listeners: { "document:dragenter": "onDocumentDragEnter($event)", "document:dragover": "onDocumentDragOver($event)", "document:dragleave": "onWindowDragLeave($event)", "document:drop": "onDocumentDrop($event)" } }, providers: [], viewQueries: [{ propertyName: "inputRange", first: true, predicate: ["inputRange"], descendants: true }, { propertyName: "dropZoneContainer", first: true, predicate: ["dropZoneContainer"], descendants: true }, { propertyName: "docsViewport", first: true, predicate: ["docsViewport"], descendants: true }, { propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@let docCount = docs().length; @let cropFile = crop() === true;\n@let showCrop = showCropper() === true;\n@let documentVariant = variant() === dropZoneVariant.DOCUMENT;\n@let videoVariant = variant() === dropZoneVariant.VIDEO;\n@let profileVariant = variant() === dropZoneVariant.PROFILE;\n@let coverVariant = variant() === dropZoneVariant.COVER;\n@let logoVariant = variant() === dropZoneVariant.LOGO;\n@let roundedBorder = rounded() === true; @let coverPreview = coverUrl !== \"\";\n@let profilePreview = profileUrl !== \"\"; @let logoPreview = !!logoUrl;\n@let smallSize = size() === \"480px\";\n@let countFiles = this.maxCountFiles();\n@let largeSize = size() === \"640px\";\n\n@if (isDocumentsMode() && documentsDropZoneOpen() && dragMode()) {\n <div class=\"documents-drag-overlay\"></div>\n}\n\n<div\n class=\"container\"\n [class]=\"{\n smallContainer: smallSize,\n largeContainer: largeSize,\n dragMode: dragMode() && !isDocumentsMode(),\n dragModeDocuments: dragMode() && isDocumentsMode(),\n onDragover: onDragover(),\n logoVar: logoVariant,\n hasCropper: isCropperReady(),\n 'is-details-slider': isDetailsSlider(),\n 'is-drawer-mode': isDrawerMode(),\n isCoverDetails: isCoverDetails(),\n 'is-documents-mode': isDocumentsMode(),\n }\"\n>\n @if (coverVariant && coverPreview) {\n <div class=\"cover-container\">\n <img [src]=\"coverUrl\" class=\"cover-image\" draggable=\"false\" />\n </div>\n }\n @if (profileVariant) {\n @if (!profilePreview) {\n <div class=\"avatar\">\n <cai-avatar\n [driver]=\"driver()\"\n [size]=\"160\"\n [rounded]=\"rounded()\"\n ></cai-avatar>\n </div>\n } @else {\n <div class=\"profile-container\">\n <img\n [class]=\"rounded() ? 'profile-rounded-image' : 'profile-square-image'\"\n [src]=\"profileUrl\"\n draggable=\"false\"\n />\n </div>\n }\n }\n @if (logoVariant && logoPreview) {\n <div class=\"logo-container\" [class.has-logo]=\"!!logoUrl\">\n <img class=\"logo-image\" [src]=\"logoUrl\" draggable=\"false\" />\n </div>\n }\n <!--Image Cropper-->\n @if (cropFile && showCrop) {\n @if (!isCropperReady()) {\n <div class=\"cropper-loader\">\n <div class=\"spinner\"></div>\n </div>\n }\n <div class=\"cropper-overlay\">\n <image-cropper\n #cropper\n class=\"img-cropper\"\n [output]=\"'base64'\"\n [class.logoBorder]=\"logoVariant\"\n [roundCropper]=\"roundedBorder ? true : false\"\n [hideResizeSquares]=\"true\"\n [allowMoveImage]=\"true\"\n [transform]=\"transform\"\n (transformChange)=\"onTransformChange($event)\"\n format=\"png\"\n [aspectRatio]=\"ratioHelper()\"\n [resizeToWidth]=\"cropWidth()\"\n [resizeToHeight]=\"cropHeight()\"\n [containWithinAspectRatio]=\"true\"\n [imageChangedEvent]=\"imageChangedEvent\"\n (imageCropped)=\"imageCropped($event)\"\n (imageLoaded)=\"imageLoaded($event)\"\n (cropperReady)=\"cropperReady()\"\n (loadImageFailed)=\"loadImageFailed()\"\n ></image-cropper>\n @if (isCropperReady()) {\n <div class=\"lower-part\">\n <div class=\"range\">\n <input\n #inputRange\n type=\"range\"\n class=\"custom-range\"\n min=\"1\"\n max=\"10\"\n step=\"0.1\"\n [value]=\"zoomValue()\"\n (input)=\"onZoomChange($event)\"\n />\n </div>\n <div class=\"cropper-buttons\">\n <button class=\"cancel-button\" (click)=\"cancelCrop()\">Cancel</button>\n <button class=\"submit-button\" (click)=\"submitCrop()\">Crop</button>\n </div>\n </div>\n }\n </div>\n }\n <!-- Drop Zone -->\n @if (!isDocumentsMode() || documentsDropZoneOpen()) {\n <div\n #dropZoneContainer\n class=\"drop-zone-container\"\n [class.has-logo]=\"logoVariant && !!logoUrl\"\n (drop)=\"onDrop($event)\"\n (dragover)=\"onDragOver($event)\"\n (dragenter)=\"onDragEnter($event)\"\n (dragleave)=\"onDragLeave($event)\"\n [class]=\"{\n 'more-docs': docCount >= 3 && largeSize,\n 'small-more-docs': docCount >= 2 && smallSize,\n 'max-reached-drop-design':\n (countFiles <= this.docs().length || maxCountReached()) &&\n documentVariant,\n 'max-reached-more-doc':\n (countFiles <= this.docs().length || maxCountReached()) &&\n documentVariant,\n 'max-reached-more-video':\n (countFiles <= this.docs().length || maxCountReached()) &&\n videoVariant,\n 'invalid-file-size': invalidFileSize(),\n unsupported: unsupported() || invalidFileSize(),\n smallView: this.smallView() && !dragMode(),\n }\"\n >\n <!-- Drop Zone -->\n <div class=\"drop-zone\" (click)=\"handleClickToAdd()\">\n @if (dragMode()) {\n <div class=\"drag-icons-container\">\n @if (isDocumentsMode()) {\n <svg-icon\n name=\"cai-drop-zone-focus\"\n class=\"illustration drag-icon-document\"\n ></svg-icon>\n } @else {\n <!-- Animation -->\n <ng-lottie\n [options]=\"{\n path: variant() | dropZoneAnimation,\n loop: false,\n autoplay: false,\n }\"\n (animationCreated)=\"animationCreated($event)\"\n ></ng-lottie>\n }\n </div>\n <div class=\"drop-zone-focus-text\">\n @if (isDocumentsMode()) {\n <p class=\"heading\">DRAG FILES HERE</p>\n } @else if (documentVariant || videoVariant) {\n <p class=\"heading\">\n {{ onDragover() ? \"DROP FILES HERE\" : \"DRAG FILES HERE\" }}\n </p>\n } @else {\n <p class=\"heading\">\n {{ onDragover() ? \"DROP IMAGE HERE\" : \"DRAG IMAGE HERE\" }}\n </p>\n }\n </div>\n } @else {\n @let svgIcon = variant() | dropZoneAnimation: true;\n <svg-icon [name]=\"svgIcon\" class=\"illustration\"></svg-icon>\n @if (\n (countFiles <= this.docs().length || maxCountReached()) &&\n documentVariant\n ) {\n <div class=\"drop-zone-text\">\n <p class=\"heading\">\n <span class=\"line\">MAX COUNT</span>\n <span class=\"line\">REACHED</span>\n </p>\n <p class=\"subtext\">\n <span class=\"line\">{{ countFiles }} FILES </span>\n <span class=\"line\">IMPORTED</span>\n </p>\n </div>\n } @else {\n <div class=\"drop-zone-text\">\n <p class=\"heading\">\n @if (documentVariant || videoVariant) {\n DRAG FILES\n @if (docCount < 1 || isDocumentsMode()) {\n <span>HERE</span>\n }\n } @else if (profileVariant && roundedBorder) {\n DRAG IMAGE\n } @else {\n DRAG IMAGE HERE\n }\n </p>\n @if (!coverPreview && !profilePreview) {\n <p class=\"subtext\">OR CLICK TO ADD</p>\n }\n @if (coverPreview || profilePreview) {\n <p class=\"subtext\">OR CLICK TO REPLACE</p>\n }\n @if (videoVariant) {\n <p class=\"video-subtext\">max file size {{ maxFileSize() }}mb</p>\n }\n </div>\n @if (isDocumentsMode()) {\n <button\n class=\"cancel-button-documents\"\n ngbTooltip=\"Cancel\"\n [placement]=\"'bottom'\"\n container=\"body\"\n triggers=\"mouseenter:mouseleave\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n >\n <svg-icon\n name=\"cai-cancel\"\n class=\"cancel-icon\"\n (click)=\"onCancel($event)\"\n ></svg-icon>\n </button>\n }\n }\n }\n <input\n type=\"file\"\n aria-hidden=\"true\"\n multiple\n class=\"drop-zone-input\"\n #inputRef\n (input)=\"onInput($event)\"\n (change)=\"fileChangeEvent($event)\"\n />\n </div>\n\n <!-- Drop Zone Error -->\n <div class=\"drop-zone-error\">\n @if (invalidFileSize()) {\n <div class=\"drop-zone-text\">\n <p class=\"heading invalid\">INVALID FILE SIZE</p>\n <p class=\"subtext\">MAX {{ maxFileSize() }} MB</p>\n </div>\n } @else {\n <div class=\"drop-zone-text\">\n <p class=\"heading invalid\">INVALID FILE TYPE</p>\n <p class=\"subtext\">SUPPORTED FORMATS</p>\n </div>\n <div class=\"file-types\">\n @for (type of supportedFileTypes(); track $index) {\n <p\n class=\"badge\"\n [class]=\"{\n pdf: type === 'pdf',\n video: ['avi', 'mp4', 'mov'].includes(type),\n image: ['jpg', 'png', 'jpeg', 'gif'].includes(type),\n }\"\n >\n {{ type }}\n </p>\n }\n </div>\n }\n <button class=\"cancel-button\">\n <svg-icon\n name=\"cai-cancel\"\n class=\"cancel-icon\"\n (click)=\"cancel()\"\n ></svg-icon>\n </button>\n </div>\n </div>\n }\n @if (isLoadingSkeleton()) {\n <!-- Skeleton -->\n <ng-container *ngTemplateOutlet=\"skeletonTemplate\"></ng-container>\n } @else {\n <!-- Carousel -->\n @if (docCount > 0 && (documentVariant || videoVariant)) {\n <div #docsViewport class=\"docs\">\n <div\n class=\"doc-container\"\n [class.documents-container-grid]=\"isDocumentsMode()\"\n [style.transform]=\"isDocumentsMode() ? '' : carouselTransform()\"\n [style.--carousel-index]=\"isDocumentsMode() ? null : carouselIndex()\"\n >\n @for (doc of docs(); track doc.fileId) {\n <cai-document-preview\n [class.doc-visible]=\"\n isDetailsSlider() && $index === carouselIndex()\n \"\n [class.doc-hidden]=\"\n isDetailsSlider() && $index !== carouselIndex()\n \"\n class=\"doc\"\n [file]=\"doc\"\n [tags]=\"documentTags()\"\n [searchText]=\"searchText()\"\n [cdlDetailsMode]=\"isDetailsSlider()\"\n [multipleDetailsDocs]=\"isDetailsSlider() && docCount > 1\"\n [maxAspectRatio]=\"\n isDetailsSlider() && docCount > 1\n ? maxDetailsAspectRatio()\n : null\n \"\n [drawerMode]=\"isDrawerMode()\"\n [isCoverDetails]=\"isCoverDetails()\"\n [viewMode]=\"isDocumentsMode() ? 'large' : 'small'\"\n (onDelete)=\"handleDelete($event)\"\n (onDownload)=\"handleDownload($event)\"\n (onTagChange)=\"handleTagChange($event)\"\n (onFileNameChange)=\"handleFileNameChange($event)\"\n (onDocumentPreviewClick)=\"handleDocumentPreviewClick($event)\"\n (aspectRatioChange)=\"onDocAspectRatioChange($event)\"\n ></cai-document-preview>\n }\n </div>\n @if (docCount >= 3 || (isDetailsSlider() && docCount > 1)) {\n <button\n class=\"carousel-button carousel-left\"\n type=\"button\"\n (click)=\"carouselLeft()\"\n [disabled]=\"carouselIndex() === 0\"\n [style.opacity]=\"carouselIndex() === 0 ? '0' : '1'\"\n >\n <svg-icon name=\"cai-arrow-secondary-left\" class=\"arrow\"></svg-icon>\n </button>\n <button\n class=\"carousel-button carousel-right\"\n type=\"button\"\n (click)=\"carouselRight()\"\n [disabled]=\"isCarouselAtEnd()\"\n [style.opacity]=\"isCarouselAtEnd() ? '0' : '1'\"\n >\n <svg-icon name=\"cai-arrow-secondary-right\" class=\"arrow\"></svg-icon>\n </button>\n }\n @if (isDetailsSlider() && docCount > 1) {\n <div class=\"sliders\">\n @for (doc of docs(); track $index) {\n <div\n class=\"slider-item\"\n (click)=\"carouselIndex.set($index)\"\n [class.active]=\"$index === carouselIndex()\"\n ></div>\n }\n </div>\n }\n </div>\n }\n }\n</div>\n\n<!-- Skeleton Template -->\n\n<ng-template #skeletonTemplate>\n <div\n class=\"skeleton-container\"\n [ngClass]=\"{\n 'documents-container-grid': isDocumentsMode(),\n 'drawer-position': isDrawerMode(),\n }\"\n >\n @for (item of skeletonItems(); track $index) {\n <div class=\"skeleton-item\">\n <div class=\"skeleton-bar\"></div>\n </div>\n }\n </div>\n</ng-template>\n", styles: [".container.is-documents-mode{width:100%!important;max-width:100%!important}.container.is-documents-mode .drop-zone-container .drop-zone{width:100%!important}.documents-drag-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0003;z-index:10}.is-documents-mode{display:flex;flex-direction:column;gap:0!important;width:100%!important;height:100%!important}.is-documents-mode .drop-zone-container{display:flex;margin-bottom:4px;background-color:#f7f7f7;z-index:20}.is-documents-mode .drop-zone-container .drop-zone{width:100%;height:120px!important;background-color:transparent;outline-color:#dadada;transition:background-color .2s ease-in-out}.is-documents-mode .drop-zone-container .drop-zone:hover{background-color:#fff!important}.is-documents-mode .drop-zone-container .drop-zone .illustration{width:80px;height:80px}.is-documents-mode .drop-zone-container .drop-zone .drop-zone-text .heading{padding-bottom:0}.is-documents-mode .drop-zone-container .drop-zone .cancel-button-documents{z-index:1000;position:absolute;top:4px;right:4px;width:26px;height:26px;background-color:transparent;padding:4px}.is-documents-mode .drop-zone-container .drop-zone .cancel-button-documents .cancel-icon{width:18px;height:18px;color:#919191}.is-documents-mode .drop-zone-container .drop-zone .cancel-button-documents:hover .cancel-icon{color:#424242}.is-documents-mode .skeleton-container .skeleton-item{width:100%;height:auto;aspect-ratio:1/1;max-width:100%;min-width:302px;min-height:302px;position:relative;border-radius:3px;background-color:#fff}.is-documents-mode .skeleton-container .skeleton-item .skeleton-bar{position:absolute;bottom:8px;left:8px;right:8px;width:auto;height:26px;background-color:#91919133;animation:skeleton-pulse 1s ease-in-out infinite alternate;border-radius:2px}.is-documents-mode .docs{width:100%!important;position:static!important;overflow:visible!important}.is-documents-mode .docs .doc-container .doc{height:auto!important}.is-documents-mode .docs .carousel-button{display:none}.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{display:grid;width:100%;grid-template-columns:repeat(auto-fill,minmax(302px,1fr));gap:4px;justify-items:stretch;align-items:start}@media (min-width: 801px) and (max-width: 1001px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(2,minmax(302px,1fr))}}@media (min-width: 1002px) and (max-width: 1307px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(3,minmax(302px,1fr))}}@media (min-width: 1308px) and (max-width: 1613px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(4,minmax(302px,1fr))}}@media (min-width: 1614px) and (max-width: 1920px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(5,minmax(302px,1fr))}}@media (min-width: 1921px) and (max-width: 2227px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(6,minmax(302px,1fr))}}@media (min-width: 2228px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(auto-fit,minmax(302px,1fr))}}@keyframes skeleton-pulse{0%{background-color:#91919133}to{background-color:#91919120}}.cropper-overlay{display:flex;justify-content:center;flex-direction:column;background-color:#fff;align-items:center;z-index:2000;gap:4px;opacity:1;top:0;left:0;position:absolute;width:100%;height:212px}.cropper-overlay .img-cropper{width:100%;height:178px;padding:0}.cropper-overlay .lower-part{display:flex;place-items:center;align-items:center;margin-left:3px;margin-right:3px;width:100%;gap:12px}.cropper-overlay .lower-part .range{width:100%;height:22px;display:flex;align-items:center}.cropper-overlay .lower-part .range input[type=range]{width:100%}.cropper-overlay .lower-part .range input[type=range]{-webkit-appearance:none;appearance:none;border-radius:2px;--range-active-color: #6692f1;--range-progress: 50%;background:transparent;cursor:pointer}.cropper-overlay .lower-part .cropper-buttons{display:flex;justify-content:start;gap:6px}.cropper-overlay .lower-part .cropper-buttons .cancel-button,.cropper-overlay .lower-part .cropper-buttons .submit-button{padding:4px;width:80px;font-size:14px;border-radius:2px;text-transform:uppercase;line-height:14px;font-weight:700;font-size:11px;cursor:pointer}.cropper-overlay .lower-part .cropper-buttons .cancel-button{background-color:#eee;color:#6c6c6c;transition:background-color .3s ease-in-out,color .3s ease-in-out}.cropper-overlay .lower-part .cropper-buttons .cancel-button:hover{background-color:#424242;color:#fff}.cropper-overlay .lower-part .cropper-buttons .cancel-button:active{background-color:#1d1d1d;color:#fff}.cropper-overlay .lower-part .cropper-buttons .submit-button{background-color:#3b73ed;color:#fff;transition:background-color .3s ease-in-out,color .3s ease-in-out}.cropper-overlay .lower-part .cropper-buttons .submit-button:hover{background-color:#0b49d1;color:#fff}.cropper-overlay .lower-part .cropper-buttons .submit-button:active{background-color:#00179e;color:#fff}.cropper-loader{position:absolute;z-index:1100;display:flex;justify-content:center;align-items:center;background-color:#fff;width:100%;height:100%}.cropper-loader .spinner{width:48px;height:48px;border:5px solid rgba(145,145,145,.2);border-top:5px solid #3b73ed;border-radius:50%;animation:spin 1s linear infinite}.hasCropper{height:204px!important;position:relative}input[type=range]:hover{--range-active-color: $color-blue-500}input[type=range]:active{--range-active-color: $color-blue-700}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-7px;background-color:#fff;height:20px;width:30px;box-shadow:0 0 4px #00000026;background-image:url(/assets/icons/interaction/cai-thumb.svg);background-repeat:no-repeat;background-position:center;background-size:14px 18px;border-radius:2px;transition:background-color .3s ease-in-out}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--range-active-color) 0%,var(--range-active-color) var(--range-progress),#eeeeee var(--range-progress),#eeeeee 100%);height:6px;transition:background .3s ease-in-out}input[type=range]:hover::-webkit-slider-runnable-track{background:linear-gradient(to right,#3b73ed 0%,#3b73ed var(--range-progress),#eeeeee var(--range-progress),#eeeeee 100%)}input[type=range]:active::-webkit-slider-runnable-track{background:linear-gradient(to right,#0b49d1 0%,#0b49d1 var(--range-progress),#eeeeee var(--range-progress),#eeeeee 100%)}input[type=range]:hover::-webkit-slider-thumb{cursor:grab}input[type=range]:active::-webkit-slider-thumb{background-image:url(/assets/icons/interaction/cai-thumb-active.svg);cursor:grabbing}@keyframes spin{to{transform:rotate(360deg)}}p{margin-bottom:0}svg-icon{display:flex;align-items:center;justify-content:center}button{border:none!important;outline:none!important}.illustration{width:100px;height:100px}.container{display:flex;gap:6px;position:relative;padding-left:0!important;padding-right:0!important;margin:0!important}.container.smallContainer{width:456px!important}.container.largeContainer{width:616px!important}.docs{flex-shrink:0;height:100%;overflow:hidden;position:relative;border-radius:2px}.smallContainer .docs{max-width:302px!important}.smallContainer .docs .doc-container{display:flex;gap:6px;transition:transform .2s ease-out}.largeContainer .docs{max-width:460px!important}.largeContainer .docs .doc-container{display:flex;gap:8px;transition:transform .2s ease-out}.carousel-button{position:absolute;top:50%;transform:translateY(-50%);border:none;outline:none;width:24px;height:32px;background-color:#ffffffb2;border-radius:2px;box-shadow:0 0 5px #0000004d;cursor:pointer;display:grid;place-items:center;padding:0}.drop-zone-input{display:none}.carousel-left{left:4px}.carousel-right{right:4px}.arrow{width:18px;height:18px;color:#0000004d}.doc{flex:0 0 148px;height:178px;display:flex;background-color:#eee;border-radius:2px}.drop-zone-container{position:relative;flex:1 0 auto}.drop-zone{display:flex;justify-content:center;align-items:center;flex-direction:row;outline:4px dashed #eeeeee;border-radius:2px;padding:35px 0;margin:4px;gap:10px;cursor:pointer;transition:background-color .2s ease-in-out}.drop-zone:hover{background-color:#eee}.drop-zone-text{-webkit-user-select:none;user-select:none;text-align:center}.drop-zone-text .heading{color:#424242;font-size:14px;line-height:18px;font-weight:700;padding-bottom:4px}.drop-zone-text .heading .line{display:block;width:fit-content;margin:0 auto}.drop-zone-text .invalid{color:#df3c3c}.drop-zone-text .subtext{color:#424242;font-size:11px;line-height:14px;font-weight:600}.drop-zone-text .subtext .line{display:block;width:fit-content;margin:0 auto}.drop-zone-text .video-subtext{margin-top:4px;color:#919191;font-size:11px;line-height:14px;font-weight:500}.smallView{width:173px!important}.smallView .drop-zone{flex-direction:column!important;padding:20px 0;width:173px;height:170px}.smallView .drop-zone .drop-zone-text .heading{line-height:18px;padding-bottom:0!important}.smallView .drop-zone .drop-zone-text .subtext{line-height:14px;margin-bottom:0!important}.smallView .illustration{width:80px;height:80px}.text-white-50{color:#fff}.text-white-100{color:#f7f7f7}.text-white-200{color:#eee}.text-white-300{color:#e5e5e5}.text-white-500{color:#dadada}.text-white-500\\/20{color:#dadada33}.text-white-500\\/40{color:#dadada66}.text-white-500\\/70{color:#dadadab3}.text-white-700{color:#ccc}.text-black-50{color:#aaa}.text-black-100{color:#919191}.text-black-200{color:#6c6c6c}.text-black-300{color:#424242}.text-black-500{color:#2f2f2f}.text-black-500\\/20{color:#2f2f2f33}.text-black-500\\/40{color:#2f2f2f66}.text-black-500\\/70{color:#2f2f2fb3}.text-black-700{color:#1d1d1d}.text-blue-50{color:#e9effd}.text-blue-100{color:#bed0f9}.text-blue-200{color:#92b1f5}.text-blue-300{color:#6692f1}.text-blue-500{color:#3b73ed}.text-blue-500\\/20{color:#3b73ed33}.text-blue-500\\/40{color:#3b73ed66}.text-blue-500\\/70{color:#3b73edb3}.text-blue-700{color:#0b49d1}.text-blue-900{color:#00179e}.text-red-50{color:#fbe9e9}.text-red-100{color:#f4bebe}.text-red-200{color:#ed9292}.text-red-300{color:#e66767}.text-red-500{color:#df3c3c}.text-red-500\\/20{color:#df3c3c33}.text-red-500\\/40{color:#df3c3c66}.text-red-500\\/70{color:#df3c3cb3}.text-red-700{color:#c20c0c}.text-green-50{color:#e7f4f3}.text-green-100{color:#b6dfdb}.text-green-200{color:#86c9c3}.text-green-300{color:#56b4ac}.text-green-500{color:#259f94}.text-green-500\\/20{color:#259f9433}.text-green-500\\/40{color:#259f9466}.text-green-500\\/70{color:#259f94b3}.text-green-700{color:#007a6e}.text-yellow-50{color:#fef4e8}.text-yellow-100{color:#fddeb9}.text-yellow-200{color:#fbc88b}.text-yellow-300{color:#fab15c}.text-yellow-500{color:#f89b2e}.text-yellow-500\\/20{color:#f89b2e33}.text-yellow-500\\/40{color:#f89b2e66}.text-yellow-500\\/70{color:#f89b2eb3}.text-yellow-700{color:#de7700}.text-purple-50{color:#f4ebfd}.text-purple-100{color:#dfc2f9}.text-purple-200{color:#c999f4}.text-purple-300{color:#b370f0}.text-purple-500{color:#9e47ec}.text-purple-500\\/20{color:#9e47ec33}.text-purple-500\\/40{color:#9e47ec66}.text-purple-500\\/70{color:#9e47ecb3}.text-purple-700{color:#7919d0}.text-orange-50{color:#ffefea}.text-orange-100{color:#ffcfc0}.text-orange-200{color:#ffb097}.text-orange-300{color:#ff906d}.text-orange-500{color:#ff7043}.text-orange-500\\/20{color:#ff704333}.text-orange-500\\/40{color:#ff704366}.text-orange-500\\/70{color:#ff7043b3}.text-orange-700{color:#e54715}.text-azure-50{color:#e5f7fc}.text-azure-100{color:#b2e6f7}.text-azure-200{color:#80d6f1}.text-azure-300{color:#4dc5eb}.text-azure-500{color:#1ab5e6}.text-azure-500\\/20{color:#1ab5e633}.text-azure-500\\/40{color:#1ab5e666}.text-azure-500\\/70{color:#1ab5e6b3}.text-azure-700{color:#0093c9}.text-gold-50{color:#faf3e6}.text-gold-100{color:#efdcb4}.text-gold-200{color:#e4c481}.text-gold-300{color:#daad4f}.text-gold-500{color:#cf961d}.text-gold-500\\/20{color:#cf961d33}.text-gold-500\\/40{color:#cf961d66}.text-gold-500\\/70{color:#cf961db3}.text-gold-700{color:#b07000}.text-brown-50{color:#f1ede9}.text-brown-100{color:#d6c9bd}.text-brown-200{color:#bca691}.text-brown-300{color:#a08266}.text-brown-500{color:#865e3a}.text-brown-500\\/20{color:#865e3a33}.text-brown-500\\/40{color:#865e3a66}.text-brown-500\\/70{color:#865e3ab3}.text-brown-700{color:#5f330a}.text-navy-50{color:#e7e7fa}.text-navy-100{color:#b7b6f1}.text-navy-200{color:#8785e8}.text-navy-300{color:#5755df}.text-navy-500{color:#2724d6}.text-navy-500\\/20{color:#2724d633}.text-navy-500\\/40{color:#2724d666}.text-navy-500\\/70{color:#2724d6b3}.text-navy-700{color:#0000b8}.text-lime-50{color:#ecf6e7}.text-lime-100{color:#c5e3b6}.text-lime-200{color:#9ed186}.text-lime-300{color:#77bf56}.text-lime-500{color:#50ac25}.text-lime-500\\/20{color:#50ac2533}.text-lime-500\\/40{color:#50ac2566}.text-lime-500\\/70{color:#50ac25b3}.text-lime-700{color:#238900}.text-magenta-50{color:#fbe9f1}.text-magenta-100{color:#f4bed6}.text-magenta-200{color:#ed93bb}.text-magenta-300{color:#e668a0}.text-magenta-500{color:#df3d85}.text-magenta-500\\/20{color:#df3d8533}.text-magenta-500\\/40{color:#df3d8566}.text-magenta-500\\/70{color:#df3d85b3}.text-magenta-700{color:#c10d5d}.bg-white-50{background-color:#fff}.bg-white-100{background-color:#f7f7f7}.bg-white-200{background-color:#eee}.bg-white-300{background-color:#e5e5e5}.bg-white-500{background-color:#dadada}.bg-white-500\\/20{background-color:#dadada33}.bg-white-500\\/40{background-color:#dadada66}.bg-white-500\\/70{background-color:#dadadab3}.bg-white-700{background-color:#ccc}.bg-black-50{background-color:#aaa}.bg-black-100{background-color:#919191}.bg-black-200{background-color:#6c6c6c}.bg-black-300{background-color:#424242}.bg-black-500{background-color:#2f2f2f}.bg-black-500\\/20{background-color:#2f2f2f33}.bg-black-500\\/40{background-color:#2f2f2f66}.bg-black-500\\/70{background-color:#2f2f2fb3}.bg-black-700{background-color:#1d1d1d}.bg-blue-50{background-color:#e9effd}.bg-blue-100{background-color:#bed0f9}.bg-blue-200{background-color:#92b1f5}.bg-blue-300{background-color:#6692f1}.bg-blue-500{background-color:#3b73ed}.bg-blue-500\\/20{background-color:#3b73ed33}.bg-blue-500\\/40{background-color:#3b73ed66}.bg-blue-500\\/70{background-color:#3b73edb3}.bg-blue-700{background-color:#0b49d1}.bg-blue-900{background-color:#00179e}.bg-red-50{background-color:#fbe9e9}.bg-red-100{background-color:#f4bebe}.bg-red-200{background-color:#ed9292}.bg-red-300{background-color:#e66767}.bg-red-500{background-color:#df3c3c}.bg-red-500\\/20{background-color:#df3c3c33}.bg-red-500\\/40{background-color:#df3c3c66}.bg-red-500\\/70{background-color:#df3c3cb3}.bg-red-700{background-color:#c20c0c}.bg-green-50{background-color:#e7f4f3}.bg-green-100{background-color:#b6dfdb}.bg-green-200{background-color:#86c9c3}.bg-green-300{background-color:#56b4ac}.bg-green-500{background-color:#259f94}.bg-green-500\\/20{background-color:#259f9433}.bg-green-500\\/40{background-color:#259f9466}.bg-green-500\\/70{background-color:#259f94b3}.bg-green-700{background-color:#007a6e}.bg-yellow-50{background-color:#fef4e8}.bg-yellow-100{background-color:#fddeb9}.bg-yellow-200{background-color:#fbc88b}.bg-yellow-300{background-color:#fab15c}.bg-yellow-500{background-color:#f89b2e}.bg-yellow-500\\/20{background-color:#f89b2e33}.bg-yellow-500\\/40{background-color:#f89b2e66}.bg-yellow-500\\/70{background-color:#f89b2eb3}.bg-yellow-700{background-color:#de7700}.bg-purple-50{background-color:#f4ebfd}.bg-purple-100{background-color:#dfc2f9}.bg-purple-200{background-color:#c999f4}.bg-purple-300{background-color:#b370f0}.bg-purple-500{background-color:#9e47ec}.bg-purple-500\\/20{background-color:#9e47ec33}.bg-purple-500\\/40{background-color:#9e47ec66}.bg-purple-500\\/70{background-color:#9e47ecb3}.bg-purple-700{background-color:#7919d0}.bg-orange-50{background-color:#ffefea}.bg-orange-100{background-color:#ffcfc0}.bg-orange-200{background-color:#ffb097}.bg-orange-300{background-color:#ff906d}.bg-orange-500{background-color:#ff7043}.bg-orange-500\\/20{background-color:#ff704333}.bg-orange-500\\/40{background-color:#ff704366}.bg-orange-500\\/70{background-color:#ff7043b3}.bg-orange-700{background-color:#e54715}.bg-azure-50{background-color:#e5f7fc}.bg-azure-100{background-color:#b2e6f7}.bg-azure-200{background-color:#80d6f1}.bg-azure-300{background-color:#4dc5eb}.bg-azure-500{background-color:#1ab5e6}.bg-azure-500\\/20{background-color:#1ab5e633}.bg-azure-500\\/40{background-color:#1ab5e666}.bg-azure-500\\/70{background-color:#1ab5e6b3}.bg-azure-700{background-color:#0093c9}.bg-gold-50{background-color:#faf3e6}.bg-gold-100{background-color:#efdcb4}.bg-gold-200{background-color:#e4c481}.bg-gold-300{background-color:#daad4f}.bg-gold-500{background-color:#cf961d}.bg-gold-500\\/20{background-color:#cf961d33}.bg-gold-500\\/40{background-color:#cf961d66}.bg-gold-500\\/70{background-color:#cf961db3}.bg-gold-700{background-color:#b07000}.bg-brown-50{background-color:#f1ede9}.bg-brown-100{background-color:#d6c9bd}.bg-brown-200{background-color:#bca691}.bg-brown-300{background-color:#a08266}.bg-brown-500{background-color:#865e3a}.bg-brown-500\\/20{background-color:#865e3a33}.bg-brown-500\\/40{background-color:#865e3a66}.bg-brown-500\\/70{background-color:#865e3ab3}.bg-brown-700{background-color:#5f330a}.bg-navy-50{background-color:#e7e7fa}.bg-navy-100{background-color:#b7b6f1}.bg-navy-200{background-color:#8785e8}.bg-navy-300{background-color:#5755df}.bg-navy-500{background-color:#2724d6}.bg-navy-500\\/20{background-color:#2724d633}.bg-navy-500\\/40{background-color:#2724d666}.bg-navy-500\\/70{background-color:#2724d6b3}.bg-navy-700{background-color:#0000b8}.bg-lime-50{background-color:#ecf6e7}.bg-lime-100{background-color:#c5e3b6}.bg-lime-200{background-color:#9ed186}.bg-lime-300{background-color:#77bf56}.bg-lime-500{background-color:#50ac25}.bg-lime-500\\/20{background-color:#50ac2533}.bg-lime-500\\/40{background-color:#50ac2566}.bg-lime-500\\/70{background-color:#50ac25b3}.bg-lime-700{background-color:#238900}.bg-magenta-50{background-color:#fbe9f1}.bg-magenta-100{background-color:#f4bed6}.bg-magenta-200{background-color:#ed93bb}.bg-magenta-300{background-color:#e668a0}.bg-magenta-500{background-color:#df3d85}.bg-magenta-500\\/20{background-color:#df3d8533}.bg-magenta-500\\/40{background-color:#df3d8566}.bg-magenta-500\\/70{background-color:#df3d85b3}.bg-magenta-700{background-color:#c10d5d}.border-white-50{border-color:#fff}.border-white-100{border-color:#f7f7f7}.border-white-200{border-color:#eee}.border-white-300{border-color:#e5e5e5}.border-white-500{border-color:#dadada}.border-white-500\\/20{border-color:#dadada33}.border-white-500\\/40{border-color:#dadada66}.border-white-500\\/70{border-color:#dadadab3}.border-white-700{border-color:#ccc}.border-black-50{border-color:#aaa}.border-black-100{border-color:#919191}.border-black-200{border-color:#6c6c6c}.border-black-300{border-color:#424242}.border-black-500{border-color:#2f2f2f}.border-black-500\\/20{border-color:#2f2f2f33}.border-black-500\\/40{border-color:#2f2f2f66}.border-black-500\\/70{border-color:#2f2f2fb3}.border-black-700{border-color:#1d1d1d}.border-blue-50{border-color:#e9effd}.border-blue-100{border-color:#bed0f9}.border-blue-200{border-color:#92b1f5}.border-blue-300{border-color:#6692f1}.border-blue-500{border-color:#3b73ed}.border-blue-500\\/20{border-color:#3b73ed33}.border-blue-500\\/40{border-color:#3b73ed66}.border-blue-500\\/70{border-color:#3b73edb3}.border-blue-700{border-color:#0b49d1}.border-blue-900{border-color:#00179e}.border-red-50{border-color:#fbe9e9}.border-red-100{border-color:#f4bebe}.border-red-200{border-color:#ed9292}.border-red-300{border-color:#e66767}.border-red-500{border-color:#df3c3c}.border-red-500\\/20{border-color:#df3c3c33}.border-red-500\\/40{border-color:#df3c3c66}.border-red-500\\/70{border-color:#df3c3cb3}.border-red-700{border-color:#c20c0c}.border-green-50{border-color:#e7f4f3}.border-green-100{border-color:#b6dfdb}.border-green-200{border-color:#86c9c3}.border-green-300{border-color:#56b4ac}.border-green-500{border-color:#259f94}.border-green-500\\/20{border-color:#259f9433}.border-green-500\\/40{border-color:#259f9466}.border-green-500\\/70{border-color:#259f94b3}.border-green-700{border-color:#007a6e}.border-yellow-50{border-color:#fef4e8}.border-yellow-100{border-color:#fddeb9}.border-yellow-200{border-color:#fbc88b}.border-yellow-300{border-color:#fab15c}.border-yellow-500{border-color:#f89b2e}.border-yellow-500\\/20{border-color:#f89b2e33}.border-yellow-500\\/40{border-color:#f89b2e66}.border-yellow-500\\/70{border-color:#f89b2eb3}.border-yellow-700{border-color:#de7700}.border-purple-50{border-color:#f4ebfd}.border-purple-100{border-color:#dfc2f9}.border-purple-200{border-color:#c999f4}.border-purple-300{border-color:#b370f0}.border-purple-500{border-color:#9e47ec}.border-purple-500\\/20{border-color:#9e47ec33}.border-purple-500\\/40{border-color:#9e47ec66}.border-purple-500\\/70{border-color:#9e47ecb3}.border-purple-700{border-color:#7919d0}.border-orange-50{border-color:#ffefea}.border-orange-100{border-color:#ffcfc0}.border-orange-200{border-color:#ffb097}.border-orange-300{border-color:#ff906d}.border-orange-500{border-color:#ff7043}.border-orange-500\\/20{border-color:#ff704333}.border-orange-500\\/40{border-color:#ff704366}.border-orange-500\\/70{border-color:#ff7043b3}.border-orange-700{border-color:#e54715}.border-azure-50{border-color:#e5f7fc}.border-azure-100{border-color:#b2e6f7}.border-azure-200{border-color:#80d6f1}.border-azure-300{border-color:#4dc5eb}.border-azure-500{border-color:#1ab5e6}.border-azure-500\\/20{border-color:#1ab5e633}.border-azure-500\\/40{border-color:#1ab5e666}.border-azure-500\\/70{border-color:#1ab5e6b3}.border-azure-700{border-color:#0093c9}.border-gold-50{border-color:#faf3e6}.border-gold-100{border-color:#efdcb4}.border-gold-200{border-color:#e4c481}.border-gold-300{border-color:#daad4f}.border-gold-500{border-color:#cf961d}.border-gold-500\\/20{border-color:#cf961d33}.border-gold-500\\/40{border-color:#cf961d66}.border-gold-500\\/70{border-color:#cf961db3}.border-gold-700{border-color:#b07000}.border-brown-50{border-color:#f1ede9}.border-brown-100{border-color:#d6c9bd}.border-brown-200{border-color:#bca691}.border-brown-300{border-color:#a08266}.border-brown-500{border-color:#865e3a}.border-brown-500\\/20{border-color:#865e3a33}.border-brown-500\\/40{border-color:#865e3a66}.border-brown-500\\/70{border-color:#865e3ab3}.border-brown-700{border-color:#5f330a}.border-navy-50{border-color:#e7e7fa}.border-navy-100{border-color:#b7b6f1}.border-navy-200{border-color:#8785e8}.border-navy-300{border-color:#5755df}.border-navy-500{border-color:#2724d6}.border-navy-500\\/20{border-color:#2724d633}.border-navy-500\\/40{border-color:#2724d666}.border-navy-500\\/70{border-color:#2724d6b3}.border-navy-700{border-color:#0000b8}.border-lime-50{border-color:#ecf6e7}.border-lime-100{border-color:#c5e3b6}.border-lime-200{border-color:#9ed186}.border-lime-300{border-color:#77bf56}.border-lime-500{border-color:#50ac25}.border-lime-500\\/20{border-color:#50ac2533}.border-lime-500\\/40{border-color:#50ac2566}.border-lime-500\\/70{border-color:#50ac25b3}.border-lime-700{border-color:#238900}.border-magenta-50{border-color:#fbe9f1}.border-magenta-100{border-color:#f4bed6}.border-magenta-200{border-color:#ed93bb}.border-magenta-300{border-color:#e668a0}.border-magenta-500{border-color:#df3d85}.border-magenta-500\\/20{border-color:#df3d8533}.border-magenta-500\\/40{border-color:#df3d8566}.border-magenta-500\\/70{border-color:#df3d85b3}.border-magenta-700{border-color:#c10d5d}.fill-white-50{fill:#fff}.fill-white-100{fill:#f7f7f7}.fill-white-200{fill:#eee}.fill-white-300{fill:#e5e5e5}.fill-white-500{fill:#dadada}.fill-white-500\\/20{fill:#dadada33}.fill-white-500\\/40{fill:#dadada66}.fill-white-500\\/70{fill:#dadadab3}.fill-white-700{fill:#ccc}.fill-black-50{fill:#aaa}.fill-black-100{fill:#919191}.fill-black-200{fill:#6c6c6c}.fill-black-300{fill:#424242}.fill-black-500{fill:#2f2f2f}.fill-black-500\\/20{fill:#2f2f2f33}.fill-black-500\\/40{fill:#2f2f2f66}.fill-black-500\\/70{fill:#2f2f2fb3}.fill-black-700{fill:#1d1d1d}.fill-blue-50{fill:#e9effd}.fill-blue-100{fill:#bed0f9}.fill-blue-200{fill:#92b1f5}.fill-blue-300{fill:#6692f1}.fill-blue-500{fill:#3b73ed}.fill-blue-500\\/20{fill:#3b73ed33}.fill-blue-500\\/40{fill:#3b73ed66}.fill-blue-500\\/70{fill:#3b73edb3}.fill-blue-700{fill:#0b49d1}.fill-blue-900{fill:#00179e}.fill-red-50{fill:#fbe9e9}.fill-red-100{fill:#f4bebe}.fill-red-200{fill:#ed9292}.fill-red-300{fill:#e66767}.fill-red-500{fill:#df3c3c}.fill-red-500\\/20{fill:#df3c3c33}.fill-red-500\\/40{fill:#df3c3c66}.fill-red-500\\/70{fill:#df3c3cb3}.fill-red-700{fill:#c20c0c}.fill-green-50{fill:#e7f4f3}.fill-green-100{fill:#b6dfdb}.fill-green-200{fill:#86c9c3}.fill-green-300{fill:#56b4ac}.fill-green-500{fill:#259f94}.fill-green-500\\/20{fill:#259f9433}.fill-green-500\\/40{fill:#259f9466}.fill-green-500\\/70{fill:#259f94b3}.fill-green-700{fill:#007a6e}.fill-yellow-50{fill:#fef4e8}.fill-yellow-100{fill:#fddeb9}.fill-yellow-200{fill:#fbc88b}.fill-yellow-300{fill:#fab15c}.fill-yellow-500{fill:#f89b2e}.fill-yellow-500\\/20{fill:#f89b2e33}.fill-yellow-500\\/40{fill:#f89b2e66}.fill-yellow-500\\/70{fill:#f89b2eb3}.fill-yellow-700{fill:#de7700}.fill-purple-50{fill:#f4ebfd}.fill-purple-100{fill:#dfc2f9}.fill-purple-200{fill:#c999f4}.fill-purple-300{fill:#b370f0}.fill-purple-500{fill:#9e47ec}.fill-purple-500\\/20{fill:#9e47ec33}.fill-purple-500\\/40{fill:#9e47ec66}.fill-purple-500\\/70{fill:#9e47ecb3}.fill-purple-700{fill:#7919d0}.fill-orange-50{fill:#ffefea}.fill-orange-100{fill:#ffcfc0}.fill-orange-200{fill:#ffb097}.fill-orange-300{fill:#ff906d}.fill-orange-500{fill:#ff7043}.fill-orange-500\\/20{fill:#ff704333}.fill-orange-500\\/40{fill:#ff704366}.fill-orange-500\\/70{fill:#ff7043b3}.fill-orange-700{fill:#e54715}.fill-azure-50{fill:#e5f7fc}.fill-azure-100{fill:#b2e6f7}.fill-azure-200{fill:#80d6f1}.fill-azure-300{fill:#4dc5eb}.fill-azure-500{fill:#1ab5e6}.fill-azure-500\\/20{fill:#1ab5e633}.fill-azure-500\\/40{fill:#1ab5e666}.fill-azure-500\\/70{fill:#1ab5e6b3}.fill-azure-700{fill:#0093c9}.fill-gold-50{fill:#faf3e6}.fill-gold-100{fill:#efdcb4}.fill-gold-200{fill:#e4c481}.fill-gold-300{fill:#daad4f}.fill-gold-500{fill:#cf961d}.fill-gold-500\\/20{fill:#cf961d33}.fill-gold-500\\/40{fill:#cf961d66}.fill-gold-500\\/70{fill:#cf961db3}.fill-gold-700{fill:#b07000}.fill-brown-50{fill:#f1ede9}.fill-brown-100{fill:#d6c9bd}.fill-brown-200{fill:#bca691}.fill-brown-300{fill:#a08266}.fill-brown-500{fill:#865e3a}.fill-brown-500\\/20{fill:#865e3a33}.fill-brown-500\\/40{fill:#865e3a66}.fill-brown-500\\/70{fill:#865e3ab3}.fill-brown-700{fill:#5f330a}.fill-navy-50{fill:#e7e7fa}.fill-navy-100{fill:#b7b6f1}.fill-navy-200{fill:#8785e8}.fill-navy-300{fill:#5755df}.fill-navy-500{fill:#2724d6}.fill-navy-500\\/20{fill:#2724d633}.fill-navy-500\\/40{fill:#2724d666}.fill-navy-500\\/70{fill:#2724d6b3}.fill-navy-700{fill:#0000b8}.fill-lime-50{fill:#ecf6e7}.fill-lime-100{fill:#c5e3b6}.fill-lime-200{fill:#9ed186}.fill-lime-300{fill:#77bf56}.fill-lime-500{fill:#50ac25}.fill-lime-500\\/20{fill:#50ac2533}.fill-lime-500\\/40{fill:#50ac2566}.fill-lime-500\\/70{fill:#50ac25b3}.fill-lime-700{fill:#238900}.fill-magenta-50{fill:#fbe9f1}.fill-magenta-100{fill:#f4bed6}.fill-magenta-200{fill:#ed93bb}.fill-magenta-300{fill:#e668a0}.fill-magenta-500{fill:#df3d85}.fill-magenta-500\\/20{fill:#df3d8533}.fill-magenta-500\\/40{fill:#df3d8566}.fill-magenta-500\\/70{fill:#df3d85b3}.fill-magenta-700{fill:#c10d5d}.stroke-white-50{stroke:#fff}.stroke-white-100{stroke:#f7f7f7}.stroke-white-200{stroke:#eee}.stroke-white-300{stroke:#e5e5e5}.stroke-white-500{stroke:#dadada}.stroke-white-500\\/20{stroke:#dadada33}.stroke-white-500\\/40{stroke:#dadada66}.stroke-white-500\\/70{stroke:#dadadab3}.stroke-white-700{stroke:#ccc}.stroke-black-50{stroke:#aaa}.stroke-black-100{stroke:#919191}.stroke-black-200{stroke:#6c6c6c}.stroke-black-300{stroke:#424242}.stroke-black-500{stroke:#2f2f2f}.stroke-black-500\\/20{stroke:#2f2f2f33}.stroke-black-500\\/40{stroke:#2f2f2f66}.stroke-black-500\\/70{stroke:#2f2f2fb3}.stroke-black-700{stroke:#1d1d1d}.stroke-blue-50{stroke:#e9effd}.stroke-blue-100{stroke:#bed0f9}.stroke-blue-200{stroke:#92b1f5}.stroke-blue-300{stroke:#6692f1}.stroke-blue-500{stroke:#3b73ed}.stroke-blue-500\\/20{stroke:#3b73ed33}.stroke-blue-500\\/40{stroke:#3b73ed66}.stroke-blue-500\\/70{stroke:#3b73edb3}.stroke-blue-700{stroke:#0b49d1}.stroke-blue-900{stroke:#00179e}.stroke-red-50{stroke:#fbe9e9}.stroke-red-100{stroke:#f4bebe}.stroke-red-200{stroke:#ed9292}.stroke-red-300{stroke:#e66767}.stroke-red-500{stroke:#df3c3c}.stroke-red-500\\/20{stroke:#df3c3c33}.stroke-red-500\\/40{stroke:#df3c3c66}.stroke-red-500\\/70{stroke:#df3c3cb3}.stroke-red-700{stroke:#c20c0c}.stroke-green-50{stroke:#e7f4f3}.stroke-green-100{stroke:#b6dfdb}.stroke-green-200{stroke:#86c9c3}.stroke-green-300{stroke:#56b4ac}.stroke-green-500{stroke:#259f94}.stroke-green-500\\/20{stroke:#259f9433}.stroke-green-500\\/40{stroke:#259f9466}.stroke-green-500\\/70{stroke:#259f94b3}.stroke-green-700{stroke:#007a6e}.stroke-yellow-50{stroke:#fef4e8}.stroke-yellow-100{stroke:#fddeb9}.stroke-yellow-200{stroke:#fbc88b}.stroke-yellow-300{stroke:#fab15c}.stroke-yellow-500{stroke:#f89b2e}.stroke-yellow-500\\/20{stroke:#f89b2e33}.stroke-yellow-500\\/40{stroke:#f89b2e66}.stroke-yellow-500\\/70{stroke:#f89b2eb3}.stroke-yellow-700{stroke:#de7700}.stroke-purple-50{stroke:#f4ebfd}.stroke-purple-100{stroke:#dfc2f9}.stroke-purple-200{stroke:#c999f4}.stroke-purple-300{stroke:#b370f0}.stroke-purple-500{stroke:#9e47ec}.stroke-purple-500\\/20{stroke:#9e47ec33}.stroke-purple-500\\/40{stroke:#9e47ec66}.stroke-purple-500\\/70{stroke:#9e47ecb3}.stroke-purple-700{stroke:#7919d0}.stroke-orange-50{stroke:#ffefea}.stroke-orange-100{stroke:#ffcfc0}.stroke-orange-200{stroke:#ffb097}.stroke-orange-300{stroke:#ff906d}.stroke-orange-500{stroke:#ff7043}.stroke-orange-500\\/20{stroke:#ff704333}.stroke-orange-500\\/40{stroke:#ff704366}.stroke-orange-500\\/70{stroke:#ff7043b3}.stroke-orange-700{stroke:#e54715}.stroke-azure-50{stroke:#e5f7fc}.stroke-azure-100{stroke:#b2e6f7}.stroke-azure-200{stroke:#80d6f1}.stroke-azure-300{stroke:#4dc5eb}.stroke-azure-500{stroke:#1ab5e6}.stroke-azure-500\\/20{stroke:#1ab5e633}.stroke-azure-500\\/40{stroke:#1ab5e666}.stroke-azure-500\\/70{stroke:#1ab5e6b3}.stroke-azure-700{stroke:#0093c9}.stroke-gold-50{stroke:#faf3e6}.stroke-gold-100{stroke:#efdcb4}.stroke-gold-200{stroke:#e4c481}.stroke-gold-300{stroke:#daad4f}.stroke-gold-500{stroke:#cf961d}.stroke-gold-500\\/20{stroke:#cf961d33}.stroke-gold-500\\/40{stroke:#cf961d66}.stroke-gold-500\\/70{stroke:#cf961db3}.stroke-gold-700{stroke:#b07000}.stroke-brown-50{stroke:#f1ede9}.stroke-brown-100{stroke:#d6c9bd}.stroke-brown-200{stroke:#bca691}.stroke-brown-300{stroke:#a08266}.stroke-brown-500{stroke:#865e3a}.stroke-brown-500\\/20{stroke:#865e3a33}.stroke-brown-500\\/40{stroke:#865e3a66}.stroke-brown-500\\/70{stroke:#865e3ab3}.stroke-brown-700{stroke:#5f330a}.stroke-navy-50{stroke:#e7e7fa}.stroke-navy-100{stroke:#b7b6f1}.stroke-navy-200{stroke:#8785e8}.stroke-navy-300{stroke:#5755df}.stroke-navy-500{stroke:#2724d6}.stroke-navy-500\\/20{stroke:#2724d633}.stroke-navy-500\\/40{stroke:#2724d666}.stroke-navy-500\\/70{stroke:#2724d6b3}.stroke-navy-700{stroke:#0000b8}.stroke-lime-50{stroke:#ecf6e7}.stroke-lime-100{stroke:#c5e3b6}.stroke-lime-200{stroke:#9ed186}.stroke-lime-300{stroke:#77bf56}.stroke-lime-500{stroke:#50ac25}.stroke-lime-500\\/20{stroke:#50ac2533}.stroke-lime-500\\/40{stroke:#50ac2566}.stroke-lime-500\\/70{stroke:#50ac25b3}.stroke-lime-700{stroke:#238900}.stroke-magenta-50{stroke:#fbe9f1}.stroke-magenta-100{stroke:#f4bed6}.stroke-magenta-200{stroke:#ed93bb}.stroke-magenta-300{stroke:#e668a0}.stroke-magenta-500{stroke:#df3d85}.stroke-magenta-500\\/20{stroke:#df3d8533}.stroke-magenta-500\\/40{stroke:#df3d8566}.stroke-magenta-500\\/70{stroke:#df3d85b3}.stroke-magenta-700{stroke:#c10d5d}.hover\\:text-white-50:hover{color:#fff}.hover\\:text-white-100:hover{color:#f7f7f7}.hover\\:text-white-200:hover{color:#eee}.hover\\:text-white-300:hover{color:#e5e5e5}.hover\\:text-white-500:hover{color:#dadada}.hover\\:text-white-500:hover\\/20{color:#dadada33}.hover\\:text-white-500:hover\\/40{color:#dadada66}.hover\\:text-white-500:hover\\/70{color:#dadadab3}.hover\\:text-white-700:hover{color:#ccc}.hover\\:text-black-50:hover{color:#aaa}.hover\\:text-black-100:hover{color:#919191}.hover\\:text-black-200:hover{color:#6c6c6c}.hover\\:text-black-300:hover{color:#424242}.hover\\:text-black-500:hover{color:#2f2f2f}.hover\\:text-black-500:hover\\/20{color:#2f2f2f33}.hover\\:text-black-500:hover\\/40{color:#2f2f2f66}.hover\\:text-black-500:hover\\/70{color:#2f2f2fb3}.hover\\:text-black-700:hover{color:#1d1d1d}.hover\\:text-blue-50:hover{color:#e9effd}.hover\\:text-blue-100:hover{color:#bed0f9}.hover\\:text-blue-200:hover{color:#92b1f5}.hover\\:text-blue-300:hover{color:#6692f1}.hover\\:text-blue-500:hover{color:#3b73ed}.hover\\:text-blue-500:hover\\/20{color:#3b73ed33}.hover\\:text-blue-500:hover\\/40{color:#3b73ed66}.hover\\:text-blue-500:hover\\/70{color:#3b73edb3}.hover\\:text-blue-700:hover{color:#0b49d1}.hover\\:text-blue-900:hover{color:#00179e}.hover\\:text-red-50:hover{color:#fbe9e9}.hover\\:text-red-100:hover{color:#f4bebe}.hover\\:text-red-200:hover{color:#ed9292}.hover\\:text-red-300:hover{color:#e66767}.hover\\:text-red-500:hover{color:#df3c3c}.hover\\:text-red-500:hover\\/20{color:#df3c3c33}.hover\\:text-red-500:hover\\/40{color:#df3c3c66}.hover\\:text-red-500:hover\\/70{color:#df3c3cb3}.hover\\:text-red-700:hover{color:#c20c0c}.hover\\:text-green-50:hover{color:#e7f4f3}.hover\\:text-green-100:hover{color:#b6dfdb}.hover\\:text-green-200:hover{color:#86c9c3}.hover\\:text-green-300:hover{color:#56b4ac}.hover\\:text-green-500:hover{color:#259f94}.hover\\:text-green-500:hover\\/20{color:#259f9433}.hover\\:text-green-500:hover\\/40{color:#259f9466}.hover\\:text-green-500:hover\\/70{color:#259f94b3}.hover\\:text-green-700:hover{color:#007a6e}.hover\\:text-yellow-50:hover{color:#fef4e8}.hover\\:text-yellow-100:hover{color:#fddeb9}.hover\\:text-yellow-200:hover{color:#fbc88b}.hover\\:text-yellow-300:hover{color:#fab15c}.hover\\:text-yellow-500:hover{color:#f89b2e}.hover\\:text-yellow-500:hover\\/20{color:#f89b2e33}.hover\\:text-yellow-500:hover\\/40{color:#f89b2e66}.hover\\:text-yellow-500:hover\\/70{color:#f89b2eb3}.hover\\:text-yellow-700:hover{color:#de7700}.hover\\:text-purple-50:hover{color:#f4ebfd}.hover\\:text-purple-100:hover{color:#dfc2f9}.hover\\:text-purple-200:hover{color:#c999f4}.hover\\:text-purple-300:hover{color:#b370f0}.hover\\:text-purple-500:hover{color:#9e47ec}.hover\\:text-purple-500:hover\\/20{color:#9e47ec33}.hover\\:text-purple-500:hover\\/40{color:#9e47ec66}.hover\\:text-purple-500:hover\\/70{color:#9e47ecb3}.hover\\:text-purple-700:hover{color:#7919d0}.hover\\:text-orange-50:hover{color:#ffefea}.hover\\:text-orange-100:hover{color:#ffcfc0}.hover\\:text-orange-200:hover{color:#ffb097}.hover\\:text-orange-300:hover{color:#ff906d}.hover\\:text-orange-500:hover{color:#ff7043}.hover\\:text-orange-500:hover\\/20{color:#ff704333}.hover\\:text-orange-500:hover\\/40{color:#ff704366}.hover\\:text-orange-500:hover\\/70{color:#ff7043b3}.hover\\:text-orange-700:hover{color:#e54715}.hover\\:text-azure-50:hover{color:#e5f7fc}.hover\\:text-azure-100:hover{color:#b2e6f7}.hover\\:text-azure-200:hover{color:#80d6f1}.hover\\:text-azure-300:hover{color:#4dc5eb}.hover\\:text-azure-500:hover{color:#1ab5e6}.hover\\:text-azure-500:hover\\/20{color:#1ab5e633}.hover\\:text-azure-500:hover\\/40{color:#1ab5e666}.hover\\:text-azure-500:hover\\/70{color:#1ab5e6b3}.hover\\:text-azure-700:hover{color:#0093c9}.hover\\:text-gold-50:hover{color:#faf3e6}.hover\\:text-gold-100:hover{color:#efdcb4}.hover\\:text-gold-200:hover{color:#e4c481}.hover\\:text-gold-300:hover{color:#daad4f}.hover\\:text-gold-500:hover{color:#cf961d}.hover\\:text-gold-500:hover\\/20{color:#cf961d33}.hover\\:text-gold-500:hover\\/40{color:#cf961d66}.hover\\:text-gold-500:hover\\/70{color:#cf961db3}.hover\\:text-gold-700:hover{color:#b07000}.hover\\:text-brown-50:hover{color:#f1ede9}.hover\\:text-brown-100:hover{color:#d6c9bd}.hover\\:text-brown-200:hover{color:#bca691}.hover\\:text-brown-300:hover{color:#a08266}.hover\\:text-brown-500:hover{color:#865e3a}.hover\\:text-brown-500:hover\\/20{color:#865e3a33}.hover\\:text-brown-500:hover\\/40{color:#865e3a66}.hover\\:text-brown-500:hover\\/70{color:#865e3ab3}.hover\\:text-brown-700:hover{color:#5f330a}.hover\\:text-navy-50:hover{color:#e7e7fa}.hover\\:text-navy-100:hover{color:#b7b6f1}.hover\\:text-navy-200:hover{color:#8785e8}.hover\\:text-navy-300:hover{color:#5755df}.hover\\:text-navy-500:hover{color:#2724d6}.hover\\:text-navy-500:hover\\/20{color:#2724d633}.hover\\:text-navy-500:hover\\/40{color:#2724d666}.hover\\:text-navy-500:hover\\/70{color:#2724d6b3}.hover\\:text-navy-700:hover{color:#0000b8}.hover\\:text-lime-50:hover{color:#ecf6e7}.hover\\:text-lime-100:hover{color:#c5e3b6}.hover\\:text-lime-200:hover{color:#9ed186}.hover\\:text-lime-300:hover{color:#77bf56}.hover\\:text-lime-500:hover{color:#50ac25}.hover\\:text-lime-500:hover\\/20{color:#50ac2533}.hover\\:text-lime-500:hover\\/40{color:#50ac2566}.hover\\:text-lime-500:hover\\/70{color:#50ac25b3}.hover\\:text-lime-700:hover{color:#238900}.hover\\:text-magenta-50:hover{color:#fbe9f1}.hover\\:text-magenta-100:hover{color:#f4bed6}.hover\\:text-magenta-200:hover{color:#ed93bb}.hover\\:text-magenta-300:hover{color:#e668a0}.hover\\:text-magenta-500:hover{color:#df3d85}.hover\\:text-magenta-500:hover\\/20{color:#df3d8533}.hover\\:text-magenta-500:hover\\/40{color:#df3d8566}.hover\\:text-magenta-500:hover\\/70{color:#df3d85b3}.hover\\:text-magenta-700:hover{color:#c10d5d}.hover\\:bg-white-50:hover{background-color:#fff}.hover\\:bg-white-100:hover{background-color:#f7f7f7}.hover\\:bg-white-200:hover{background-color:#eee}.hover\\:bg-white-300:hover{background-color:#e5e5e5}.hover\\:bg-white-500:hover{background-color:#dadada}.hover\\:bg-white-500:hover\\/20{background-color:#dadada33}.hover\\:bg-white-500:hover\\/40{background-color:#dadada66}.hover\\:bg-white-500:hover\\/70{background-color:#dadadab3}.hover\\:bg-white-700:hover{background-color:#ccc}.hover\\:bg-black-50:hover{background-color:#aaa}.hover\\:bg-black-100:hover{background-color:#919191}.hover\\:bg-black-200:hover{background-color:#6c6c6c}.hover\\:bg-black-300:hover{background-color:#424242}.hover\\:bg-black-500:hover{background-color:#2f2f2f}.hover\\:bg-black-500:hover\\/20{background-color:#2f2f2f33}.hover\\:bg-black-500:hover\\/40{background-color:#2f2f2f66}.hover\\:bg-black-500:hover\\/70{background-color:#2f2f2fb3}.hover\\:bg-black-700:hover{background-color:#1d1d1d}.hover\\:bg-blue-50:hover{background-color:#e9effd}.hover\\:bg-blue-100:hover{background-color:#bed0f9}.hover\\:bg-blue-200:hover{background-color:#92b1f5}.hover\\:bg-blue-300:hover{background-color:#6692f1}.hover\\:bg-blue-500:hover{background-color:#3b73ed}.hover\\:bg-blue-500:hover\\/20{background-color:#3b73ed33}.hover\\:bg-blue-500:hover\\/40{background-color:#3b73ed66}.hover\\:bg-blue-500:hover\\/70{background-color:#3b73edb3}.hover\\:bg-blue-700:hover{background-color:#0b49d1}.hover\\:bg-blue-900:hover{background-color:#00179e}.hover\\:bg-red-50:hover{background-color:#fbe9e9}.hover\\:bg-red-100:hover{background-color:#f4bebe}.hover\\:bg-red-200:hover{background-color:#ed9292}.hover\\:bg-red-300:hover{background-color:#e66767}.hover\\:bg-red-500:hover{background-color:#df3c3c}.hover\\:bg-red-500:hover\\/20{background-color:#df3c3c33}.hover\\:bg-red-500:hover\\/40{background-color:#df3c3c66}.hover\\:bg-red-500:hover\\/70{background-color:#df3c3cb3}.hover\\:bg-red-700:hover{background-color:#c20c0c}.hover\\:bg-green-50:hover{background-color:#e7f4f3}.hover\\:bg-green-100:hover{background-color:#b6dfdb}.hover\\:bg-green-200:hover{background-color:#86c9c3}.hover\\:bg-green-300:hover{background-color:#56b4ac}.hover\\:bg-green-500:hover{background-color:#259f94}.hover\\:bg-green-500:hover\\/20{background-color:#259f9433}.hover\\:bg-green-500:hover\\/40{background-color:#259f9466}.hover\\:bg-green-500:hover\\/70{background-color:#259f94b3}.hover\\:bg-green-700:hover{background-color:#007a6e}.hover\\:bg-yellow-50:hover{background-color:#fef4e8}.hover\\:bg-yellow-100:hover{background-color:#fddeb9}.hover\\:bg-yellow-200:hover{background-color:#fbc88b}.hover\\:bg-yellow-300:hover{background-color:#fab15c}.hover\\:bg-yellow-500:hover{background-color:#f89b2e}.hover\\:bg-yellow-500:hover\\/20{background-color:#f89b2e33}.hover\\:bg-yellow-500:hover\\/40{background-color:#f89b2e66}.hover\\:bg-yellow-500:hover\\/70{background-color:#f89b2eb3}.hover\\:bg-yellow-700:hover{background-color:#de7700}.hover\\:bg-purple-50:hover{background-color:#f4ebfd}.hover\\:bg-purple-100:hover{background-color:#dfc2f9}.hover\\:bg-purple-200:hover{background-color:#c999f4}.hover\\:bg-purple-300:hover{background-color:#b370f0}.hover\\:bg-purple-500:hover{background-color:#9e47ec}.hover\\:bg-purple-500:hover\\/20{background-color:#9e47ec33}.hover\\:bg-purple-500:hover\\/40{background-color:#9e47ec66}.hover\\:bg-purple-500:hover\\/70{background-color:#9e47ecb3}.hover\\:bg-purple-700:hover{background-color:#7919d0}.hover\\:bg-orange-50:hover{background-color:#ffefea}.hover\\:bg-orange-100:hover{background-color:#ffcfc0}.hover\\:bg-orange-200:hover{background-color:#ffb097}.hover\\:bg-orange-300:hover{background-color:#ff906d}.hover\\:bg-orange-500:hover{background-color:#ff7043}.hover\\:bg-orange-500:hover\\/20{background-color:#ff704333}.hover\\:bg-orange-500:hover\\/40{background-color:#ff704366}.hover\\:bg-orange-500:hover\\/70{background-color:#ff7043b3}.hover\\:bg-orange-700:hover{background-color:#e54715}.hover\\:bg-azure-50:hover{background-color:#e5f7fc}.hover\\:bg-azure-100:hover{background-color:#b2e6f7}.hover\\:bg-azure-200:hover{background-color:#80d6f1}.hover\\:bg-azure-300:hover{background-color:#4dc5eb}.hover\\:bg-azure-500:hover{background-color:#1ab5e6}.hover\\:bg-azure-500:hover\\/20{background-color:#1ab5e633}.hover\\:bg-azure-500:hover\\/40{background-color:#1ab5e666}.hover\\:bg-azure-500:hover\\/70{background-color:#1ab5e6b3}.hover\\:bg-azure-700:hover{background-color:#0093c9}.hover\\:bg-gold-50:hover{background-color:#faf3e6}.hover\\:bg-gold-100:hover{background-color:#efdcb4}.hover\\:bg-gold-200:hover{background-color:#e4c481}.hover\\:bg-gold-300:hover{background-color:#daad4f}.hover\\:bg-gold-500:hover{background-color:#cf961d}.hover\\:bg-gold-500:hover\\/20{background-color:#cf961d33}.hover\\:bg-gold-500:hover\\/40{background-color:#cf961d66}.hover\\:bg-gold-500:hover\\/70{background-color:#cf961db3}.hover\\:bg-gold-700:hover{background-color:#b07000}.hover\\:bg-brown-50:hover{background-color:#f1ede9}.hover\\:bg-brown-100:hover{background-color:#d6c9bd}.hover\\:bg-brown-200:hover{background-color:#bca691}.hover\\:bg-brown-300:hover{background-color:#a08266}.hover\\:bg-brown-500:hover{background-color:#865e3a}.hover\\:bg-brown-500:hover\\/20{background-color:#865e3a33}.hover\\:bg-brown-500:hover\\/40{background-color:#865e3a66}.hover\\:bg-brown-500:hover\\/70{background-color:#865e3ab3}.hover\\:bg-brown-700:hover{background-color:#5f330a}.hover\\:bg-navy-50:hover{background-color:#e7e7fa}.hover\\:bg-navy-100:hover{background-color:#b7b6f1}.hover\\:bg-navy-200:hover{background-color:#8785e8}.hover\\:bg-navy-300:hover{background-color:#5755df}.hover\\:bg-navy-500:hover{background-color:#2724d6}.hover\\:bg-navy-500:hover\\/20{background-color:#2724d633}.hover\\:bg-navy-500:hover\\/40{background-color:#2724d666}.hover\\:bg-navy-500:hover\\/70{background-color:#2724d6b3}.hover\\:bg-navy-700:hover{background-color:#0000b8}.hover\\:bg-lime-50:hover{background-color:#ecf6e7}.hover\\:bg-lime-100:hover{background-color:#c5e3b6}.hover\\:bg-lime-200:hover{background-color:#9ed186}.hover\\:bg-lime-300:hover{background-color:#77bf56}.hover\\:bg-lime-500:hover{background-color:#50ac25}.hover\\:bg-lime-500:hover\\/20{background-color:#50ac2533}.hover\\:bg-lime-500:hover\\/40{background-color:#50ac2566}.hover\\:bg-lime-500:hover\\/70{background-color:#50ac25b3}.hover\\:bg-lime-700:hover{background-color:#238900}.hover\\:bg-magenta-50:hover{background-color:#fbe9f1}.hover\\:bg-magenta-100:hover{background-color:#f4bed6}.hover\\:bg-magenta-200:hover{background-color:#ed93bb}.hover\\:bg-magenta-300:hover{background-color:#e668a0}.hover\\:bg-magenta-500:hover{background-color:#df3d85}.hover\\:bg-magenta-500:hover\\/20{background-color:#df3d8533}.hover\\:bg-magenta-500:hover\\/40{background-color:#df3d8566}.hover\\:bg-magenta-500:hover\\/70{background-color:#df3d85b3}.hover\\:bg-magenta-700:hover{background-color:#c10d5d}.focus\\:text-white-50:focus-visible{color:#fff}.focus\\:text-white-100:focus-visible{color:#f7f7f7}.focus\\:text-white-200:focus-visible{color:#eee}.focus\\:text-white-300:focus-visible{color:#e5e5e5}.focus\\:text-white-500:focus-visible{color:#dadada}.focus\\:text-white-500:focus-visible\\/20{color:#dadada33}.focus\\:text-white-500:focus-visible\\/40{color:#dadada66}.focus\\:text-white-500:focus-visible\\/70{color:#dadadab3}.focus\\:text-white-700:focus-visible{color:#ccc}.focus\\:text-black-50:focus-visible{color:#aaa}.focus\\:text-black-100:focus-visible{color:#919191}.focus\\:text-black-200:focus-visible{color:#6c6c6c}.focus\\:text-black-300:focus-visible{color:#424242}.focus\\:text-black-500:focus-visible{color:#2f2f2f}.focus\\:text-black-500:focus-visible\\/20{color:#2f2f2f33}.focus\\:text-black-500:focus-visible\\/40{color:#2f2f2f66}.focus\\:text-black-500:focus-visible\\/70{color:#2f2f2fb3}.focus\\:text-black-700:focus-visible{color:#1d1d1d}.focus\\:text-blue-50:focus-visible{color:#e9effd}.focus\\:text-blue-100:focus-visible{color:#bed0f9}.focus\\:text-blue-200:focus-visible{color:#92b1f5}.focus\\:text-blue-300:focus-visible{color:#6692f1}.focus\\:text-blue-500:focus-visible{color:#3b73ed}.focus\\:text-blue-500:focus-visible\\/20{color:#3b73ed33}.focus\\:text-blue-500:focus-visible\\/40{color:#3b73ed66}.focus\\:text-blue-500:focus-visible\\/70{color:#3b73edb3}.focus\\:text-blue-700:focus-visible{color:#0b49d1}.focus\\:text-blue-900:focus-visible{color:#00179e}.focus\\:text-red-50:focus-visible{color:#fbe9e9}.focus\\:text-red-100:focus-visible{color:#f4bebe}.focus\\:text-red-200:focus-visible{color:#ed9292}.focus\\:text-red-300:focus-visible{color:#e66767}.focus\\:text-red-500:focus-visible{color:#df3c3c}.focus\\:text-red-500:focus-visible\\/20{color:#df3c3c33}.focus\\:text-red-500:focus-visible\\/40{color:#df3c3c66}.focus\\:text-red-500:focus-visible\\/70{color:#df3c3cb3}.focus\\:text-red-700:focus-visible{color:#c20c0c}.focus\\:text-green-50:focus-visible{color:#e7f4f3}.focus\\:text-green-100:focus-visible{color:#b6dfdb}.focus\\:text-green-200:focus-visible{color:#86c9c3}.focus\\:text-green-300:focus-visible{color:#56b4ac}.focus\\:text-green-500:focus-visible{color:#259f94}.focus\\:text-green-500:focus-visible\\/20{color:#259f9433}.focus\\:text-green-500:focus-visible\\/40{color:#259f9466}.focus\\:text-green-500:focus-visible\\/70{color:#259f94b3}.focus\\:text-green-700:focus-visible{color:#007a6e}.focus\\:text-yellow-50:focus-visible{color:#fef4e8}.focus\\:text-yellow-100:focus-visible{color:#fddeb9}.focus\\:text-yellow-200:focus-visible{color:#fbc88b}.focus\\:text-yellow-300:focus-visible{color:#fab15c}.focus\\:text-yellow-500:focus-visible{color:#f89b2e}.focus\\:text-yellow-500:focus-visible\\/20{color:#f89b2e33}.focus\\:text-yellow-500:focus-visible\\/40{color:#f89b2e66}.focus\\:text-yellow-500:focus-visible\\/70{color:#f89b2eb3}.focus\\:text-yellow-700:focus-visible{color:#de7700}.focus\\:text-purple-50:focus-visible{color:#f4ebfd}.focus\\:text-purple-100:focus-visible{color:#dfc2f9}.focus\\:text-purple-200:focus-visible{color:#c999f4}.focus\\:text-purple-300:focus-visible{color:#b370f0}.focus\\:text-purple-500:focus-visible{color:#9e47ec}.focus\\:text-purple-500:focus-visible\\/20{color:#9e47ec33}.focus\\:text-purple-500:focus-visible\\/40{color:#9e47ec66}.focus\\:text-purple-500:focus-visible\\/70{color:#9e47ecb3}.focus\\:text-purple-700:focus-visible{color:#7919d0}.focus\\:text-orange-50:focus-visible{color:#ffefea}.focus\\:text-orange-100:focus-visible{color:#ffcfc0}.focus\\:text-orange-200:focus-visible{color:#ffb097}.focus\\:text-orange-300:focus-visible{color:#ff906d}.focus\\:text-orange-500:focus-visible{color:#ff7043}.focus\\:text-orange-500:focus-visible\\/20{color:#ff704333}.focus\\:text-orange-500:focus-visible\\/40{color:#ff704366}.focus\\:text-orange-500:focus-visible\\/70{color:#ff7043b3}.focus\\:text-orange-700:focus-visible{color:#e54715}.focus\\:text-azure-50:focus-visible{color:#e5f7fc}.focus\\:text-azure-100:focus-visible{color:#b2e6f7}.focus\\:text-azure-200:focus-visible{color:#80d6f1}.focus\\:text-azure-300:focus-visible{color:#4dc5eb}.focus\\:text-azure-500:focus-visible{color:#1ab5e6}.focus\\:text-azure-500:focus-visible\\/20{color:#1ab5e633}.focus\\:text-azure-500:focus-visible\\/40{color:#1ab5e666}.focus\\:text-azure-500:focus-visible\\/70{color:#1ab5e6b3}.focus\\:text-azure-700:focus-visible{color:#0093c9}.focus\\:text-gold-50:focus-visible{color:#faf3e6}.focus\\:text-gold-100:focus-visible{color:#efdcb4}.focus\\:text-gold-200:focus-visible{color:#e4c481}.focus\\:text-gold-300:focus-visible{color:#daad4f}.focus\\:text-gold-500:focus-visible{color:#cf961d}.focus\\:text-gold-500:focus-visible\\/20{color:#cf961d33}.focus\\:text-gold-500:focus-visible\\/40{color:#cf961d66}.focus\\:text-gold-500:focus-visible\\/70{color:#cf961db3}.focus\\:text-gold-700:focus-visible{color:#b07000}.focus\\:text-brown-50:focus-visible{color:#f1ede9}.focus\\:text-brown-100:focus-visible{color:#d6c9bd}.focus\\:text-brown-200:focus-visible{color:#bca691}.focus\\:text-brown-300:focus-visible{color:#a08266}.focus\\:text-brown-500:focus-visible{color:#865e3a}.focus\\:text-brown-500:focus-visible\\/20{color:#865e3a33}.focus\\:text-brown-500:focus-visible\\/40{color:#865e3a66}.focus\\:text-brown-500:focus-visible\\/70{color:#865e3ab3}.focus\\:text-brown-700:focus-visible{color:#5f330a}.focus\\:text-navy-50:focus-visible{color:#e7e7fa}.focus\\:text-navy-100:focus-visible{color:#b7b6f1}.focus\\:text-navy-200:focus-visible{color:#8785e8}.focus\\:text-navy-300:focus-visible{color:#5755df}.focus\\:text-navy-500:focus-visible{color:#2724d6}.focus\\:text-navy-500:focus-visible\\/20{color:#2724d633}.focus\\:text-navy-500:focus-visible\\/40{color:#2724d666}.focus\\:text-navy-500:focus-visible\\/70{color:#2724d6b3}.focus\\:text-navy-700:focus-visible{color:#0000b8}.focus\\:text-lime-50:focus-visible{color:#ecf6e7}.focus\\:text-lime-100:focus-visible{color:#c5e3b6}.focus\\:text-lime-200:focus-visible{color:#9ed186}.focus\\:text-lime-300:focus-visible{color:#77bf56}.focus\\:text-lime-500:focus-visible{color:#50ac25}.focus\\:text-lime-500:focus-visible\\/20{color:#50ac2533}.focus\\:text-lime-500:focus-visible\\/40{color:#50ac2566}.focus\\:text-lime-500:focus-visible\\/70{color:#50ac25b3}.focus\\:text-lime-700:focus-visible{color:#238900}.focus\\:text-magenta-50:focus-visible{color:#fbe9f1}.focus\\:text-magenta-100:focus-visible{color:#f4bed6}.focus\\:text-magenta-200:focus-visible{color:#ed93bb}.focus\\:text-magenta-300:focus-visible{color:#e668a0}.focus\\:text-magenta-500:focus-visible{color:#df3d85}.focus\\:text-magenta-500:focus-visible\\/20{color:#df3d8533}.focus\\:text-magenta-500:focus-visible\\/40{color:#df3d8566}.focus\\:text-magenta-500:focus-visible\\/70{color:#df3d85b3}.focus\\:text-magenta-700:focus-visible{color:#c10d5d}.focus\\:bg-white-50:focus-visible{background-color:#fff}.focus\\:bg-white-100:focus-visible{background-color:#f7f7f7}.focus\\:bg-white-200:focus-visible{background-color:#eee}.focus\\:bg-white-300:focus-visible{background-color:#e5e5e5}.focus\\:bg-white-500:focus-visible{background-color:#dadada}.focus\\:bg-white-500:focus-visible\\/20{background-color:#dadada33}.focus\\:bg-white-500:focus-visible\\/40{background-color:#dadada66}.focus\\:bg-white-500:focus-visible\\/70{background-color:#dadadab3}.focus\\:bg-white-700:focus-visible{background-color:#ccc}.focus\\:bg-black-50:focus-visible{background-color:#aaa}.focus\\:bg-black-100:focus-visible{background-color:#919191}.focus\\:bg-black-200:focus-visible{background-color:#6c6c6c}.focus\\:bg-black-300:focus-visible{background-color:#424242}.focus\\:bg-black-500:focus-visible{background-color:#2f2f2f}.focus\\:bg-black-500:focus-visible\\/20{background-color:#2f2f2f33}.focus\\:bg-black-500:focus-visible\\/40{background-color:#2f2f2f66}.focus\\:bg-black-500:focus-visible\\/70{background-color:#2f2f2fb3}.focus\\:bg-black-700:focus-visible{background-color:#1d1d1d}.focus\\:bg-blue-50:focus-visible{background-color:#e9effd}.focus\\:bg-blue-100:focus-visible{background-color:#bed0f9}.focus\\:bg-blue-200:focus-visible{background-color:#92b1f5}.focus\\:bg-blue-300:focus-visible{background-color:#6692f1}.focus\\:bg-blue-500:focus-visible{background-color:#3b73ed}.focus\\:bg-blue-500:focus-visible\\/20{background-color:#3b73ed33}.focus\\:bg-blue-500:focus-visible\\/40{background-color:#3b73ed66}.focus\\:bg-blue-500:focus-visible\\/70{background-color:#3b73edb3}.focus\\:bg-blue-700:focus-visible{background-color:#0b49d1}.focus\\:bg-blue-900:focus-visible{background-color:#00179e}.focus\\:bg-red-50:focus-visible{background-color:#fbe9e9}.focus\\:bg-red-100:focus-visible{background-color:#f4bebe}.focus\\:bg-red-200:focus-visible{background-color:#ed9292}.focus\\:bg-red-300:focus-visible{background-color:#e66767}.focus\\:bg-red-500:focus-visible{background-color:#df3c3c}.focus\\:bg-red-500:focus-visible\\/20{background-color:#df3c3c33}.focus\\:bg-red-500:focus-visible\\/40{background-color:#df3c3c66}.focus\\:bg-red-500:focus-visible\\/70{background-color:#df3c3cb3}.focus\\:bg-red-700:focus-visible{background-color:#c20c0c}.focus\\:bg-green-50:focus-visible{background-color:#e7f4f3}.focus\\:bg-green-100:focus-visible{background-color:#b6dfdb}.focus\\:bg-green-200:focus-visible{background-color:#86c9c3}.focus\\:bg-green-300:focus-visible{background-color:#56b4ac}.focus\\:bg-green-500:focus-visible{background-color:#259f94}.focus\\:bg-green-500:focus-visible\\/20{background-color:#259f9433}.focus\\:bg-green-500:focus-visible\\/40{background-color:#259f9466}.focus\\:bg-green-500:focus-visible\\/70{background-color:#259f94b3}.focus\\:bg-green-700:focus-visible{background-color:#007a6e}.focus\\:bg-yellow-50:focus-visible{background-color:#fef4e8}.focus\\:bg-yellow-100:focus-visible{background-color:#fddeb9}.focus\\:bg-yellow-200:focus-visible{background-color:#fbc88b}.focus\\:bg-yellow-300:focus-visible{background-color:#fab15c}.focus\\:bg-yellow-500:focus-visible{background-color:#f89b2e}.focus\\:bg-yellow-500:focus-visible\\/20{background-color:#f89b2e33}.focus\\:bg-yellow-500:focus-visible\\/40{background-color:#f89b2e66}.focus\\:bg-yellow-500:focus-visible\\/70{background-color:#f89b2eb3}.focus\\:bg-yellow-700:focus-visible{background-color:#de7700}.focus\\:bg-purple-50:focus-visible{background-color:#f4ebfd}.focus\\:bg-purple-100:focus-visible{background-color:#dfc2f9}.focus\\:bg-purple-200:focus-visible{background-color:#c999f4}.focus\\:bg-purple-300:focus-visible{background-color:#b370f0}.focus\\:bg-purple-500:focus-visible{background-color:#9e47ec}.focus\\:bg-purple-500:focus-visible\\/20{background-color:#9e47ec33}.focus\\:bg-purple-500:focus-visible\\/40{background-color:#9e47ec66}.focus\\:bg-purple-500:focus-visible\\/70{background-color:#9e47ecb3}.focus\\:bg-purple-700:focus-visible{background-color:#7919d0}.focus\\:bg-orange-50:focus-visible{background-color:#ffefea}.focus\\:bg-orange-100:focus-visible{background-color:#ffcfc0}.focus\\:bg-orange-200:focus-visible{background-color:#ffb097}.focus\\:bg-orange-300:focus-visible{background-color:#ff906d}.focus\\:bg-orange-500:focus-visible{background-color:#ff7043}.focus\\:bg-orange-500:focus-visible\\/20{background-color:#ff704333}.focus\\:bg-orange-500:focus-visible\\/40{background-color:#ff704366}.focus\\:bg-orange-500:focus-visible\\/70{background-color:#ff7043b3}.focus\\:bg-orange-700:focus-visible{background-color:#e54715}.focus\\:bg-azure-50:focus-visible{background-color:#e5f7fc}.focus\\:bg-azure-100:focus-visible{background-color:#b2e6f7}.focus\\:bg-azure-200:focus-visible{background-color:#80d6f1}.focus\\:bg-azure-300:focus-visible{background-color:#4dc5eb}.focus\\:bg-azure-500:focus-visible{background-color:#1ab5e6}.focus\\:bg-azure-500:focus-visible\\/20{background-color:#1ab5e633}.focus\\:bg-azure-500:focus-visible\\/40{background-color:#1ab5e666}.focus\\:bg-azure-500:focus-visible\\/70{background-color:#1ab5e6b3}.focus\\:bg-azure-700:focus-visible{background-color:#0093c9}.focus\\:bg-gold-50:focus-visible{background-color:#faf3e6}.focus\\:bg-gold-100:focus-visible{background-color:#efdcb4}.focus\\:bg-gold-200:focus-visible{background-color:#e4c481}.focus\\:bg-gold-300:focus-visible{background-color:#daad4f}.focus\\:bg-gold-500:focus-visible{background-color:#cf961d}.focus\\:bg-gold-500:focus-visible\\/20{background-color:#cf961d33}.focus\\:bg-gold-500:focus-visible\\/40{background-color:#cf961d66}.focus\\:bg-gold-500:focus-visible\\/70{background-color:#cf961db3}.focus\\:bg-gold-700:focus-visible{background-color:#b07000}.focus\\:bg-brown-50:focus-visible{background-color:#f1ede9}.focus\\:bg-brown-100:focus-visible{background-color:#d6c9bd}.focus\\:bg-brown-200:focus-visible{background-color:#bca691}.focus\\:bg-brown-300:focus-visible{background-color:#a08266}.focus\\:bg-brown-500:focus-visible{background-color:#865e3a}.focus\\:bg-brown-500:focus-visible\\/20{background-color:#865e3a33}.focus\\:bg-brown-500:focus-visible\\/40{background-color:#865e3a66}.focus\\:bg-brown-500:focus-visible\\/70{background-color:#865e3ab3}.focus\\:bg-brown-700:focus-visible{background-color:#5f330a}.focus\\:bg-navy-50:focus-visible{background-color:#e7e7fa}.focus\\:bg-navy-100:focus-visible{background-color:#b7b6f1}.focus\\:bg-navy-200:focus-visible{background-color:#8785e8}.focus\\:bg-navy-300:focus-visible{background-color:#5755df}.focus\\:bg-navy-500:focus-visible{background-color:#2724d6}.focus\\:bg-navy-500:focus-visible\\/20{background-color:#2724d633}.focus\\:bg-navy-500:focus-visible\\/40{background-color:#2724d666}.focus\\:bg-navy-500:focus-visible\\/70{background-color:#2724d6b3}.focus\\:bg-navy-700:focus-visible{background-color:#0000b8}.focus\\:bg-lime-50:focus-visible{background-color:#ecf6e7}.focus\\:bg-lime-100:focus-visible{background-color:#c5e3b6}.focus\\:bg-lime-200:focus-visible{background-color:#9ed186}.focus\\:bg-lime-300:focus-visible{background-color:#77bf56}.focus\\:bg-lime-500:focus-visible{background-color:#50ac25}.focus\\:bg-lime-500:focus-visible\\/20{background-color:#50ac2533}.focus\\:bg-lime-500:focus-visible\\/40{background-color:#50ac2566}.focus\\:bg-lime-500:focus-visible\\/70{background-color:#50ac25b3}.focus\\:bg-lime-700:focus-visible{background-color:#238900}.focus\\:bg-magenta-50:focus-visible{background-color:#fbe9f1}.focus\\:bg-magenta-100:focus-visible{background-color:#f4bed6}.focus\\:bg-magenta-200:focus-visible{background-color:#ed93bb}.focus\\:bg-magenta-300:focus-visible{background-color:#e668a0}.focus\\:bg-magenta-500:focus-visible{background-color:#df3d85}.focus\\:bg-magenta-500:focus-visible\\/20{background-color:#df3d8533}.focus\\:bg-magenta-500:focus-visible\\/40{background-color:#df3d8566}.focus\\:bg-magenta-500:focus-visible\\/70{background-color:#df3d85b3}.focus\\:bg-magenta-700:focus-visible{background-color:#c10d5d}.active\\:text-white-50:active{color:#fff}.active\\:text-white-100:active{color:#f7f7f7}.active\\:text-white-200:active{color:#eee}.active\\:text-white-300:active{color:#e5e5e5}.active\\:text-white-500:active{color:#dadada}.active\\:text-white-500:active\\/20{color:#dadada33}.active\\:text-white-500:active\\/40{color:#dadada66}.active\\:text-white-500:active\\/70{color:#dadadab3}.active\\:text-white-700:active{color:#ccc}.active\\:text-black-50:active{color:#aaa}.active\\:text-black-100:active{color:#919191}.active\\:text-black-200:active{color:#6c6c6c}.active\\:text-black-300:active{color:#424242}.active\\:text-black-500:active{color:#2f2f2f}.active\\:text-black-500:active\\/20{color:#2f2f2f33}.active\\:text-black-500:active\\/40{color:#2f2f2f66}.active\\:text-black-500:active\\/70{color:#2f2f2fb3}.active\\:text-black-700:active{color:#1d1d1d}.active\\:text-blue-50:active{color:#e9effd}.active\\:text-blue-100:active{color:#bed0f9}.active\\:text-blue-200:active{color:#92b1f5}.active\\:text-blue-300:active{color:#6692f1}.active\\:text-blue-500:active{color:#3b73ed}.active\\:text-blue-500:active\\/20{color:#3b73ed33}.active\\:text-blue-500:active\\/40{color:#3b73ed66}.active\\:text-blue-500:active\\/70{color:#3b73edb3}.active\\:text-blue-700:active{color:#0b49d1}.active\\:text-blue-900:active{color:#00179e}.active\\:text-red-50:active{color:#fbe9e9}.active\\:text-red-100:active{color:#f4bebe}.active\\:text-red-200:active{color:#ed9292}.active\\:text-red-300:active{color:#e66767}.active\\:text-red-500:active{color:#df3c3c}.active\\:text-red-500:active\\/20{color:#df3c3c33}.active\\:text-red-500:active\\/40{color:#df3c3c66}.active\\:text-red-500:active\\/70{color:#df3c3cb3}.active\\:text-red-700:active{color:#c20c0c}.active\\:text-green-50:active{color:#e7f4f3}.active\\:text-green-100:active{color:#b6dfdb}.active\\:text-green-200:active{color:#86c9c3}.active\\:text-green-300:active{color:#56b4ac}.active\\:text-green-500:active{color:#259f94}.active\\:text-green-500:active\\/20{color:#259f9433}.active\\:text-green-500:active\\/40{color:#259f9466}.active\\:text-green-500:active\\/70{color:#259f94b3}.active\\:text-green-700:active{color:#007a6e}.active\\:text-yellow-50:active{color:#fef4e8}.active\\:text-yellow-100:active{color:#fddeb9}.active\\:text-yellow-200:active{color:#fbc88b}.active\\:text-yellow-300:active{color:#fab15c}.active\\:text-yellow-500:active{color:#f89b2e}.active\\:text-yellow-500:active\\/20{color:#f89b2e33}.active\\:text-yellow-500:active\\/40{color:#f89b2e66}.active\\:text-yellow-500:active\\/70{color:#f89b2eb3}.active\\:text-yellow-700:active{color:#de7700}.active\\:text-purple-50:active{color:#f4ebfd}.active\\:text-purple-100:active{color:#dfc2f9}.active\\:text-purple-200:active{color:#c999f4}.active\\:text-purple-300:active{color:#b370f0}.active\\:text-purple-500:active{color:#9e47ec}.active\\:text-purple-500:active\\/20{color:#9e47ec33}.active\\:text-purple-500:active\\/40{color:#9e47ec66}.active\\:text-purple-500:active\\/70{color:#9e47ecb3}.active\\:text-purple-700:active{color:#7919d0}.active\\:text-orange-50:active{color:#ffefea}.active\\:text-orange-100:active{color:#ffcfc0}.active\\:text-orange-200:active{color:#ffb097}.active\\:text-orange-300:active{color:#ff906d}.active\\:text-orange-500:active{color:#ff7043}.active\\:text-orange-500:active\\/20{color:#ff704333}.active\\:text-orange-500:active\\/40{color:#ff704366}.active\\:text-orange-500:active\\/70{color:#ff7043b3}.active\\:text-orange-700:active{color:#e54715}.active\\:text-azure-50:active{color:#e5f7fc}.active\\:text-azure-100:active{color:#b2e6f7}.active\\:text-azure-200:active{color:#80d6f1}.active\\:text-azure-300:active{color:#4dc5eb}.active\\:text-azure-500:active{color:#1ab5e6}.active\\:text-azure-500:active\\/20{color:#1ab5e633}.active\\:text-azure-500:active\\/40{color:#1ab5e666}.active\\:text-azure-500:active\\/70{color:#1ab5e6b3}.active\\:text-azure-700:active{color:#0093c9}.active\\:text-gold-50:active{color:#faf3e6}.active\\:text-gold-100:active{color:#efdcb4}.active\\:text-gold-200:active{color:#e4c481}.active\\:text-gold-300:active{color:#daad4f}.active\\:text-gold-500:active{color:#cf961d}.active\\:text-gold-500:active\\/20{color:#cf961d33}.active\\:text-gold-500:active\\/40{color:#cf961d66}.active\\:text-gold-500:active\\/70{color:#cf961db3}.active\\:text-gold-700:active{color:#b07000}.active\\:text-brown-50:active{color:#f1ede9}.active\\:text-brown-100:active{color:#d6c9bd}.active\\:text-brown-200:active{color:#bca691}.active\\:text-brown-300:active{color:#a08266}.active\\:text-brown-500:active{color:#865e3a}.active\\:text-brown-500:active\\/20{color:#865e3a33}.active\\:text-brown-500:active\\/40{color:#865e3a66}.active\\:text-brown-500:active\\/70{color:#865e3ab3}.active\\:text-brown-700:active{color:#5f330a}.active\\:text-navy-50:active{color:#e7e7fa}.active\\:text-navy-100:active{color:#b7b6f1}.active\\:text-navy-200:active{color:#8785e8}.active\\:text-navy-300:active{color:#5755df}.active\\:text-navy-500:active{color:#2724d6}.active\\:text-navy-500:active\\/20{color:#2724d633}.active\\:text-navy-500:active\\/40{color:#2724d666}.active\\:text-navy-500:active\\/70{color:#2724d6b3}.active\\:text-navy-700:active{color:#0000b8}.active\\:text-lime-50:active{color:#ecf6e7}.active\\:text-lime-100:active{color:#c5e3b6}.active\\:text-lime-200:active{color:#9ed186}.active\\:text-lime-300:active{color:#77bf56}.active\\:text-lime-500:active{color:#50ac25}.active\\:text-lime-500:active\\/20{color:#50ac2533}.active\\:text-lime-500:active\\/40{color:#50ac2566}.active\\:text-lime-500:active\\/70{color:#50ac25b3}.active\\:text-lime-700:active{color:#238900}.active\\:text-magenta-50:active{color:#fbe9f1}.active\\:text-magenta-100:active{color:#f4bed6}.active\\:text-magenta-200:active{color:#ed93bb}.active\\:text-magenta-300:active{color:#e668a0}.active\\:text-magenta-500:active{color:#df3d85}.active\\:text-magenta-500:active\\/20{color:#df3d8533}.active\\:text-magenta-500:active\\/40{color:#df3d8566}.active\\:text-magenta-500:active\\/70{color:#df3d85b3}.active\\:text-magenta-700:active{color:#c10d5d}.active\\:bg-white-50:active{background-color:#fff}.active\\:bg-white-100:active{background-color:#f7f7f7}.active\\:bg-white-200:active{background-color:#eee}.active\\:bg-white-300:active{background-color:#e5e5e5}.active\\:bg-white-500:active{background-color:#dadada}.active\\:bg-white-500:active\\/20{background-color:#dadada33}.active\\:bg-white-500:active\\/40{background-color:#dadada66}.active\\:bg-white-500:active\\/70{background-color:#dadadab3}.active\\:bg-white-700:active{background-color:#ccc}.active\\:bg-black-50:active{background-color:#aaa}.active\\:bg-black-100:active{background-color:#919191}.active\\:bg-black-200:active{background-color:#6c6c6c}.active\\:bg-black-300:active{background-color:#424242}.active\\:bg-black-500:active{background-color:#2f2f2f}.active\\:bg-black-500:active\\/20{background-color:#2f2f2f33}.active\\:bg-black-500:active\\/40{background-color:#2f2f2f66}.active\\:bg-black-500:active\\/70{background-color:#2f2f2fb3}.active\\:bg-black-700:active{background-color:#1d1d1d}.active\\:bg-blue-50:active{background-color:#e9effd}.active\\:bg-blue-100:active{background-color:#bed0f9}.active\\:bg-blue-200:active{background-color:#92b1f5}.active\\:bg-blue-300:active{background-color:#6692f1}.active\\:bg-blue-500:active{background-color:#3b73ed}.active\\:bg-blue-500:active\\/20{background-color:#3b73ed33}.active\\:bg-blue-500:active\\/40{background-color:#3b73ed66}.active\\:bg-blue-500:active\\/70{background-color:#3b73edb3}.active\\:bg-blue-700:active{background-color:#0b49d1}.active\\:bg-blue-900:active{background-color:#00179e}.active\\:bg-red-50:active{background-color:#fbe9e9}.active\\:bg-red-100:active{background-color:#f4bebe}.active\\:bg-red-200:active{background-color:#ed9292}.active\\:bg-red-300:active{background-color:#e66767}.active\\:bg-red-500:active{background-color:#df3c3c}.active\\:bg-red-500:active\\/20{background-color:#df3c3c33}.active\\:bg-red-500:active\\/40{background-color:#df3c3c66}.active\\:bg-red-500:active\\/70{background-color:#df3c3cb3}.active\\:bg-red-700:active{background-color:#c20c0c}.active\\:bg-green-50:active{background-color:#e7f4f3}.active\\:bg-green-100:active{background-color:#b6dfdb}.active\\:bg-green-200:active{background-color:#86c9c3}.active\\:bg-green-300:active{background-color:#56b4ac}.active\\:bg-green-500:active{background-color:#259f94}.active\\:bg-green-500:active\\/20{background-color:#259f9433}.active\\:bg-green-500:active\\/40{background-color:#259f9466}.active\\:bg-green-500:active\\/70{background-color:#259f94b3}.active\\:bg-green-700:active{background-color:#007a6e}.active\\:bg-yellow-50:active{background-color:#fef4e8}.active\\:bg-yellow-100:active{background-color:#fddeb9}.active\\:bg-yellow-200:active{background-color:#fbc88b}.active\\:bg-yellow-300:active{background-color:#fab15c}.active\\:bg-yellow-500:active{background-color:#f89b2e}.active\\:bg-yellow-500:active\\/20{background-color:#f89b2e33}.active\\:bg-yellow-500:active\\/40{background-color:#f89b2e66}.active\\:bg-yellow-500:active\\/70{background-color:#f89b2eb3}.active\\:bg-yellow-700:active{background-color:#de7700}.active\\:bg-purple-50:active{background-color:#f4ebfd}.active\\:bg-purple-100:active{background-color:#dfc2f9}.active\\:bg-purple-200:active{background-color:#c999f4}.active\\:bg-purple-300:active{background-color:#b370f0}.active\\:bg-purple-500:active{background-color:#9e47ec}.active\\:bg-purple-500:active\\/20{background-color:#9e47ec33}.active\\:bg-purple-500:active\\/40{background-color:#9e47ec66}.active\\:bg-purple-500:active\\/70{background-color:#9e47ecb3}.active\\:bg-purple-700:active{background-color:#7919d0}.active\\:bg-orange-50:active{background-color:#ffefea}.active\\:bg-orange-100:active{background-color:#ffcfc0}.active\\:bg-orange-200:active{background-color:#ffb097}.active\\:bg-orange-300:active{background-color:#ff906d}.active\\:bg-orange-500:active{background-color:#ff7043}.active\\:bg-orange-500:active\\/20{background-color:#ff704333}.active\\:bg-orange-500:active\\/40{background-color:#ff704366}.active\\:bg-orange-500:active\\/70{background-color:#ff7043b3}.active\\:bg-orange-700:active{background-color:#e54715}.active\\:bg-azure-50:active{background-color:#e5f7fc}.active\\:bg-azure-100:active{background-color:#b2e6f7}.active\\:bg-azure-200:active{background-color:#80d6f1}.active\\:bg-azure-300:active{background-color:#4dc5eb}.active\\:bg-azure-500:active{background-color:#1ab5e6}.active\\:bg-azure-500:active\\/20{background-color:#1ab5e633}.active\\:bg-azure-500:active\\/40{background-color:#1ab5e666}.active\\:bg-azure-500:active\\/70{background-color:#1ab5e6b3}.active\\:bg-azure-700:active{background-color:#0093c9}.active\\:bg-gold-50:active{background-color:#faf3e6}.active\\:bg-gold-100:active{background-color:#efdcb4}.active\\:bg-gold-200:active{background-color:#e4c481}.active\\:bg-gold-300:active{background-color:#daad4f}.active\\:bg-gold-500:active{background-color:#cf961d}.active\\:bg-gold-500:active\\/20{background-color:#cf961d33}.active\\:bg-gold-500:active\\/40{background-color:#cf961d66}.active\\:bg-gold-500:active\\/70{background-color:#cf961db3}.active\\:bg-gold-700:active{background-color:#b07000}.active\\:bg-brown-50:active{background-color:#f1ede9}.active\\:bg-brown-100:active{background-color:#d6c9bd}.active\\:bg-brown-200:active{background-color:#bca691}.active\\:bg-brown-300:active{background-color:#a08266}.active\\:bg-brown-500:active{background-color:#865e3a}.active\\:bg-brown-500:active\\/20{background-color:#865e3a33}.active\\:bg-brown-500:active\\/40{background-color:#865e3a66}.active\\:bg-brown-500:active\\/70{background-color:#865e3ab3}.active\\:bg-brown-700:active{background-color:#5f330a}.active\\:bg-navy-50:active{background-color:#e7e7fa}.active\\:bg-navy-100:active{background-color:#b7b6f1}.active\\:bg-navy-200:active{background-color:#8785e8}.active\\:bg-navy-300:active{background-color:#5755df}.active\\:bg-navy-500:active{background-color:#2724d6}.active\\:bg-navy-500:active\\/20{background-color:#2724d633}.active\\:bg-navy-500:active\\/40{background-color:#2724d666}.active\\:bg-navy-500:active\\/70{background-color:#2724d6b3}.active\\:bg-navy-700:active{background-color:#0000b8}.active\\:bg-lime-50:active{background-color:#ecf6e7}.active\\:bg-lime-100:active{background-color:#c5e3b6}.active\\:bg-lime-200:active{background-color:#9ed186}.active\\:bg-lime-300:active{background-color:#77bf56}.active\\:bg-lime-500:active{background-color:#50ac25}.active\\:bg-lime-500:active\\/20{background-color:#50ac2533}.active\\:bg-lime-500:active\\/40{background-color:#50ac2566}.active\\:bg-lime-500:active\\/70{background-color:#50ac25b3}.active\\:bg-lime-700:active{background-color:#238900}.active\\:bg-magenta-50:active{background-color:#fbe9f1}.active\\:bg-magenta-100:active{background-color:#f4bed6}.active\\:bg-magenta-200:active{background-color:#ed93bb}.active\\:bg-magenta-300:active{background-color:#e668a0}.active\\:bg-magenta-500:active{background-color:#df3d85}.active\\:bg-magenta-500:active\\/20{background-color:#df3d8533}.active\\:bg-magenta-500:active\\/40{background-color:#df3d8566}.active\\:bg-magenta-500:active\\/70{background-color:#df3d85b3}.active\\:bg-magenta-700:active{background-color:#c10d5d}.transition{transition:all .2s ease-in-out}.disable-selection,.logo-container .logo-image,.cover-container .cover-image,.profile-rounded-image,.profile-square-image{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none}.drop-zone-container.has-logo{display:none}.largeContainer{position:relative;min-height:178px}.largeContainer .cropper-overlay{width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:1050;gap:4px;opacity:1;position:absolute}.largeContainer .cropper-overlay .img-cropper{height:178px!important}.largeContainer.hasCropper{min-height:212px;position:relative}.logo-container{position:absolute;top:0;left:0;width:616px;height:214px;overflow:hidden}.logo-container .logo-image{width:100%;height:100%;z-index:1000}.logoVar{height:214px}.logoVar.hasCropper{height:240px!important}.logoVar.hasCropper .drop-zone-container{display:none!important}.logoVar .drop-zone-container .drop-zone,.logoVar .drop-zone-container .drop-zone-error{height:204px}.logoVar .cropper-overlay{height:240px!important}.logoVar .cropper-overlay .img-cropper{height:206px!important}.cover-container{width:267px;height:178px}.cover-container .cover-image{width:100%;height:100%;object-fit:cover;display:block}.profile-rounded-image{width:178px;height:178px;object-fit:cover;display:block;border-radius:50%}.profile-square-image{width:160px;height:178px;object-fit:cover;display:block;border-radius:2px}.container.dragMode{position:fixed;inset:0;z-index:99999999!important;height:100%!important;width:100%!important;display:flex;justify-content:center;align-items:center;background-color:#fff!important}.container.dragMode .avatar,.container.dragMode .profile-container,.container.dragMode .logo-container,.container.dragMode .cover-container,.container.dragMode .docs{display:none}.container.dragMode .drop-zone-container{position:relative;width:100%;height:100%;flex:1 1 100%}.container.dragMode .drop-zone-container .drop-zone{flex-direction:column;height:100%;outline:none!important;margin:0!important;border:4px dashed #cccccc;border-color:#ccc}.container.dragMode .drop-zone-container .drop-zone .illustration,.container.dragMode .drop-zone-container .drop-zone svg{width:200px!important;height:200px!important;pointer-events:none!important}.container.dragMode .drop-zone-container .drop-zone .drag-icons-container{position:relative}.container.dragMode .drop-zone-container .drop-zone .drag-icons-container .drag-icon-document{width:80px!important;height:80px!important}.container.dragMode .drop-zone-container .drop-zone .drag-icons-container .drag-icon-document svg{width:80px!important;height:80px!important}.container.dragMode .drop-zone-container .drop-zone .drag-icons-container ng-lottie{width:200px;height:200px;display:block}.container.dragMode .drop-zone-container .drop-zone .drop-zone-focus-text{margin-top:32px}.container.dragMode .drop-zone-container .drop-zone .drop-zone-focus-text .heading{font-weight:700;font-size:14px;line-height:18px}.container.dragMode:hover .drop-zone{background-color:#fff!important}.container.dragMode.onDragover .drop-zone-container .drop-zone{border-color:#ccc}.is-documents-mode .dragMode{height:120px!important}.dragModeDocuments .drop-zone-container .drop-zone{background-color:#fff!important}.dragModeDocuments .drop-zone-container .drop-zone .drop-zone-focus-text .heading{font-weight:700;font-size:14px;line-height:18px}.is-details-slider{width:100%!important;height:100%!important;overflow:hidden}.is-details-slider .sliders{display:flex;align-items:center;justify-content:center;gap:4px;min-height:6px!important;height:auto!important;width:100%!important;margin-bottom:6px!important;margin-top:12px!important;opacity:0;pointer-events:none;transition:opacity .3s ease-in-out}.is-details-slider .sliders .slider-item{width:12px;height:6px;border-radius:2px;background-color:#e5e5e5;transform-origin:center;cursor:pointer!important;transition:width .2s ease-in-out,background-color .2s ease-in-out}.is-details-slider .sliders .slider-item.active{width:20px;background-color:#919191}.is-details-slider .drop-zone-container{display:none!important}.is-details-slider .docs{width:100%!important;position:relative!important;overflow:hidden!important}.is-details-slider .docs .carousel-button{opacity:0!important;pointer-events:none!important;transition:opacity .3s ease-in-out!important}.is-details-slider .docs:hover .carousel-button{opacity:1!important;pointer-events:auto!important}.is-details-slider .docs:hover .carousel-button[disabled]{opacity:0!important;pointer-events:none!important}.is-details-slider .doc-container{display:flex!important;align-items:flex-start!important;height:auto!important;flex-shrink:0!important;gap:0!important;position:relative!important;transition:transform .3s ease-out}.is-details-slider .doc{flex:0 0 100%!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;display:flex!important;justify-content:center!important;background-color:transparent!important;flex-shrink:0!important;position:relative!important}.is-details-slider .doc.doc-hidden{height:0!important;max-height:0!important;min-height:0!important;overflow:hidden!important;opacity:0;pointer-events:none;visibility:hidden;margin:0!important;padding:0!important}.is-details-slider .doc.doc-visible{height:auto!important;opacity:1;visibility:visible}.is-details-slider .carousel-button{position:absolute!important;top:45%!important}.is-details-slider:hover .sliders{opacity:1;pointer-events:auto}.is-drawer-mode{width:100%!important;padding:4px!important;position:absolute!important;max-width:100%!important}.is-drawer-mode .drop-zone-container{display:none!important}.is-drawer-mode .skeleton-container.drawer-position{width:100%!important;position:relative!important;overflow:hidden!important;display:flex;align-items:center;gap:4px}.is-drawer-mode .skeleton-container.drawer-position .skeleton-item{width:194px;height:194px;flex:0 0 194px;border-radius:2px;padding:4px}.is-drawer-mode .skeleton-container.drawer-position .skeleton-item .skeleton-bar{width:100%;height:100%;background-color:#fff}.is-drawer-mode .docs{width:100%!important;position:relative!important;overflow:hidden!important}.is-drawer-mode .docs .doc-container{display:flex;width:auto!important;height:auto!important;gap:4px!important;transition:transform .3s ease-out}.is-drawer-mode .docs .doc-container .doc{width:194px!important;height:194px!important;flex:0 0 194px!important;background-color:transparent!important}.is-drawer-mode .carousel-button.carousel-right{right:4px!important;position:absolute!important}.is-drawer-mode .carousel-button.carousel-left{left:4px!important;position:absolute!important}.isCoverDetails{width:100%!important;height:100%!important}.isCoverDetails .drop-zone-container{display:none!important}.isCoverDetails .docs{width:100%!important}.isCoverDetails .docs .doc{flex:0 0 100%!important;width:100%!important;height:auto!important;display:block!important;background-color:transparent!important}.more-docs{width:148px;flex:0 0 148px}.more-docs .illustration{width:80px;height:80px}.more-docs .drop-zone{padding:22px 0;flex-direction:column}.more-docs .drop-zone-error,.more-docs .drop-zone-error .drop-zone-text{padding:0 12px}.small-more-docs{width:148px!important}.small-more-docs .illustration,.small-more-docs svg{width:80px!important;height:80px!important}.small-more-docs .drop-zone{padding:22px 0!important;flex-direction:column}.unsupported .drop-zone-error{display:flex}.unsupported .drop-zone-text{padding:0 12px}.unsupported .drop-zone-text .heading.invalid{line-height:18px}.unsupported .drop-zone-text .subtext{line-height:14px;margin-bottom:0}.unsupported .cancel-button .cancel-icon{width:18px!important;height:18px!important}.unsupported .cancel-button-documents{display:none}.max-reached,.max-reached-more-doc{opacity:.4;pointer-events:none;cursor:none}.max-reached-more-doc .drop-zone{padding:6px 0!important;height:170px}.max-reached-more-doc .drop-zone-text{padding-left:20px;padding-right:20px}.max-reached-more-video .drop-zone{padding:13px 0!important;flex-direction:column}.invalid-file-size .drop-zone .illustration{display:none!important}.invalid-file-size .drop-zone .drop-zone-text{padding-left:20px;padding-right:20px}.drop-zone-error{position:absolute;inset:0;background-color:#fff;display:none;justify-content:center;align-items:center;flex-direction:column;margin:4px;outline:4px dashed #ed9292;border-radius:2px;padding:52px 12px;gap:12px}.drop-zone-error .cancel-button{cursor:pointer;background-color:transparent;position:absolute;top:2px;right:2px;height:26px;width:26px;padding:0;display:grid;place-items:center;transition:color .2s ease-in-out;color:#919191}.drop-zone-error .cancel-button:hover{color:#424242}.drop-zone-error .file-types{display:flex;align-items:center;gap:2px;text-transform:uppercase;max-width:100%;flex-wrap:wrap;justify-content:center}.drop-zone-error .badge{font-size:11px;font-weight:900;color:#fff;line-height:14px;padding:2px 4px;width:35px;border-radius:1px;margin-bottom:0;text-align:center;background-color:#919191}.drop-zone-error .pdf{background-color:#e66767}.drop-zone-error .video{background-color:#b370f0}.drop-zone-error .image{background-color:#fab15c}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
5661
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: DropZoneComponent, isStandalone: true, selector: "cai-drop-zone", inputs: { crop: { classPropertyName: "crop", publicName: "crop", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, deletedFileIds: { classPropertyName: "deletedFileIds", publicName: "deletedFileIds", isSignal: true, isRequired: false, transformFunction: null }, maxCountFiles: { classPropertyName: "maxCountFiles", publicName: "maxCountFiles", isSignal: true, isRequired: false, transformFunction: null }, isDetailsSlider: { classPropertyName: "isDetailsSlider", publicName: "isDetailsSlider", isSignal: true, isRequired: false, transformFunction: null }, isDrawerMode: { classPropertyName: "isDrawerMode", publicName: "isDrawerMode", isSignal: true, isRequired: false, transformFunction: null }, isCoverDetails: { classPropertyName: "isCoverDetails", publicName: "isCoverDetails", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, isDocumentsMode: { classPropertyName: "isDocumentsMode", publicName: "isDocumentsMode", isSignal: true, isRequired: false, transformFunction: null }, documentsDropZoneOpen: { classPropertyName: "documentsDropZoneOpen", publicName: "documentsDropZoneOpen", isSignal: true, isRequired: false, transformFunction: null }, searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null }, avatarColor: { classPropertyName: "avatarColor", publicName: "avatarColor", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: false, isRequired: false, transformFunction: null }, parentForm: { classPropertyName: "parentForm", publicName: "parentForm", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, documentTags: { classPropertyName: "documentTags", publicName: "documentTags", isSignal: true, isRequired: false, transformFunction: null }, excludedFileTypes: { classPropertyName: "excludedFileTypes", publicName: "excludedFileTypes", isSignal: true, isRequired: false, transformFunction: null }, fileTypes: { classPropertyName: "fileTypes", publicName: "fileTypes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDeletedFileIds: "onDeletedFileIds", onDocsChange: "onDocsChange", onDocumentPreviewClick: "onDocumentPreviewClick", onDocumentFileNameChange: "onDocumentFileNameChange", onCropPendingChange: "onCropPendingChange", onDocumentDropZoneOpenChange: "onDocumentDropZoneOpenChange" }, host: { listeners: { "document:dragenter": "onDocumentDragEnter($event)", "document:dragover": "onDocumentDragOver($event)", "document:dragleave": "onWindowDragLeave($event)", "document:drop": "onDocumentDrop($event)" } }, providers: [], viewQueries: [{ propertyName: "inputRange", first: true, predicate: ["inputRange"], descendants: true }, { propertyName: "dropZoneContainer", first: true, predicate: ["dropZoneContainer"], descendants: true }, { propertyName: "docsViewport", first: true, predicate: ["docsViewport"], descendants: true }, { propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@let docCount = docs().length; @let cropFile = crop() === true;\n@let showCrop = showCropper() === true;\n@let documentVariant = variant() === dropZoneVariant.DOCUMENT;\n@let videoVariant = variant() === dropZoneVariant.VIDEO;\n@let profileVariant = variant() === dropZoneVariant.PROFILE;\n@let coverVariant = variant() === dropZoneVariant.COVER;\n@let logoVariant = variant() === dropZoneVariant.LOGO;\n@let roundedBorder = rounded() === true; @let coverPreview = coverUrl !== \"\";\n@let profilePreview = profileUrl !== \"\"; @let logoPreview = !!logoUrl;\n@let smallSize = size() === \"480px\";\n@let countFiles = this.maxCountFiles();\n@let largeSize = size() === \"640px\";\n\n@if (isDocumentsMode() && documentsDropZoneOpen() && dragMode()) {\n <div class=\"documents-drag-overlay\"></div>\n}\n\n<div\n class=\"container\"\n [class]=\"{\n smallContainer: smallSize,\n largeContainer: largeSize,\n dragMode: dragMode() && !isDocumentsMode(),\n dragModeDocuments: dragMode() && isDocumentsMode(),\n onDragover: onDragover(),\n logoVar: logoVariant,\n hasCropper: isCropperReady(),\n 'is-details-slider': isDetailsSlider(),\n 'is-drawer-mode': isDrawerMode(),\n isCoverDetails: isCoverDetails(),\n 'is-documents-mode': isDocumentsMode(),\n }\"\n>\n @if (coverVariant && coverPreview) {\n <div class=\"cover-container\">\n <img [src]=\"coverUrl\" class=\"cover-image\" draggable=\"false\" />\n </div>\n }\n @if (profileVariant) {\n @if (!profilePreview) {\n <div class=\"avatar\">\n <cai-avatar\n [driver]=\"driver()\"\n [size]=\"160\"\n [rounded]=\"rounded()\"\n ></cai-avatar>\n </div>\n } @else {\n <div class=\"profile-container\">\n <img\n [class]=\"rounded() ? 'profile-rounded-image' : 'profile-square-image'\"\n [src]=\"profileUrl\"\n draggable=\"false\"\n />\n </div>\n }\n }\n @if (logoVariant && logoPreview) {\n <div class=\"logo-container\" [class.has-logo]=\"!!logoUrl\">\n <img class=\"logo-image\" [src]=\"logoUrl\" draggable=\"false\" />\n </div>\n }\n <!--Image Cropper-->\n @if (cropFile && showCrop) {\n @if (!isCropperReady()) {\n <div class=\"cropper-loader\">\n <div class=\"spinner\"></div>\n </div>\n }\n <div class=\"cropper-overlay\">\n <image-cropper\n #cropper\n class=\"img-cropper\"\n [output]=\"'base64'\"\n [class.logoBorder]=\"logoVariant\"\n [roundCropper]=\"roundedBorder ? true : false\"\n [hideResizeSquares]=\"true\"\n [allowMoveImage]=\"true\"\n [transform]=\"transform\"\n (transformChange)=\"onTransformChange($event)\"\n format=\"png\"\n [aspectRatio]=\"ratioHelper()\"\n [resizeToWidth]=\"cropWidth()\"\n [resizeToHeight]=\"cropHeight()\"\n [containWithinAspectRatio]=\"true\"\n [imageChangedEvent]=\"imageChangedEvent\"\n (imageCropped)=\"imageCropped($event)\"\n (imageLoaded)=\"imageLoaded($event)\"\n (cropperReady)=\"cropperReady()\"\n (loadImageFailed)=\"loadImageFailed()\"\n ></image-cropper>\n @if (isCropperReady()) {\n <div class=\"lower-part\">\n <div class=\"range\">\n <input\n #inputRange\n type=\"range\"\n class=\"custom-range\"\n min=\"1\"\n max=\"10\"\n step=\"0.1\"\n [value]=\"zoomValue()\"\n (input)=\"onZoomChange($event)\"\n />\n </div>\n <div class=\"cropper-buttons\">\n <button class=\"cancel-button\" (click)=\"cancelCrop()\">Cancel</button>\n <button class=\"submit-button\" (click)=\"submitCrop()\">Crop</button>\n </div>\n </div>\n }\n </div>\n }\n <!-- Drop Zone -->\n @if (!isDocumentsMode() || documentsDropZoneOpen()) {\n <div\n #dropZoneContainer\n class=\"drop-zone-container\"\n [class.has-logo]=\"logoVariant && !!logoUrl\"\n (drop)=\"onDrop($event)\"\n (dragover)=\"onDragOver($event)\"\n (dragenter)=\"onDragEnter($event)\"\n (dragleave)=\"onDragLeave($event)\"\n [class]=\"{\n 'more-docs': docCount >= 3 && largeSize,\n 'small-more-docs': docCount >= 2 && smallSize,\n 'max-reached-drop-design':\n (countFiles <= this.docs().length || maxCountReached()) &&\n documentVariant,\n 'max-reached-more-doc':\n (countFiles <= this.docs().length || maxCountReached()) &&\n documentVariant,\n 'max-reached-more-video':\n (countFiles <= this.docs().length || maxCountReached()) &&\n videoVariant,\n 'invalid-file-size': invalidFileSize(),\n unsupported: unsupported() || invalidFileSize(),\n smallView: this.smallView() && !dragMode(),\n }\"\n >\n <!-- Drop Zone -->\n <div class=\"drop-zone\" (click)=\"handleClickToAdd()\">\n @if (dragMode()) {\n <div class=\"drag-icons-container\">\n @if (isDocumentsMode()) {\n <svg-icon\n name=\"cai-drop-zone-focus\"\n class=\"illustration drag-icon-document\"\n ></svg-icon>\n } @else {\n <!-- Animation -->\n <ng-lottie\n [options]=\"{\n path: variant() | dropZoneAnimation,\n loop: false,\n autoplay: false,\n }\"\n (animationCreated)=\"animationCreated($event)\"\n ></ng-lottie>\n }\n </div>\n <div class=\"drop-zone-focus-text\">\n @if (isDocumentsMode()) {\n <p class=\"heading\">DRAG FILES HERE</p>\n } @else if (documentVariant || videoVariant) {\n <p class=\"heading\">\n {{ onDragover() ? \"DROP FILES HERE\" : \"DRAG FILES HERE\" }}\n </p>\n } @else {\n <p class=\"heading\">\n {{ onDragover() ? \"DROP IMAGE HERE\" : \"DRAG IMAGE HERE\" }}\n </p>\n }\n </div>\n } @else {\n @let svgIcon = variant() | dropZoneAnimation: true;\n <svg-icon [name]=\"svgIcon\" class=\"illustration\"></svg-icon>\n @if (\n (countFiles <= this.docs().length || maxCountReached()) &&\n documentVariant\n ) {\n <div class=\"drop-zone-text\">\n <p class=\"heading\">\n <span class=\"line\">MAX COUNT</span>\n <span class=\"line\">REACHED</span>\n </p>\n <p class=\"subtext\">\n <span class=\"line\">{{ countFiles }} FILES </span>\n <span class=\"line\">IMPORTED</span>\n </p>\n </div>\n } @else {\n <div class=\"drop-zone-text\">\n <p class=\"heading\">\n @if (documentVariant || videoVariant) {\n DRAG FILES\n @if (docCount < 1 || isDocumentsMode()) {\n <span>HERE</span>\n }\n } @else if (profileVariant && roundedBorder) {\n DRAG IMAGE\n } @else {\n DRAG IMAGE HERE\n }\n </p>\n @if (!coverPreview && !profilePreview) {\n <p class=\"subtext\">OR CLICK TO ADD</p>\n }\n @if (coverPreview || profilePreview) {\n <p class=\"subtext\">OR CLICK TO REPLACE</p>\n }\n @if (videoVariant) {\n <p class=\"video-subtext\">max file size {{ maxFileSize() }}mb</p>\n }\n </div>\n @if (isDocumentsMode()) {\n <button\n class=\"cancel-button-documents\"\n ngbTooltip=\"Cancel\"\n [placement]=\"'bottom'\"\n container=\"body\"\n triggers=\"mouseenter:mouseleave\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n >\n <svg-icon\n name=\"cai-cancel\"\n class=\"cancel-icon\"\n (click)=\"onCancel($event)\"\n ></svg-icon>\n </button>\n }\n }\n }\n <input\n type=\"file\"\n aria-hidden=\"true\"\n multiple\n class=\"drop-zone-input\"\n #inputRef\n (input)=\"onInput($event)\"\n (change)=\"fileChangeEvent($event)\"\n />\n </div>\n\n <!-- Drop Zone Error -->\n <div class=\"drop-zone-error\">\n @if (invalidFileSize()) {\n <div class=\"drop-zone-text\">\n <p class=\"heading invalid\">INVALID FILE SIZE</p>\n <p class=\"subtext\">MAX {{ maxFileSize() }} MB</p>\n </div>\n } @else {\n <div class=\"drop-zone-text\">\n <p class=\"heading invalid\">INVALID FILE TYPE</p>\n <p class=\"subtext\">SUPPORTED FORMATS</p>\n </div>\n <div class=\"file-types\">\n @for (type of supportedFileTypes(); track $index) {\n <p\n class=\"badge\"\n [class]=\"{\n pdf: type === 'pdf',\n video: ['avi', 'mp4', 'mov'].includes(type),\n image: ['jpg', 'png', 'jpeg', 'gif'].includes(type),\n }\"\n >\n {{ type }}\n </p>\n }\n </div>\n }\n <button class=\"cancel-button\">\n <svg-icon\n name=\"cai-cancel\"\n class=\"cancel-icon\"\n (click)=\"cancel()\"\n ></svg-icon>\n </button>\n </div>\n </div>\n }\n @if (isLoadingSkeleton()) {\n <!-- Skeleton -->\n <ng-container *ngTemplateOutlet=\"skeletonTemplate\"></ng-container>\n } @else {\n <!-- Carousel -->\n @if (docCount > 0 && (documentVariant || videoVariant)) {\n <div #docsViewport class=\"docs\">\n <div\n class=\"doc-container\"\n [class.documents-container-grid]=\"isDocumentsMode()\"\n [style.transform]=\"isDocumentsMode() ? '' : carouselTransform()\"\n [style.--carousel-index]=\"isDocumentsMode() ? null : carouselIndex()\"\n >\n @for (doc of docs(); track doc.fileId) {\n <cai-document-preview\n [class.doc-visible]=\"\n isDetailsSlider() && $index === carouselIndex()\n \"\n [class.doc-hidden]=\"\n isDetailsSlider() && $index !== carouselIndex()\n \"\n class=\"doc\"\n [file]=\"doc\"\n [tags]=\"documentTags()\"\n [searchText]=\"searchText()\"\n [cdlDetailsMode]=\"isDetailsSlider()\"\n [multipleDetailsDocs]=\"isDetailsSlider() && docCount > 1\"\n [maxAspectRatio]=\"\n isDetailsSlider() && docCount > 1\n ? maxDetailsAspectRatio()\n : null\n \"\n [drawerMode]=\"isDrawerMode()\"\n [isCoverDetails]=\"isCoverDetails()\"\n [viewMode]=\"isDocumentsMode() ? 'large' : 'small'\"\n (onDelete)=\"handleDelete($event)\"\n (onDownload)=\"handleDownload($event)\"\n (onTagChange)=\"handleTagChange($event)\"\n (onFileNameChange)=\"handleFileNameChange($event)\"\n (onDocumentPreviewClick)=\"handleDocumentPreviewClick($event)\"\n (aspectRatioChange)=\"onDocAspectRatioChange($event)\"\n ></cai-document-preview>\n }\n </div>\n @if (docCount >= 3 || (isDetailsSlider() && docCount > 1)) {\n <button\n class=\"carousel-button carousel-left\"\n type=\"button\"\n (click)=\"carouselLeft()\"\n [disabled]=\"carouselIndex() === 0\"\n [style.opacity]=\"carouselIndex() === 0 ? '0' : '1'\"\n >\n <svg-icon name=\"cai-arrow-secondary-left\" class=\"arrow\"></svg-icon>\n </button>\n <button\n class=\"carousel-button carousel-right\"\n type=\"button\"\n (click)=\"carouselRight()\"\n [disabled]=\"isCarouselAtEnd()\"\n [style.opacity]=\"isCarouselAtEnd() ? '0' : '1'\"\n >\n <svg-icon name=\"cai-arrow-secondary-right\" class=\"arrow\"></svg-icon>\n </button>\n }\n @if (isDetailsSlider() && docCount > 1) {\n <div class=\"sliders\">\n @for (doc of docs(); track $index) {\n <div\n class=\"slider-item\"\n (click)=\"carouselIndex.set($index)\"\n [class.active]=\"$index === carouselIndex()\"\n ></div>\n }\n </div>\n }\n </div>\n }\n }\n</div>\n\n<!-- Skeleton Template -->\n\n<ng-template #skeletonTemplate>\n <div\n class=\"skeleton-container\"\n [ngClass]=\"{\n 'documents-container-grid': isDocumentsMode(),\n 'drawer-position': isDrawerMode(),\n }\"\n >\n @for (item of skeletonItems(); track $index) {\n <div class=\"skeleton-item\">\n <div class=\"skeleton-bar\"></div>\n </div>\n }\n </div>\n</ng-template>\n", styles: [".container.is-documents-mode{width:100%!important;max-width:100%!important}.container.is-documents-mode .drop-zone-container .drop-zone{width:100%!important}.documents-drag-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0003;z-index:10}.is-documents-mode{display:flex;flex-direction:column;gap:0!important;width:100%!important;height:100%!important}.is-documents-mode .drop-zone-container{display:flex;margin-bottom:4px;background-color:#f7f7f7;z-index:20}.is-documents-mode .drop-zone-container .drop-zone{width:100%;height:120px!important;background-color:transparent;outline-color:#dadada;transition:background-color .2s ease-in-out}.is-documents-mode .drop-zone-container .drop-zone:hover{background-color:#fff!important}.is-documents-mode .drop-zone-container .drop-zone .illustration{width:80px;height:80px}.is-documents-mode .drop-zone-container .drop-zone .drop-zone-text .heading{padding-bottom:0}.is-documents-mode .drop-zone-container .drop-zone .cancel-button-documents{z-index:1000;position:absolute;top:4px;right:4px;width:26px;height:26px;background-color:transparent;padding:4px}.is-documents-mode .drop-zone-container .drop-zone .cancel-button-documents .cancel-icon{width:18px;height:18px;color:#919191}.is-documents-mode .drop-zone-container .drop-zone .cancel-button-documents:hover .cancel-icon{color:#424242}.is-documents-mode .skeleton-container .skeleton-item{width:100%;height:auto;aspect-ratio:1/1;max-width:100%;min-width:302px;min-height:302px;position:relative;border-radius:3px;background-color:#fff}.is-documents-mode .skeleton-container .skeleton-item .skeleton-bar{position:absolute;bottom:8px;left:8px;right:8px;width:auto;height:26px;background-color:#91919133;animation:skeleton-pulse 1s ease-in-out infinite alternate;border-radius:2px}.is-documents-mode .docs{width:100%!important;position:static!important;overflow:visible!important}.is-documents-mode .docs .doc-container .doc{height:auto!important}.is-documents-mode .docs .carousel-button{display:none}.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{display:grid;width:100%;grid-template-columns:repeat(auto-fill,minmax(302px,1fr));gap:4px;justify-items:stretch;align-items:start}@media (min-width: 801px) and (max-width: 1001px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(2,minmax(302px,1fr))}}@media (min-width: 1002px) and (max-width: 1307px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(3,minmax(302px,1fr))}}@media (min-width: 1308px) and (max-width: 1613px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(4,minmax(302px,1fr))}}@media (min-width: 1614px) and (max-width: 1920px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(5,minmax(302px,1fr))}}@media (min-width: 1921px) and (max-width: 2227px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(6,minmax(302px,1fr))}}@media (min-width: 2228px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(auto-fit,minmax(302px,1fr))}}@keyframes skeleton-pulse{0%{background-color:#91919133}to{background-color:#91919120}}.cropper-overlay{display:flex;justify-content:center;flex-direction:column;background-color:#fff;align-items:center;z-index:2000;gap:4px;opacity:1;top:0;left:0;position:absolute;width:100%;height:212px}.cropper-overlay .img-cropper{width:100%;height:178px;padding:0}.cropper-overlay .lower-part{display:flex;place-items:center;align-items:center;margin-left:3px;margin-right:3px;width:100%;gap:12px}.cropper-overlay .lower-part .range{width:100%;height:22px;display:flex;align-items:center}.cropper-overlay .lower-part .range input[type=range]{width:100%}.cropper-overlay .lower-part .range input[type=range]{-webkit-appearance:none;appearance:none;border-radius:2px;--range-active-color: #6692f1;--range-progress: 50%;background:transparent;cursor:pointer}.cropper-overlay .lower-part .cropper-buttons{display:flex;justify-content:start;gap:6px}.cropper-overlay .lower-part .cropper-buttons .cancel-button,.cropper-overlay .lower-part .cropper-buttons .submit-button{padding:4px;width:80px;font-size:14px;border-radius:2px;text-transform:uppercase;line-height:14px;font-weight:700;font-size:11px;cursor:pointer}.cropper-overlay .lower-part .cropper-buttons .cancel-button{background-color:#eee;color:#6c6c6c;transition:background-color .3s ease-in-out,color .3s ease-in-out}.cropper-overlay .lower-part .cropper-buttons .cancel-button:hover{background-color:#424242;color:#fff}.cropper-overlay .lower-part .cropper-buttons .cancel-button:active{background-color:#1d1d1d;color:#fff}.cropper-overlay .lower-part .cropper-buttons .submit-button{background-color:#3b73ed;color:#fff;transition:background-color .3s ease-in-out,color .3s ease-in-out}.cropper-overlay .lower-part .cropper-buttons .submit-button:hover{background-color:#0b49d1;color:#fff}.cropper-overlay .lower-part .cropper-buttons .submit-button:active{background-color:#00179e;color:#fff}.cropper-loader{position:absolute;z-index:1100;display:flex;justify-content:center;align-items:center;background-color:#fff;width:100%;height:100%}.cropper-loader .spinner{width:48px;height:48px;border:5px solid rgba(145,145,145,.2);border-top:5px solid #3b73ed;border-radius:50%;animation:spin 1s linear infinite}.hasCropper{height:204px!important;position:relative}input[type=range]:hover{--range-active-color: $color-blue-500}input[type=range]:active{--range-active-color: $color-blue-700}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-7px;background-color:#fff;height:20px;width:30px;box-shadow:0 0 4px #00000026;background-image:url(/assets/icons/interaction/cai-thumb.svg);background-repeat:no-repeat;background-position:center;background-size:14px 18px;border-radius:2px;transition:background-color .3s ease-in-out}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--range-active-color) 0%,var(--range-active-color) var(--range-progress),#eeeeee var(--range-progress),#eeeeee 100%);height:6px;transition:background .3s ease-in-out}input[type=range]:hover::-webkit-slider-runnable-track{background:linear-gradient(to right,#3b73ed 0%,#3b73ed var(--range-progress),#eeeeee var(--range-progress),#eeeeee 100%)}input[type=range]:active::-webkit-slider-runnable-track{background:linear-gradient(to right,#0b49d1 0%,#0b49d1 var(--range-progress),#eeeeee var(--range-progress),#eeeeee 100%)}input[type=range]:hover::-webkit-slider-thumb{cursor:grab}input[type=range]:active::-webkit-slider-thumb{background-image:url(/assets/icons/interaction/cai-thumb-active.svg);cursor:grabbing}@keyframes spin{to{transform:rotate(360deg)}}p{margin-bottom:0}svg-icon{display:flex;align-items:center;justify-content:center}button{border:none!important;outline:none!important}.illustration{width:100px;height:100px}.container{display:flex;gap:6px;position:relative;padding-left:0!important;padding-right:0!important;margin:0!important}.container.smallContainer{width:456px!important}.container.largeContainer{width:616px!important}.docs{flex-shrink:0;height:100%;overflow:hidden;position:relative;border-radius:2px}.smallContainer .docs{max-width:302px!important}.smallContainer .docs .doc-container{display:flex;gap:6px;transition:transform .2s ease-out}.largeContainer .docs{max-width:460px!important}.largeContainer .docs .doc-container{display:flex;gap:8px;transition:transform .2s ease-out}.carousel-button{position:absolute;top:50%;transform:translateY(-50%);border:none;outline:none;width:24px;height:32px;background-color:#ffffffb2;border-radius:2px;box-shadow:0 0 5px #0000004d;cursor:pointer;display:grid;place-items:center;padding:0}.drop-zone-input{display:none}.carousel-left{left:4px}.carousel-right{right:4px}.arrow{width:18px;height:18px;color:#0000004d}.doc{flex:0 0 148px;height:178px;display:flex;background-color:#eee;border-radius:2px}.drop-zone-container{position:relative;flex:1 0 auto}.drop-zone{display:flex;justify-content:center;align-items:center;flex-direction:row;outline:4px dashed #eeeeee;border-radius:2px;padding:35px 0;margin:4px;gap:10px;cursor:pointer;transition:background-color .2s ease-in-out}.drop-zone:hover{background-color:#eee}.drop-zone-text{-webkit-user-select:none;user-select:none;text-align:center}.drop-zone-text .heading{color:#424242;font-size:14px;line-height:18px;font-weight:700;padding-bottom:4px}.drop-zone-text .heading .line{display:block;width:fit-content;margin:0 auto}.drop-zone-text .invalid{color:#df3c3c}.drop-zone-text .subtext{color:#424242;font-size:11px;line-height:14px;font-weight:600}.drop-zone-text .subtext .line{display:block;width:fit-content;margin:0 auto}.drop-zone-text .video-subtext{margin-top:4px;color:#919191;font-size:11px;line-height:14px;font-weight:500}.smallView{width:173px!important}.smallView .drop-zone{flex-direction:column!important;padding:20px 0;width:173px;height:170px}.smallView .drop-zone .drop-zone-text .heading{line-height:18px;padding-bottom:0!important}.smallView .drop-zone .drop-zone-text .subtext{line-height:14px;margin-bottom:0!important}.smallView .illustration{width:80px;height:80px}.text-white-50{color:#fff}.text-white-100{color:#f7f7f7}.text-white-200{color:#eee}.text-white-300{color:#e5e5e5}.text-white-500{color:#dadada}.text-white-500\\/20{color:#dadada33}.text-white-500\\/40{color:#dadada66}.text-white-500\\/70{color:#dadadab3}.text-white-700{color:#ccc}.text-black-50{color:#aaa}.text-black-100{color:#919191}.text-black-200{color:#6c6c6c}.text-black-300{color:#424242}.text-black-500{color:#2f2f2f}.text-black-500\\/20{color:#2f2f2f33}.text-black-500\\/40{color:#2f2f2f66}.text-black-500\\/70{color:#2f2f2fb3}.text-black-700{color:#1d1d1d}.text-blue-50{color:#e9effd}.text-blue-100{color:#bed0f9}.text-blue-200{color:#92b1f5}.text-blue-300{color:#6692f1}.text-blue-500{color:#3b73ed}.text-blue-500\\/20{color:#3b73ed33}.text-blue-500\\/40{color:#3b73ed66}.text-blue-500\\/70{color:#3b73edb3}.text-blue-700{color:#0b49d1}.text-blue-900{color:#00179e}.text-red-50{color:#fbe9e9}.text-red-100{color:#f4bebe}.text-red-200{color:#ed9292}.text-red-300{color:#e66767}.text-red-500{color:#df3c3c}.text-red-500\\/20{color:#df3c3c33}.text-red-500\\/40{color:#df3c3c66}.text-red-500\\/70{color:#df3c3cb3}.text-red-700{color:#c20c0c}.text-green-50{color:#e7f4f3}.text-green-100{color:#b6dfdb}.text-green-200{color:#86c9c3}.text-green-300{color:#56b4ac}.text-green-500{color:#259f94}.text-green-500\\/20{color:#259f9433}.text-green-500\\/40{color:#259f9466}.text-green-500\\/70{color:#259f94b3}.text-green-700{color:#007a6e}.text-yellow-50{color:#fef4e8}.text-yellow-100{color:#fddeb9}.text-yellow-200{color:#fbc88b}.text-yellow-300{color:#fab15c}.text-yellow-500{color:#f89b2e}.text-yellow-500\\/20{color:#f89b2e33}.text-yellow-500\\/40{color:#f89b2e66}.text-yellow-500\\/70{color:#f89b2eb3}.text-yellow-700{color:#de7700}.text-purple-50{color:#f4ebfd}.text-purple-100{color:#dfc2f9}.text-purple-200{color:#c999f4}.text-purple-300{color:#b370f0}.text-purple-500{color:#9e47ec}.text-purple-500\\/20{color:#9e47ec33}.text-purple-500\\/40{color:#9e47ec66}.text-purple-500\\/70{color:#9e47ecb3}.text-purple-700{color:#7919d0}.text-orange-50{color:#ffefea}.text-orange-100{color:#ffcfc0}.text-orange-200{color:#ffb097}.text-orange-300{color:#ff906d}.text-orange-500{color:#ff7043}.text-orange-500\\/20{color:#ff704333}.text-orange-500\\/40{color:#ff704366}.text-orange-500\\/70{color:#ff7043b3}.text-orange-700{color:#e54715}.text-azure-50{color:#e5f7fc}.text-azure-100{color:#b2e6f7}.text-azure-200{color:#80d6f1}.text-azure-300{color:#4dc5eb}.text-azure-500{color:#1ab5e6}.text-azure-500\\/20{color:#1ab5e633}.text-azure-500\\/40{color:#1ab5e666}.text-azure-500\\/70{color:#1ab5e6b3}.text-azure-700{color:#0093c9}.text-gold-50{color:#faf3e6}.text-gold-100{color:#efdcb4}.text-gold-200{color:#e4c481}.text-gold-300{color:#daad4f}.text-gold-500{color:#cf961d}.text-gold-500\\/20{color:#cf961d33}.text-gold-500\\/40{color:#cf961d66}.text-gold-500\\/70{color:#cf961db3}.text-gold-700{color:#b07000}.text-brown-50{color:#f1ede9}.text-brown-100{color:#d6c9bd}.text-brown-200{color:#bca691}.text-brown-300{color:#a08266}.text-brown-500{color:#865e3a}.text-brown-500\\/20{color:#865e3a33}.text-brown-500\\/40{color:#865e3a66}.text-brown-500\\/70{color:#865e3ab3}.text-brown-700{color:#5f330a}.text-navy-50{color:#e7e7fa}.text-navy-100{color:#b7b6f1}.text-navy-200{color:#8785e8}.text-navy-300{color:#5755df}.text-navy-500{color:#2724d6}.text-navy-500\\/20{color:#2724d633}.text-navy-500\\/40{color:#2724d666}.text-navy-500\\/70{color:#2724d6b3}.text-navy-700{color:#0000b8}.text-lime-50{color:#ecf6e7}.text-lime-100{color:#c5e3b6}.text-lime-200{color:#9ed186}.text-lime-300{color:#77bf56}.text-lime-500{color:#50ac25}.text-lime-500\\/20{color:#50ac2533}.text-lime-500\\/40{color:#50ac2566}.text-lime-500\\/70{color:#50ac25b3}.text-lime-700{color:#238900}.text-magenta-50{color:#fbe9f1}.text-magenta-100{color:#f4bed6}.text-magenta-200{color:#ed93bb}.text-magenta-300{color:#e668a0}.text-magenta-500{color:#df3d85}.text-magenta-500\\/20{color:#df3d8533}.text-magenta-500\\/40{color:#df3d8566}.text-magenta-500\\/70{color:#df3d85b3}.text-magenta-700{color:#c10d5d}.bg-white-50{background-color:#fff}.bg-white-100{background-color:#f7f7f7}.bg-white-200{background-color:#eee}.bg-white-300{background-color:#e5e5e5}.bg-white-500{background-color:#dadada}.bg-white-500\\/20{background-color:#dadada33}.bg-white-500\\/40{background-color:#dadada66}.bg-white-500\\/70{background-color:#dadadab3}.bg-white-700{background-color:#ccc}.bg-black-50{background-color:#aaa}.bg-black-100{background-color:#919191}.bg-black-200{background-color:#6c6c6c}.bg-black-300{background-color:#424242}.bg-black-500{background-color:#2f2f2f}.bg-black-500\\/20{background-color:#2f2f2f33}.bg-black-500\\/40{background-color:#2f2f2f66}.bg-black-500\\/70{background-color:#2f2f2fb3}.bg-black-700{background-color:#1d1d1d}.bg-blue-50{background-color:#e9effd}.bg-blue-100{background-color:#bed0f9}.bg-blue-200{background-color:#92b1f5}.bg-blue-300{background-color:#6692f1}.bg-blue-500{background-color:#3b73ed}.bg-blue-500\\/20{background-color:#3b73ed33}.bg-blue-500\\/40{background-color:#3b73ed66}.bg-blue-500\\/70{background-color:#3b73edb3}.bg-blue-700{background-color:#0b49d1}.bg-blue-900{background-color:#00179e}.bg-red-50{background-color:#fbe9e9}.bg-red-100{background-color:#f4bebe}.bg-red-200{background-color:#ed9292}.bg-red-300{background-color:#e66767}.bg-red-500{background-color:#df3c3c}.bg-red-500\\/20{background-color:#df3c3c33}.bg-red-500\\/40{background-color:#df3c3c66}.bg-red-500\\/70{background-color:#df3c3cb3}.bg-red-700{background-color:#c20c0c}.bg-green-50{background-color:#e7f4f3}.bg-green-100{background-color:#b6dfdb}.bg-green-200{background-color:#86c9c3}.bg-green-300{background-color:#56b4ac}.bg-green-500{background-color:#259f94}.bg-green-500\\/20{background-color:#259f9433}.bg-green-500\\/40{background-color:#259f9466}.bg-green-500\\/70{background-color:#259f94b3}.bg-green-700{background-color:#007a6e}.bg-yellow-50{background-color:#fef4e8}.bg-yellow-100{background-color:#fddeb9}.bg-yellow-200{background-color:#fbc88b}.bg-yellow-300{background-color:#fab15c}.bg-yellow-500{background-color:#f89b2e}.bg-yellow-500\\/20{background-color:#f89b2e33}.bg-yellow-500\\/40{background-color:#f89b2e66}.bg-yellow-500\\/70{background-color:#f89b2eb3}.bg-yellow-700{background-color:#de7700}.bg-purple-50{background-color:#f4ebfd}.bg-purple-100{background-color:#dfc2f9}.bg-purple-200{background-color:#c999f4}.bg-purple-300{background-color:#b370f0}.bg-purple-500{background-color:#9e47ec}.bg-purple-500\\/20{background-color:#9e47ec33}.bg-purple-500\\/40{background-color:#9e47ec66}.bg-purple-500\\/70{background-color:#9e47ecb3}.bg-purple-700{background-color:#7919d0}.bg-orange-50{background-color:#ffefea}.bg-orange-100{background-color:#ffcfc0}.bg-orange-200{background-color:#ffb097}.bg-orange-300{background-color:#ff906d}.bg-orange-500{background-color:#ff7043}.bg-orange-500\\/20{background-color:#ff704333}.bg-orange-500\\/40{background-color:#ff704366}.bg-orange-500\\/70{background-color:#ff7043b3}.bg-orange-700{background-color:#e54715}.bg-azure-50{background-color:#e5f7fc}.bg-azure-100{background-color:#b2e6f7}.bg-azure-200{background-color:#80d6f1}.bg-azure-300{background-color:#4dc5eb}.bg-azure-500{background-color:#1ab5e6}.bg-azure-500\\/20{background-color:#1ab5e633}.bg-azure-500\\/40{background-color:#1ab5e666}.bg-azure-500\\/70{background-color:#1ab5e6b3}.bg-azure-700{background-color:#0093c9}.bg-gold-50{background-color:#faf3e6}.bg-gold-100{background-color:#efdcb4}.bg-gold-200{background-color:#e4c481}.bg-gold-300{background-color:#daad4f}.bg-gold-500{background-color:#cf961d}.bg-gold-500\\/20{background-color:#cf961d33}.bg-gold-500\\/40{background-color:#cf961d66}.bg-gold-500\\/70{background-color:#cf961db3}.bg-gold-700{background-color:#b07000}.bg-brown-50{background-color:#f1ede9}.bg-brown-100{background-color:#d6c9bd}.bg-brown-200{background-color:#bca691}.bg-brown-300{background-color:#a08266}.bg-brown-500{background-color:#865e3a}.bg-brown-500\\/20{background-color:#865e3a33}.bg-brown-500\\/40{background-color:#865e3a66}.bg-brown-500\\/70{background-color:#865e3ab3}.bg-brown-700{background-color:#5f330a}.bg-navy-50{background-color:#e7e7fa}.bg-navy-100{background-color:#b7b6f1}.bg-navy-200{background-color:#8785e8}.bg-navy-300{background-color:#5755df}.bg-navy-500{background-color:#2724d6}.bg-navy-500\\/20{background-color:#2724d633}.bg-navy-500\\/40{background-color:#2724d666}.bg-navy-500\\/70{background-color:#2724d6b3}.bg-navy-700{background-color:#0000b8}.bg-lime-50{background-color:#ecf6e7}.bg-lime-100{background-color:#c5e3b6}.bg-lime-200{background-color:#9ed186}.bg-lime-300{background-color:#77bf56}.bg-lime-500{background-color:#50ac25}.bg-lime-500\\/20{background-color:#50ac2533}.bg-lime-500\\/40{background-color:#50ac2566}.bg-lime-500\\/70{background-color:#50ac25b3}.bg-lime-700{background-color:#238900}.bg-magenta-50{background-color:#fbe9f1}.bg-magenta-100{background-color:#f4bed6}.bg-magenta-200{background-color:#ed93bb}.bg-magenta-300{background-color:#e668a0}.bg-magenta-500{background-color:#df3d85}.bg-magenta-500\\/20{background-color:#df3d8533}.bg-magenta-500\\/40{background-color:#df3d8566}.bg-magenta-500\\/70{background-color:#df3d85b3}.bg-magenta-700{background-color:#c10d5d}.border-white-50{border-color:#fff}.border-white-100{border-color:#f7f7f7}.border-white-200{border-color:#eee}.border-white-300{border-color:#e5e5e5}.border-white-500{border-color:#dadada}.border-white-500\\/20{border-color:#dadada33}.border-white-500\\/40{border-color:#dadada66}.border-white-500\\/70{border-color:#dadadab3}.border-white-700{border-color:#ccc}.border-black-50{border-color:#aaa}.border-black-100{border-color:#919191}.border-black-200{border-color:#6c6c6c}.border-black-300{border-color:#424242}.border-black-500{border-color:#2f2f2f}.border-black-500\\/20{border-color:#2f2f2f33}.border-black-500\\/40{border-color:#2f2f2f66}.border-black-500\\/70{border-color:#2f2f2fb3}.border-black-700{border-color:#1d1d1d}.border-blue-50{border-color:#e9effd}.border-blue-100{border-color:#bed0f9}.border-blue-200{border-color:#92b1f5}.border-blue-300{border-color:#6692f1}.border-blue-500{border-color:#3b73ed}.border-blue-500\\/20{border-color:#3b73ed33}.border-blue-500\\/40{border-color:#3b73ed66}.border-blue-500\\/70{border-color:#3b73edb3}.border-blue-700{border-color:#0b49d1}.border-blue-900{border-color:#00179e}.border-red-50{border-color:#fbe9e9}.border-red-100{border-color:#f4bebe}.border-red-200{border-color:#ed9292}.border-red-300{border-color:#e66767}.border-red-500{border-color:#df3c3c}.border-red-500\\/20{border-color:#df3c3c33}.border-red-500\\/40{border-color:#df3c3c66}.border-red-500\\/70{border-color:#df3c3cb3}.border-red-700{border-color:#c20c0c}.border-green-50{border-color:#e7f4f3}.border-green-100{border-color:#b6dfdb}.border-green-200{border-color:#86c9c3}.border-green-300{border-color:#56b4ac}.border-green-500{border-color:#259f94}.border-green-500\\/20{border-color:#259f9433}.border-green-500\\/40{border-color:#259f9466}.border-green-500\\/70{border-color:#259f94b3}.border-green-700{border-color:#007a6e}.border-yellow-50{border-color:#fef4e8}.border-yellow-100{border-color:#fddeb9}.border-yellow-200{border-color:#fbc88b}.border-yellow-300{border-color:#fab15c}.border-yellow-500{border-color:#f89b2e}.border-yellow-500\\/20{border-color:#f89b2e33}.border-yellow-500\\/40{border-color:#f89b2e66}.border-yellow-500\\/70{border-color:#f89b2eb3}.border-yellow-700{border-color:#de7700}.border-purple-50{border-color:#f4ebfd}.border-purple-100{border-color:#dfc2f9}.border-purple-200{border-color:#c999f4}.border-purple-300{border-color:#b370f0}.border-purple-500{border-color:#9e47ec}.border-purple-500\\/20{border-color:#9e47ec33}.border-purple-500\\/40{border-color:#9e47ec66}.border-purple-500\\/70{border-color:#9e47ecb3}.border-purple-700{border-color:#7919d0}.border-orange-50{border-color:#ffefea}.border-orange-100{border-color:#ffcfc0}.border-orange-200{border-color:#ffb097}.border-orange-300{border-color:#ff906d}.border-orange-500{border-color:#ff7043}.border-orange-500\\/20{border-color:#ff704333}.border-orange-500\\/40{border-color:#ff704366}.border-orange-500\\/70{border-color:#ff7043b3}.border-orange-700{border-color:#e54715}.border-azure-50{border-color:#e5f7fc}.border-azure-100{border-color:#b2e6f7}.border-azure-200{border-color:#80d6f1}.border-azure-300{border-color:#4dc5eb}.border-azure-500{border-color:#1ab5e6}.border-azure-500\\/20{border-color:#1ab5e633}.border-azure-500\\/40{border-color:#1ab5e666}.border-azure-500\\/70{border-color:#1ab5e6b3}.border-azure-700{border-color:#0093c9}.border-gold-50{border-color:#faf3e6}.border-gold-100{border-color:#efdcb4}.border-gold-200{border-color:#e4c481}.border-gold-300{border-color:#daad4f}.border-gold-500{border-color:#cf961d}.border-gold-500\\/20{border-color:#cf961d33}.border-gold-500\\/40{border-color:#cf961d66}.border-gold-500\\/70{border-color:#cf961db3}.border-gold-700{border-color:#b07000}.border-brown-50{border-color:#f1ede9}.border-brown-100{border-color:#d6c9bd}.border-brown-200{border-color:#bca691}.border-brown-300{border-color:#a08266}.border-brown-500{border-color:#865e3a}.border-brown-500\\/20{border-color:#865e3a33}.border-brown-500\\/40{border-color:#865e3a66}.border-brown-500\\/70{border-color:#865e3ab3}.border-brown-700{border-color:#5f330a}.border-navy-50{border-color:#e7e7fa}.border-navy-100{border-color:#b7b6f1}.border-navy-200{border-color:#8785e8}.border-navy-300{border-color:#5755df}.border-navy-500{border-color:#2724d6}.border-navy-500\\/20{border-color:#2724d633}.border-navy-500\\/40{border-color:#2724d666}.border-navy-500\\/70{border-color:#2724d6b3}.border-navy-700{border-color:#0000b8}.border-lime-50{border-color:#ecf6e7}.border-lime-100{border-color:#c5e3b6}.border-lime-200{border-color:#9ed186}.border-lime-300{border-color:#77bf56}.border-lime-500{border-color:#50ac25}.border-lime-500\\/20{border-color:#50ac2533}.border-lime-500\\/40{border-color:#50ac2566}.border-lime-500\\/70{border-color:#50ac25b3}.border-lime-700{border-color:#238900}.border-magenta-50{border-color:#fbe9f1}.border-magenta-100{border-color:#f4bed6}.border-magenta-200{border-color:#ed93bb}.border-magenta-300{border-color:#e668a0}.border-magenta-500{border-color:#df3d85}.border-magenta-500\\/20{border-color:#df3d8533}.border-magenta-500\\/40{border-color:#df3d8566}.border-magenta-500\\/70{border-color:#df3d85b3}.border-magenta-700{border-color:#c10d5d}.fill-white-50{fill:#fff}.fill-white-100{fill:#f7f7f7}.fill-white-200{fill:#eee}.fill-white-300{fill:#e5e5e5}.fill-white-500{fill:#dadada}.fill-white-500\\/20{fill:#dadada33}.fill-white-500\\/40{fill:#dadada66}.fill-white-500\\/70{fill:#dadadab3}.fill-white-700{fill:#ccc}.fill-black-50{fill:#aaa}.fill-black-100{fill:#919191}.fill-black-200{fill:#6c6c6c}.fill-black-300{fill:#424242}.fill-black-500{fill:#2f2f2f}.fill-black-500\\/20{fill:#2f2f2f33}.fill-black-500\\/40{fill:#2f2f2f66}.fill-black-500\\/70{fill:#2f2f2fb3}.fill-black-700{fill:#1d1d1d}.fill-blue-50{fill:#e9effd}.fill-blue-100{fill:#bed0f9}.fill-blue-200{fill:#92b1f5}.fill-blue-300{fill:#6692f1}.fill-blue-500{fill:#3b73ed}.fill-blue-500\\/20{fill:#3b73ed33}.fill-blue-500\\/40{fill:#3b73ed66}.fill-blue-500\\/70{fill:#3b73edb3}.fill-blue-700{fill:#0b49d1}.fill-blue-900{fill:#00179e}.fill-red-50{fill:#fbe9e9}.fill-red-100{fill:#f4bebe}.fill-red-200{fill:#ed9292}.fill-red-300{fill:#e66767}.fill-red-500{fill:#df3c3c}.fill-red-500\\/20{fill:#df3c3c33}.fill-red-500\\/40{fill:#df3c3c66}.fill-red-500\\/70{fill:#df3c3cb3}.fill-red-700{fill:#c20c0c}.fill-green-50{fill:#e7f4f3}.fill-green-100{fill:#b6dfdb}.fill-green-200{fill:#86c9c3}.fill-green-300{fill:#56b4ac}.fill-green-500{fill:#259f94}.fill-green-500\\/20{fill:#259f9433}.fill-green-500\\/40{fill:#259f9466}.fill-green-500\\/70{fill:#259f94b3}.fill-green-700{fill:#007a6e}.fill-yellow-50{fill:#fef4e8}.fill-yellow-100{fill:#fddeb9}.fill-yellow-200{fill:#fbc88b}.fill-yellow-300{fill:#fab15c}.fill-yellow-500{fill:#f89b2e}.fill-yellow-500\\/20{fill:#f89b2e33}.fill-yellow-500\\/40{fill:#f89b2e66}.fill-yellow-500\\/70{fill:#f89b2eb3}.fill-yellow-700{fill:#de7700}.fill-purple-50{fill:#f4ebfd}.fill-purple-100{fill:#dfc2f9}.fill-purple-200{fill:#c999f4}.fill-purple-300{fill:#b370f0}.fill-purple-500{fill:#9e47ec}.fill-purple-500\\/20{fill:#9e47ec33}.fill-purple-500\\/40{fill:#9e47ec66}.fill-purple-500\\/70{fill:#9e47ecb3}.fill-purple-700{fill:#7919d0}.fill-orange-50{fill:#ffefea}.fill-orange-100{fill:#ffcfc0}.fill-orange-200{fill:#ffb097}.fill-orange-300{fill:#ff906d}.fill-orange-500{fill:#ff7043}.fill-orange-500\\/20{fill:#ff704333}.fill-orange-500\\/40{fill:#ff704366}.fill-orange-500\\/70{fill:#ff7043b3}.fill-orange-700{fill:#e54715}.fill-azure-50{fill:#e5f7fc}.fill-azure-100{fill:#b2e6f7}.fill-azure-200{fill:#80d6f1}.fill-azure-300{fill:#4dc5eb}.fill-azure-500{fill:#1ab5e6}.fill-azure-500\\/20{fill:#1ab5e633}.fill-azure-500\\/40{fill:#1ab5e666}.fill-azure-500\\/70{fill:#1ab5e6b3}.fill-azure-700{fill:#0093c9}.fill-gold-50{fill:#faf3e6}.fill-gold-100{fill:#efdcb4}.fill-gold-200{fill:#e4c481}.fill-gold-300{fill:#daad4f}.fill-gold-500{fill:#cf961d}.fill-gold-500\\/20{fill:#cf961d33}.fill-gold-500\\/40{fill:#cf961d66}.fill-gold-500\\/70{fill:#cf961db3}.fill-gold-700{fill:#b07000}.fill-brown-50{fill:#f1ede9}.fill-brown-100{fill:#d6c9bd}.fill-brown-200{fill:#bca691}.fill-brown-300{fill:#a08266}.fill-brown-500{fill:#865e3a}.fill-brown-500\\/20{fill:#865e3a33}.fill-brown-500\\/40{fill:#865e3a66}.fill-brown-500\\/70{fill:#865e3ab3}.fill-brown-700{fill:#5f330a}.fill-navy-50{fill:#e7e7fa}.fill-navy-100{fill:#b7b6f1}.fill-navy-200{fill:#8785e8}.fill-navy-300{fill:#5755df}.fill-navy-500{fill:#2724d6}.fill-navy-500\\/20{fill:#2724d633}.fill-navy-500\\/40{fill:#2724d666}.fill-navy-500\\/70{fill:#2724d6b3}.fill-navy-700{fill:#0000b8}.fill-lime-50{fill:#ecf6e7}.fill-lime-100{fill:#c5e3b6}.fill-lime-200{fill:#9ed186}.fill-lime-300{fill:#77bf56}.fill-lime-500{fill:#50ac25}.fill-lime-500\\/20{fill:#50ac2533}.fill-lime-500\\/40{fill:#50ac2566}.fill-lime-500\\/70{fill:#50ac25b3}.fill-lime-700{fill:#238900}.fill-magenta-50{fill:#fbe9f1}.fill-magenta-100{fill:#f4bed6}.fill-magenta-200{fill:#ed93bb}.fill-magenta-300{fill:#e668a0}.fill-magenta-500{fill:#df3d85}.fill-magenta-500\\/20{fill:#df3d8533}.fill-magenta-500\\/40{fill:#df3d8566}.fill-magenta-500\\/70{fill:#df3d85b3}.fill-magenta-700{fill:#c10d5d}.stroke-white-50{stroke:#fff}.stroke-white-100{stroke:#f7f7f7}.stroke-white-200{stroke:#eee}.stroke-white-300{stroke:#e5e5e5}.stroke-white-500{stroke:#dadada}.stroke-white-500\\/20{stroke:#dadada33}.stroke-white-500\\/40{stroke:#dadada66}.stroke-white-500\\/70{stroke:#dadadab3}.stroke-white-700{stroke:#ccc}.stroke-black-50{stroke:#aaa}.stroke-black-100{stroke:#919191}.stroke-black-200{stroke:#6c6c6c}.stroke-black-300{stroke:#424242}.stroke-black-500{stroke:#2f2f2f}.stroke-black-500\\/20{stroke:#2f2f2f33}.stroke-black-500\\/40{stroke:#2f2f2f66}.stroke-black-500\\/70{stroke:#2f2f2fb3}.stroke-black-700{stroke:#1d1d1d}.stroke-blue-50{stroke:#e9effd}.stroke-blue-100{stroke:#bed0f9}.stroke-blue-200{stroke:#92b1f5}.stroke-blue-300{stroke:#6692f1}.stroke-blue-500{stroke:#3b73ed}.stroke-blue-500\\/20{stroke:#3b73ed33}.stroke-blue-500\\/40{stroke:#3b73ed66}.stroke-blue-500\\/70{stroke:#3b73edb3}.stroke-blue-700{stroke:#0b49d1}.stroke-blue-900{stroke:#00179e}.stroke-red-50{stroke:#fbe9e9}.stroke-red-100{stroke:#f4bebe}.stroke-red-200{stroke:#ed9292}.stroke-red-300{stroke:#e66767}.stroke-red-500{stroke:#df3c3c}.stroke-red-500\\/20{stroke:#df3c3c33}.stroke-red-500\\/40{stroke:#df3c3c66}.stroke-red-500\\/70{stroke:#df3c3cb3}.stroke-red-700{stroke:#c20c0c}.stroke-green-50{stroke:#e7f4f3}.stroke-green-100{stroke:#b6dfdb}.stroke-green-200{stroke:#86c9c3}.stroke-green-300{stroke:#56b4ac}.stroke-green-500{stroke:#259f94}.stroke-green-500\\/20{stroke:#259f9433}.stroke-green-500\\/40{stroke:#259f9466}.stroke-green-500\\/70{stroke:#259f94b3}.stroke-green-700{stroke:#007a6e}.stroke-yellow-50{stroke:#fef4e8}.stroke-yellow-100{stroke:#fddeb9}.stroke-yellow-200{stroke:#fbc88b}.stroke-yellow-300{stroke:#fab15c}.stroke-yellow-500{stroke:#f89b2e}.stroke-yellow-500\\/20{stroke:#f89b2e33}.stroke-yellow-500\\/40{stroke:#f89b2e66}.stroke-yellow-500\\/70{stroke:#f89b2eb3}.stroke-yellow-700{stroke:#de7700}.stroke-purple-50{stroke:#f4ebfd}.stroke-purple-100{stroke:#dfc2f9}.stroke-purple-200{stroke:#c999f4}.stroke-purple-300{stroke:#b370f0}.stroke-purple-500{stroke:#9e47ec}.stroke-purple-500\\/20{stroke:#9e47ec33}.stroke-purple-500\\/40{stroke:#9e47ec66}.stroke-purple-500\\/70{stroke:#9e47ecb3}.stroke-purple-700{stroke:#7919d0}.stroke-orange-50{stroke:#ffefea}.stroke-orange-100{stroke:#ffcfc0}.stroke-orange-200{stroke:#ffb097}.stroke-orange-300{stroke:#ff906d}.stroke-orange-500{stroke:#ff7043}.stroke-orange-500\\/20{stroke:#ff704333}.stroke-orange-500\\/40{stroke:#ff704366}.stroke-orange-500\\/70{stroke:#ff7043b3}.stroke-orange-700{stroke:#e54715}.stroke-azure-50{stroke:#e5f7fc}.stroke-azure-100{stroke:#b2e6f7}.stroke-azure-200{stroke:#80d6f1}.stroke-azure-300{stroke:#4dc5eb}.stroke-azure-500{stroke:#1ab5e6}.stroke-azure-500\\/20{stroke:#1ab5e633}.stroke-azure-500\\/40{stroke:#1ab5e666}.stroke-azure-500\\/70{stroke:#1ab5e6b3}.stroke-azure-700{stroke:#0093c9}.stroke-gold-50{stroke:#faf3e6}.stroke-gold-100{stroke:#efdcb4}.stroke-gold-200{stroke:#e4c481}.stroke-gold-300{stroke:#daad4f}.stroke-gold-500{stroke:#cf961d}.stroke-gold-500\\/20{stroke:#cf961d33}.stroke-gold-500\\/40{stroke:#cf961d66}.stroke-gold-500\\/70{stroke:#cf961db3}.stroke-gold-700{stroke:#b07000}.stroke-brown-50{stroke:#f1ede9}.stroke-brown-100{stroke:#d6c9bd}.stroke-brown-200{stroke:#bca691}.stroke-brown-300{stroke:#a08266}.stroke-brown-500{stroke:#865e3a}.stroke-brown-500\\/20{stroke:#865e3a33}.stroke-brown-500\\/40{stroke:#865e3a66}.stroke-brown-500\\/70{stroke:#865e3ab3}.stroke-brown-700{stroke:#5f330a}.stroke-navy-50{stroke:#e7e7fa}.stroke-navy-100{stroke:#b7b6f1}.stroke-navy-200{stroke:#8785e8}.stroke-navy-300{stroke:#5755df}.stroke-navy-500{stroke:#2724d6}.stroke-navy-500\\/20{stroke:#2724d633}.stroke-navy-500\\/40{stroke:#2724d666}.stroke-navy-500\\/70{stroke:#2724d6b3}.stroke-navy-700{stroke:#0000b8}.stroke-lime-50{stroke:#ecf6e7}.stroke-lime-100{stroke:#c5e3b6}.stroke-lime-200{stroke:#9ed186}.stroke-lime-300{stroke:#77bf56}.stroke-lime-500{stroke:#50ac25}.stroke-lime-500\\/20{stroke:#50ac2533}.stroke-lime-500\\/40{stroke:#50ac2566}.stroke-lime-500\\/70{stroke:#50ac25b3}.stroke-lime-700{stroke:#238900}.stroke-magenta-50{stroke:#fbe9f1}.stroke-magenta-100{stroke:#f4bed6}.stroke-magenta-200{stroke:#ed93bb}.stroke-magenta-300{stroke:#e668a0}.stroke-magenta-500{stroke:#df3d85}.stroke-magenta-500\\/20{stroke:#df3d8533}.stroke-magenta-500\\/40{stroke:#df3d8566}.stroke-magenta-500\\/70{stroke:#df3d85b3}.stroke-magenta-700{stroke:#c10d5d}.hover\\:text-white-50:hover{color:#fff}.hover\\:text-white-100:hover{color:#f7f7f7}.hover\\:text-white-200:hover{color:#eee}.hover\\:text-white-300:hover{color:#e5e5e5}.hover\\:text-white-500:hover{color:#dadada}.hover\\:text-white-500:hover\\/20{color:#dadada33}.hover\\:text-white-500:hover\\/40{color:#dadada66}.hover\\:text-white-500:hover\\/70{color:#dadadab3}.hover\\:text-white-700:hover{color:#ccc}.hover\\:text-black-50:hover{color:#aaa}.hover\\:text-black-100:hover{color:#919191}.hover\\:text-black-200:hover{color:#6c6c6c}.hover\\:text-black-300:hover{color:#424242}.hover\\:text-black-500:hover{color:#2f2f2f}.hover\\:text-black-500:hover\\/20{color:#2f2f2f33}.hover\\:text-black-500:hover\\/40{color:#2f2f2f66}.hover\\:text-black-500:hover\\/70{color:#2f2f2fb3}.hover\\:text-black-700:hover{color:#1d1d1d}.hover\\:text-blue-50:hover{color:#e9effd}.hover\\:text-blue-100:hover{color:#bed0f9}.hover\\:text-blue-200:hover{color:#92b1f5}.hover\\:text-blue-300:hover{color:#6692f1}.hover\\:text-blue-500:hover{color:#3b73ed}.hover\\:text-blue-500:hover\\/20{color:#3b73ed33}.hover\\:text-blue-500:hover\\/40{color:#3b73ed66}.hover\\:text-blue-500:hover\\/70{color:#3b73edb3}.hover\\:text-blue-700:hover{color:#0b49d1}.hover\\:text-blue-900:hover{color:#00179e}.hover\\:text-red-50:hover{color:#fbe9e9}.hover\\:text-red-100:hover{color:#f4bebe}.hover\\:text-red-200:hover{color:#ed9292}.hover\\:text-red-300:hover{color:#e66767}.hover\\:text-red-500:hover{color:#df3c3c}.hover\\:text-red-500:hover\\/20{color:#df3c3c33}.hover\\:text-red-500:hover\\/40{color:#df3c3c66}.hover\\:text-red-500:hover\\/70{color:#df3c3cb3}.hover\\:text-red-700:hover{color:#c20c0c}.hover\\:text-green-50:hover{color:#e7f4f3}.hover\\:text-green-100:hover{color:#b6dfdb}.hover\\:text-green-200:hover{color:#86c9c3}.hover\\:text-green-300:hover{color:#56b4ac}.hover\\:text-green-500:hover{color:#259f94}.hover\\:text-green-500:hover\\/20{color:#259f9433}.hover\\:text-green-500:hover\\/40{color:#259f9466}.hover\\:text-green-500:hover\\/70{color:#259f94b3}.hover\\:text-green-700:hover{color:#007a6e}.hover\\:text-yellow-50:hover{color:#fef4e8}.hover\\:text-yellow-100:hover{color:#fddeb9}.hover\\:text-yellow-200:hover{color:#fbc88b}.hover\\:text-yellow-300:hover{color:#fab15c}.hover\\:text-yellow-500:hover{color:#f89b2e}.hover\\:text-yellow-500:hover\\/20{color:#f89b2e33}.hover\\:text-yellow-500:hover\\/40{color:#f89b2e66}.hover\\:text-yellow-500:hover\\/70{color:#f89b2eb3}.hover\\:text-yellow-700:hover{color:#de7700}.hover\\:text-purple-50:hover{color:#f4ebfd}.hover\\:text-purple-100:hover{color:#dfc2f9}.hover\\:text-purple-200:hover{color:#c999f4}.hover\\:text-purple-300:hover{color:#b370f0}.hover\\:text-purple-500:hover{color:#9e47ec}.hover\\:text-purple-500:hover\\/20{color:#9e47ec33}.hover\\:text-purple-500:hover\\/40{color:#9e47ec66}.hover\\:text-purple-500:hover\\/70{color:#9e47ecb3}.hover\\:text-purple-700:hover{color:#7919d0}.hover\\:text-orange-50:hover{color:#ffefea}.hover\\:text-orange-100:hover{color:#ffcfc0}.hover\\:text-orange-200:hover{color:#ffb097}.hover\\:text-orange-300:hover{color:#ff906d}.hover\\:text-orange-500:hover{color:#ff7043}.hover\\:text-orange-500:hover\\/20{color:#ff704333}.hover\\:text-orange-500:hover\\/40{color:#ff704366}.hover\\:text-orange-500:hover\\/70{color:#ff7043b3}.hover\\:text-orange-700:hover{color:#e54715}.hover\\:text-azure-50:hover{color:#e5f7fc}.hover\\:text-azure-100:hover{color:#b2e6f7}.hover\\:text-azure-200:hover{color:#80d6f1}.hover\\:text-azure-300:hover{color:#4dc5eb}.hover\\:text-azure-500:hover{color:#1ab5e6}.hover\\:text-azure-500:hover\\/20{color:#1ab5e633}.hover\\:text-azure-500:hover\\/40{color:#1ab5e666}.hover\\:text-azure-500:hover\\/70{color:#1ab5e6b3}.hover\\:text-azure-700:hover{color:#0093c9}.hover\\:text-gold-50:hover{color:#faf3e6}.hover\\:text-gold-100:hover{color:#efdcb4}.hover\\:text-gold-200:hover{color:#e4c481}.hover\\:text-gold-300:hover{color:#daad4f}.hover\\:text-gold-500:hover{color:#cf961d}.hover\\:text-gold-500:hover\\/20{color:#cf961d33}.hover\\:text-gold-500:hover\\/40{color:#cf961d66}.hover\\:text-gold-500:hover\\/70{color:#cf961db3}.hover\\:text-gold-700:hover{color:#b07000}.hover\\:text-brown-50:hover{color:#f1ede9}.hover\\:text-brown-100:hover{color:#d6c9bd}.hover\\:text-brown-200:hover{color:#bca691}.hover\\:text-brown-300:hover{color:#a08266}.hover\\:text-brown-500:hover{color:#865e3a}.hover\\:text-brown-500:hover\\/20{color:#865e3a33}.hover\\:text-brown-500:hover\\/40{color:#865e3a66}.hover\\:text-brown-500:hover\\/70{color:#865e3ab3}.hover\\:text-brown-700:hover{color:#5f330a}.hover\\:text-navy-50:hover{color:#e7e7fa}.hover\\:text-navy-100:hover{color:#b7b6f1}.hover\\:text-navy-200:hover{color:#8785e8}.hover\\:text-navy-300:hover{color:#5755df}.hover\\:text-navy-500:hover{color:#2724d6}.hover\\:text-navy-500:hover\\/20{color:#2724d633}.hover\\:text-navy-500:hover\\/40{color:#2724d666}.hover\\:text-navy-500:hover\\/70{color:#2724d6b3}.hover\\:text-navy-700:hover{color:#0000b8}.hover\\:text-lime-50:hover{color:#ecf6e7}.hover\\:text-lime-100:hover{color:#c5e3b6}.hover\\:text-lime-200:hover{color:#9ed186}.hover\\:text-lime-300:hover{color:#77bf56}.hover\\:text-lime-500:hover{color:#50ac25}.hover\\:text-lime-500:hover\\/20{color:#50ac2533}.hover\\:text-lime-500:hover\\/40{color:#50ac2566}.hover\\:text-lime-500:hover\\/70{color:#50ac25b3}.hover\\:text-lime-700:hover{color:#238900}.hover\\:text-magenta-50:hover{color:#fbe9f1}.hover\\:text-magenta-100:hover{color:#f4bed6}.hover\\:text-magenta-200:hover{color:#ed93bb}.hover\\:text-magenta-300:hover{color:#e668a0}.hover\\:text-magenta-500:hover{color:#df3d85}.hover\\:text-magenta-500:hover\\/20{color:#df3d8533}.hover\\:text-magenta-500:hover\\/40{color:#df3d8566}.hover\\:text-magenta-500:hover\\/70{color:#df3d85b3}.hover\\:text-magenta-700:hover{color:#c10d5d}.hover\\:bg-white-50:hover{background-color:#fff}.hover\\:bg-white-100:hover{background-color:#f7f7f7}.hover\\:bg-white-200:hover{background-color:#eee}.hover\\:bg-white-300:hover{background-color:#e5e5e5}.hover\\:bg-white-500:hover{background-color:#dadada}.hover\\:bg-white-500:hover\\/20{background-color:#dadada33}.hover\\:bg-white-500:hover\\/40{background-color:#dadada66}.hover\\:bg-white-500:hover\\/70{background-color:#dadadab3}.hover\\:bg-white-700:hover{background-color:#ccc}.hover\\:bg-black-50:hover{background-color:#aaa}.hover\\:bg-black-100:hover{background-color:#919191}.hover\\:bg-black-200:hover{background-color:#6c6c6c}.hover\\:bg-black-300:hover{background-color:#424242}.hover\\:bg-black-500:hover{background-color:#2f2f2f}.hover\\:bg-black-500:hover\\/20{background-color:#2f2f2f33}.hover\\:bg-black-500:hover\\/40{background-color:#2f2f2f66}.hover\\:bg-black-500:hover\\/70{background-color:#2f2f2fb3}.hover\\:bg-black-700:hover{background-color:#1d1d1d}.hover\\:bg-blue-50:hover{background-color:#e9effd}.hover\\:bg-blue-100:hover{background-color:#bed0f9}.hover\\:bg-blue-200:hover{background-color:#92b1f5}.hover\\:bg-blue-300:hover{background-color:#6692f1}.hover\\:bg-blue-500:hover{background-color:#3b73ed}.hover\\:bg-blue-500:hover\\/20{background-color:#3b73ed33}.hover\\:bg-blue-500:hover\\/40{background-color:#3b73ed66}.hover\\:bg-blue-500:hover\\/70{background-color:#3b73edb3}.hover\\:bg-blue-700:hover{background-color:#0b49d1}.hover\\:bg-blue-900:hover{background-color:#00179e}.hover\\:bg-red-50:hover{background-color:#fbe9e9}.hover\\:bg-red-100:hover{background-color:#f4bebe}.hover\\:bg-red-200:hover{background-color:#ed9292}.hover\\:bg-red-300:hover{background-color:#e66767}.hover\\:bg-red-500:hover{background-color:#df3c3c}.hover\\:bg-red-500:hover\\/20{background-color:#df3c3c33}.hover\\:bg-red-500:hover\\/40{background-color:#df3c3c66}.hover\\:bg-red-500:hover\\/70{background-color:#df3c3cb3}.hover\\:bg-red-700:hover{background-color:#c20c0c}.hover\\:bg-green-50:hover{background-color:#e7f4f3}.hover\\:bg-green-100:hover{background-color:#b6dfdb}.hover\\:bg-green-200:hover{background-color:#86c9c3}.hover\\:bg-green-300:hover{background-color:#56b4ac}.hover\\:bg-green-500:hover{background-color:#259f94}.hover\\:bg-green-500:hover\\/20{background-color:#259f9433}.hover\\:bg-green-500:hover\\/40{background-color:#259f9466}.hover\\:bg-green-500:hover\\/70{background-color:#259f94b3}.hover\\:bg-green-700:hover{background-color:#007a6e}.hover\\:bg-yellow-50:hover{background-color:#fef4e8}.hover\\:bg-yellow-100:hover{background-color:#fddeb9}.hover\\:bg-yellow-200:hover{background-color:#fbc88b}.hover\\:bg-yellow-300:hover{background-color:#fab15c}.hover\\:bg-yellow-500:hover{background-color:#f89b2e}.hover\\:bg-yellow-500:hover\\/20{background-color:#f89b2e33}.hover\\:bg-yellow-500:hover\\/40{background-color:#f89b2e66}.hover\\:bg-yellow-500:hover\\/70{background-color:#f89b2eb3}.hover\\:bg-yellow-700:hover{background-color:#de7700}.hover\\:bg-purple-50:hover{background-color:#f4ebfd}.hover\\:bg-purple-100:hover{background-color:#dfc2f9}.hover\\:bg-purple-200:hover{background-color:#c999f4}.hover\\:bg-purple-300:hover{background-color:#b370f0}.hover\\:bg-purple-500:hover{background-color:#9e47ec}.hover\\:bg-purple-500:hover\\/20{background-color:#9e47ec33}.hover\\:bg-purple-500:hover\\/40{background-color:#9e47ec66}.hover\\:bg-purple-500:hover\\/70{background-color:#9e47ecb3}.hover\\:bg-purple-700:hover{background-color:#7919d0}.hover\\:bg-orange-50:hover{background-color:#ffefea}.hover\\:bg-orange-100:hover{background-color:#ffcfc0}.hover\\:bg-orange-200:hover{background-color:#ffb097}.hover\\:bg-orange-300:hover{background-color:#ff906d}.hover\\:bg-orange-500:hover{background-color:#ff7043}.hover\\:bg-orange-500:hover\\/20{background-color:#ff704333}.hover\\:bg-orange-500:hover\\/40{background-color:#ff704366}.hover\\:bg-orange-500:hover\\/70{background-color:#ff7043b3}.hover\\:bg-orange-700:hover{background-color:#e54715}.hover\\:bg-azure-50:hover{background-color:#e5f7fc}.hover\\:bg-azure-100:hover{background-color:#b2e6f7}.hover\\:bg-azure-200:hover{background-color:#80d6f1}.hover\\:bg-azure-300:hover{background-color:#4dc5eb}.hover\\:bg-azure-500:hover{background-color:#1ab5e6}.hover\\:bg-azure-500:hover\\/20{background-color:#1ab5e633}.hover\\:bg-azure-500:hover\\/40{background-color:#1ab5e666}.hover\\:bg-azure-500:hover\\/70{background-color:#1ab5e6b3}.hover\\:bg-azure-700:hover{background-color:#0093c9}.hover\\:bg-gold-50:hover{background-color:#faf3e6}.hover\\:bg-gold-100:hover{background-color:#efdcb4}.hover\\:bg-gold-200:hover{background-color:#e4c481}.hover\\:bg-gold-300:hover{background-color:#daad4f}.hover\\:bg-gold-500:hover{background-color:#cf961d}.hover\\:bg-gold-500:hover\\/20{background-color:#cf961d33}.hover\\:bg-gold-500:hover\\/40{background-color:#cf961d66}.hover\\:bg-gold-500:hover\\/70{background-color:#cf961db3}.hover\\:bg-gold-700:hover{background-color:#b07000}.hover\\:bg-brown-50:hover{background-color:#f1ede9}.hover\\:bg-brown-100:hover{background-color:#d6c9bd}.hover\\:bg-brown-200:hover{background-color:#bca691}.hover\\:bg-brown-300:hover{background-color:#a08266}.hover\\:bg-brown-500:hover{background-color:#865e3a}.hover\\:bg-brown-500:hover\\/20{background-color:#865e3a33}.hover\\:bg-brown-500:hover\\/40{background-color:#865e3a66}.hover\\:bg-brown-500:hover\\/70{background-color:#865e3ab3}.hover\\:bg-brown-700:hover{background-color:#5f330a}.hover\\:bg-navy-50:hover{background-color:#e7e7fa}.hover\\:bg-navy-100:hover{background-color:#b7b6f1}.hover\\:bg-navy-200:hover{background-color:#8785e8}.hover\\:bg-navy-300:hover{background-color:#5755df}.hover\\:bg-navy-500:hover{background-color:#2724d6}.hover\\:bg-navy-500:hover\\/20{background-color:#2724d633}.hover\\:bg-navy-500:hover\\/40{background-color:#2724d666}.hover\\:bg-navy-500:hover\\/70{background-color:#2724d6b3}.hover\\:bg-navy-700:hover{background-color:#0000b8}.hover\\:bg-lime-50:hover{background-color:#ecf6e7}.hover\\:bg-lime-100:hover{background-color:#c5e3b6}.hover\\:bg-lime-200:hover{background-color:#9ed186}.hover\\:bg-lime-300:hover{background-color:#77bf56}.hover\\:bg-lime-500:hover{background-color:#50ac25}.hover\\:bg-lime-500:hover\\/20{background-color:#50ac2533}.hover\\:bg-lime-500:hover\\/40{background-color:#50ac2566}.hover\\:bg-lime-500:hover\\/70{background-color:#50ac25b3}.hover\\:bg-lime-700:hover{background-color:#238900}.hover\\:bg-magenta-50:hover{background-color:#fbe9f1}.hover\\:bg-magenta-100:hover{background-color:#f4bed6}.hover\\:bg-magenta-200:hover{background-color:#ed93bb}.hover\\:bg-magenta-300:hover{background-color:#e668a0}.hover\\:bg-magenta-500:hover{background-color:#df3d85}.hover\\:bg-magenta-500:hover\\/20{background-color:#df3d8533}.hover\\:bg-magenta-500:hover\\/40{background-color:#df3d8566}.hover\\:bg-magenta-500:hover\\/70{background-color:#df3d85b3}.hover\\:bg-magenta-700:hover{background-color:#c10d5d}.focus\\:text-white-50:focus-visible{color:#fff}.focus\\:text-white-100:focus-visible{color:#f7f7f7}.focus\\:text-white-200:focus-visible{color:#eee}.focus\\:text-white-300:focus-visible{color:#e5e5e5}.focus\\:text-white-500:focus-visible{color:#dadada}.focus\\:text-white-500:focus-visible\\/20{color:#dadada33}.focus\\:text-white-500:focus-visible\\/40{color:#dadada66}.focus\\:text-white-500:focus-visible\\/70{color:#dadadab3}.focus\\:text-white-700:focus-visible{color:#ccc}.focus\\:text-black-50:focus-visible{color:#aaa}.focus\\:text-black-100:focus-visible{color:#919191}.focus\\:text-black-200:focus-visible{color:#6c6c6c}.focus\\:text-black-300:focus-visible{color:#424242}.focus\\:text-black-500:focus-visible{color:#2f2f2f}.focus\\:text-black-500:focus-visible\\/20{color:#2f2f2f33}.focus\\:text-black-500:focus-visible\\/40{color:#2f2f2f66}.focus\\:text-black-500:focus-visible\\/70{color:#2f2f2fb3}.focus\\:text-black-700:focus-visible{color:#1d1d1d}.focus\\:text-blue-50:focus-visible{color:#e9effd}.focus\\:text-blue-100:focus-visible{color:#bed0f9}.focus\\:text-blue-200:focus-visible{color:#92b1f5}.focus\\:text-blue-300:focus-visible{color:#6692f1}.focus\\:text-blue-500:focus-visible{color:#3b73ed}.focus\\:text-blue-500:focus-visible\\/20{color:#3b73ed33}.focus\\:text-blue-500:focus-visible\\/40{color:#3b73ed66}.focus\\:text-blue-500:focus-visible\\/70{color:#3b73edb3}.focus\\:text-blue-700:focus-visible{color:#0b49d1}.focus\\:text-blue-900:focus-visible{color:#00179e}.focus\\:text-red-50:focus-visible{color:#fbe9e9}.focus\\:text-red-100:focus-visible{color:#f4bebe}.focus\\:text-red-200:focus-visible{color:#ed9292}.focus\\:text-red-300:focus-visible{color:#e66767}.focus\\:text-red-500:focus-visible{color:#df3c3c}.focus\\:text-red-500:focus-visible\\/20{color:#df3c3c33}.focus\\:text-red-500:focus-visible\\/40{color:#df3c3c66}.focus\\:text-red-500:focus-visible\\/70{color:#df3c3cb3}.focus\\:text-red-700:focus-visible{color:#c20c0c}.focus\\:text-green-50:focus-visible{color:#e7f4f3}.focus\\:text-green-100:focus-visible{color:#b6dfdb}.focus\\:text-green-200:focus-visible{color:#86c9c3}.focus\\:text-green-300:focus-visible{color:#56b4ac}.focus\\:text-green-500:focus-visible{color:#259f94}.focus\\:text-green-500:focus-visible\\/20{color:#259f9433}.focus\\:text-green-500:focus-visible\\/40{color:#259f9466}.focus\\:text-green-500:focus-visible\\/70{color:#259f94b3}.focus\\:text-green-700:focus-visible{color:#007a6e}.focus\\:text-yellow-50:focus-visible{color:#fef4e8}.focus\\:text-yellow-100:focus-visible{color:#fddeb9}.focus\\:text-yellow-200:focus-visible{color:#fbc88b}.focus\\:text-yellow-300:focus-visible{color:#fab15c}.focus\\:text-yellow-500:focus-visible{color:#f89b2e}.focus\\:text-yellow-500:focus-visible\\/20{color:#f89b2e33}.focus\\:text-yellow-500:focus-visible\\/40{color:#f89b2e66}.focus\\:text-yellow-500:focus-visible\\/70{color:#f89b2eb3}.focus\\:text-yellow-700:focus-visible{color:#de7700}.focus\\:text-purple-50:focus-visible{color:#f4ebfd}.focus\\:text-purple-100:focus-visible{color:#dfc2f9}.focus\\:text-purple-200:focus-visible{color:#c999f4}.focus\\:text-purple-300:focus-visible{color:#b370f0}.focus\\:text-purple-500:focus-visible{color:#9e47ec}.focus\\:text-purple-500:focus-visible\\/20{color:#9e47ec33}.focus\\:text-purple-500:focus-visible\\/40{color:#9e47ec66}.focus\\:text-purple-500:focus-visible\\/70{color:#9e47ecb3}.focus\\:text-purple-700:focus-visible{color:#7919d0}.focus\\:text-orange-50:focus-visible{color:#ffefea}.focus\\:text-orange-100:focus-visible{color:#ffcfc0}.focus\\:text-orange-200:focus-visible{color:#ffb097}.focus\\:text-orange-300:focus-visible{color:#ff906d}.focus\\:text-orange-500:focus-visible{color:#ff7043}.focus\\:text-orange-500:focus-visible\\/20{color:#ff704333}.focus\\:text-orange-500:focus-visible\\/40{color:#ff704366}.focus\\:text-orange-500:focus-visible\\/70{color:#ff7043b3}.focus\\:text-orange-700:focus-visible{color:#e54715}.focus\\:text-azure-50:focus-visible{color:#e5f7fc}.focus\\:text-azure-100:focus-visible{color:#b2e6f7}.focus\\:text-azure-200:focus-visible{color:#80d6f1}.focus\\:text-azure-300:focus-visible{color:#4dc5eb}.focus\\:text-azure-500:focus-visible{color:#1ab5e6}.focus\\:text-azure-500:focus-visible\\/20{color:#1ab5e633}.focus\\:text-azure-500:focus-visible\\/40{color:#1ab5e666}.focus\\:text-azure-500:focus-visible\\/70{color:#1ab5e6b3}.focus\\:text-azure-700:focus-visible{color:#0093c9}.focus\\:text-gold-50:focus-visible{color:#faf3e6}.focus\\:text-gold-100:focus-visible{color:#efdcb4}.focus\\:text-gold-200:focus-visible{color:#e4c481}.focus\\:text-gold-300:focus-visible{color:#daad4f}.focus\\:text-gold-500:focus-visible{color:#cf961d}.focus\\:text-gold-500:focus-visible\\/20{color:#cf961d33}.focus\\:text-gold-500:focus-visible\\/40{color:#cf961d66}.focus\\:text-gold-500:focus-visible\\/70{color:#cf961db3}.focus\\:text-gold-700:focus-visible{color:#b07000}.focus\\:text-brown-50:focus-visible{color:#f1ede9}.focus\\:text-brown-100:focus-visible{color:#d6c9bd}.focus\\:text-brown-200:focus-visible{color:#bca691}.focus\\:text-brown-300:focus-visible{color:#a08266}.focus\\:text-brown-500:focus-visible{color:#865e3a}.focus\\:text-brown-500:focus-visible\\/20{color:#865e3a33}.focus\\:text-brown-500:focus-visible\\/40{color:#865e3a66}.focus\\:text-brown-500:focus-visible\\/70{color:#865e3ab3}.focus\\:text-brown-700:focus-visible{color:#5f330a}.focus\\:text-navy-50:focus-visible{color:#e7e7fa}.focus\\:text-navy-100:focus-visible{color:#b7b6f1}.focus\\:text-navy-200:focus-visible{color:#8785e8}.focus\\:text-navy-300:focus-visible{color:#5755df}.focus\\:text-navy-500:focus-visible{color:#2724d6}.focus\\:text-navy-500:focus-visible\\/20{color:#2724d633}.focus\\:text-navy-500:focus-visible\\/40{color:#2724d666}.focus\\:text-navy-500:focus-visible\\/70{color:#2724d6b3}.focus\\:text-navy-700:focus-visible{color:#0000b8}.focus\\:text-lime-50:focus-visible{color:#ecf6e7}.focus\\:text-lime-100:focus-visible{color:#c5e3b6}.focus\\:text-lime-200:focus-visible{color:#9ed186}.focus\\:text-lime-300:focus-visible{color:#77bf56}.focus\\:text-lime-500:focus-visible{color:#50ac25}.focus\\:text-lime-500:focus-visible\\/20{color:#50ac2533}.focus\\:text-lime-500:focus-visible\\/40{color:#50ac2566}.focus\\:text-lime-500:focus-visible\\/70{color:#50ac25b3}.focus\\:text-lime-700:focus-visible{color:#238900}.focus\\:text-magenta-50:focus-visible{color:#fbe9f1}.focus\\:text-magenta-100:focus-visible{color:#f4bed6}.focus\\:text-magenta-200:focus-visible{color:#ed93bb}.focus\\:text-magenta-300:focus-visible{color:#e668a0}.focus\\:text-magenta-500:focus-visible{color:#df3d85}.focus\\:text-magenta-500:focus-visible\\/20{color:#df3d8533}.focus\\:text-magenta-500:focus-visible\\/40{color:#df3d8566}.focus\\:text-magenta-500:focus-visible\\/70{color:#df3d85b3}.focus\\:text-magenta-700:focus-visible{color:#c10d5d}.focus\\:bg-white-50:focus-visible{background-color:#fff}.focus\\:bg-white-100:focus-visible{background-color:#f7f7f7}.focus\\:bg-white-200:focus-visible{background-color:#eee}.focus\\:bg-white-300:focus-visible{background-color:#e5e5e5}.focus\\:bg-white-500:focus-visible{background-color:#dadada}.focus\\:bg-white-500:focus-visible\\/20{background-color:#dadada33}.focus\\:bg-white-500:focus-visible\\/40{background-color:#dadada66}.focus\\:bg-white-500:focus-visible\\/70{background-color:#dadadab3}.focus\\:bg-white-700:focus-visible{background-color:#ccc}.focus\\:bg-black-50:focus-visible{background-color:#aaa}.focus\\:bg-black-100:focus-visible{background-color:#919191}.focus\\:bg-black-200:focus-visible{background-color:#6c6c6c}.focus\\:bg-black-300:focus-visible{background-color:#424242}.focus\\:bg-black-500:focus-visible{background-color:#2f2f2f}.focus\\:bg-black-500:focus-visible\\/20{background-color:#2f2f2f33}.focus\\:bg-black-500:focus-visible\\/40{background-color:#2f2f2f66}.focus\\:bg-black-500:focus-visible\\/70{background-color:#2f2f2fb3}.focus\\:bg-black-700:focus-visible{background-color:#1d1d1d}.focus\\:bg-blue-50:focus-visible{background-color:#e9effd}.focus\\:bg-blue-100:focus-visible{background-color:#bed0f9}.focus\\:bg-blue-200:focus-visible{background-color:#92b1f5}.focus\\:bg-blue-300:focus-visible{background-color:#6692f1}.focus\\:bg-blue-500:focus-visible{background-color:#3b73ed}.focus\\:bg-blue-500:focus-visible\\/20{background-color:#3b73ed33}.focus\\:bg-blue-500:focus-visible\\/40{background-color:#3b73ed66}.focus\\:bg-blue-500:focus-visible\\/70{background-color:#3b73edb3}.focus\\:bg-blue-700:focus-visible{background-color:#0b49d1}.focus\\:bg-blue-900:focus-visible{background-color:#00179e}.focus\\:bg-red-50:focus-visible{background-color:#fbe9e9}.focus\\:bg-red-100:focus-visible{background-color:#f4bebe}.focus\\:bg-red-200:focus-visible{background-color:#ed9292}.focus\\:bg-red-300:focus-visible{background-color:#e66767}.focus\\:bg-red-500:focus-visible{background-color:#df3c3c}.focus\\:bg-red-500:focus-visible\\/20{background-color:#df3c3c33}.focus\\:bg-red-500:focus-visible\\/40{background-color:#df3c3c66}.focus\\:bg-red-500:focus-visible\\/70{background-color:#df3c3cb3}.focus\\:bg-red-700:focus-visible{background-color:#c20c0c}.focus\\:bg-green-50:focus-visible{background-color:#e7f4f3}.focus\\:bg-green-100:focus-visible{background-color:#b6dfdb}.focus\\:bg-green-200:focus-visible{background-color:#86c9c3}.focus\\:bg-green-300:focus-visible{background-color:#56b4ac}.focus\\:bg-green-500:focus-visible{background-color:#259f94}.focus\\:bg-green-500:focus-visible\\/20{background-color:#259f9433}.focus\\:bg-green-500:focus-visible\\/40{background-color:#259f9466}.focus\\:bg-green-500:focus-visible\\/70{background-color:#259f94b3}.focus\\:bg-green-700:focus-visible{background-color:#007a6e}.focus\\:bg-yellow-50:focus-visible{background-color:#fef4e8}.focus\\:bg-yellow-100:focus-visible{background-color:#fddeb9}.focus\\:bg-yellow-200:focus-visible{background-color:#fbc88b}.focus\\:bg-yellow-300:focus-visible{background-color:#fab15c}.focus\\:bg-yellow-500:focus-visible{background-color:#f89b2e}.focus\\:bg-yellow-500:focus-visible\\/20{background-color:#f89b2e33}.focus\\:bg-yellow-500:focus-visible\\/40{background-color:#f89b2e66}.focus\\:bg-yellow-500:focus-visible\\/70{background-color:#f89b2eb3}.focus\\:bg-yellow-700:focus-visible{background-color:#de7700}.focus\\:bg-purple-50:focus-visible{background-color:#f4ebfd}.focus\\:bg-purple-100:focus-visible{background-color:#dfc2f9}.focus\\:bg-purple-200:focus-visible{background-color:#c999f4}.focus\\:bg-purple-300:focus-visible{background-color:#b370f0}.focus\\:bg-purple-500:focus-visible{background-color:#9e47ec}.focus\\:bg-purple-500:focus-visible\\/20{background-color:#9e47ec33}.focus\\:bg-purple-500:focus-visible\\/40{background-color:#9e47ec66}.focus\\:bg-purple-500:focus-visible\\/70{background-color:#9e47ecb3}.focus\\:bg-purple-700:focus-visible{background-color:#7919d0}.focus\\:bg-orange-50:focus-visible{background-color:#ffefea}.focus\\:bg-orange-100:focus-visible{background-color:#ffcfc0}.focus\\:bg-orange-200:focus-visible{background-color:#ffb097}.focus\\:bg-orange-300:focus-visible{background-color:#ff906d}.focus\\:bg-orange-500:focus-visible{background-color:#ff7043}.focus\\:bg-orange-500:focus-visible\\/20{background-color:#ff704333}.focus\\:bg-orange-500:focus-visible\\/40{background-color:#ff704366}.focus\\:bg-orange-500:focus-visible\\/70{background-color:#ff7043b3}.focus\\:bg-orange-700:focus-visible{background-color:#e54715}.focus\\:bg-azure-50:focus-visible{background-color:#e5f7fc}.focus\\:bg-azure-100:focus-visible{background-color:#b2e6f7}.focus\\:bg-azure-200:focus-visible{background-color:#80d6f1}.focus\\:bg-azure-300:focus-visible{background-color:#4dc5eb}.focus\\:bg-azure-500:focus-visible{background-color:#1ab5e6}.focus\\:bg-azure-500:focus-visible\\/20{background-color:#1ab5e633}.focus\\:bg-azure-500:focus-visible\\/40{background-color:#1ab5e666}.focus\\:bg-azure-500:focus-visible\\/70{background-color:#1ab5e6b3}.focus\\:bg-azure-700:focus-visible{background-color:#0093c9}.focus\\:bg-gold-50:focus-visible{background-color:#faf3e6}.focus\\:bg-gold-100:focus-visible{background-color:#efdcb4}.focus\\:bg-gold-200:focus-visible{background-color:#e4c481}.focus\\:bg-gold-300:focus-visible{background-color:#daad4f}.focus\\:bg-gold-500:focus-visible{background-color:#cf961d}.focus\\:bg-gold-500:focus-visible\\/20{background-color:#cf961d33}.focus\\:bg-gold-500:focus-visible\\/40{background-color:#cf961d66}.focus\\:bg-gold-500:focus-visible\\/70{background-color:#cf961db3}.focus\\:bg-gold-700:focus-visible{background-color:#b07000}.focus\\:bg-brown-50:focus-visible{background-color:#f1ede9}.focus\\:bg-brown-100:focus-visible{background-color:#d6c9bd}.focus\\:bg-brown-200:focus-visible{background-color:#bca691}.focus\\:bg-brown-300:focus-visible{background-color:#a08266}.focus\\:bg-brown-500:focus-visible{background-color:#865e3a}.focus\\:bg-brown-500:focus-visible\\/20{background-color:#865e3a33}.focus\\:bg-brown-500:focus-visible\\/40{background-color:#865e3a66}.focus\\:bg-brown-500:focus-visible\\/70{background-color:#865e3ab3}.focus\\:bg-brown-700:focus-visible{background-color:#5f330a}.focus\\:bg-navy-50:focus-visible{background-color:#e7e7fa}.focus\\:bg-navy-100:focus-visible{background-color:#b7b6f1}.focus\\:bg-navy-200:focus-visible{background-color:#8785e8}.focus\\:bg-navy-300:focus-visible{background-color:#5755df}.focus\\:bg-navy-500:focus-visible{background-color:#2724d6}.focus\\:bg-navy-500:focus-visible\\/20{background-color:#2724d633}.focus\\:bg-navy-500:focus-visible\\/40{background-color:#2724d666}.focus\\:bg-navy-500:focus-visible\\/70{background-color:#2724d6b3}.focus\\:bg-navy-700:focus-visible{background-color:#0000b8}.focus\\:bg-lime-50:focus-visible{background-color:#ecf6e7}.focus\\:bg-lime-100:focus-visible{background-color:#c5e3b6}.focus\\:bg-lime-200:focus-visible{background-color:#9ed186}.focus\\:bg-lime-300:focus-visible{background-color:#77bf56}.focus\\:bg-lime-500:focus-visible{background-color:#50ac25}.focus\\:bg-lime-500:focus-visible\\/20{background-color:#50ac2533}.focus\\:bg-lime-500:focus-visible\\/40{background-color:#50ac2566}.focus\\:bg-lime-500:focus-visible\\/70{background-color:#50ac25b3}.focus\\:bg-lime-700:focus-visible{background-color:#238900}.focus\\:bg-magenta-50:focus-visible{background-color:#fbe9f1}.focus\\:bg-magenta-100:focus-visible{background-color:#f4bed6}.focus\\:bg-magenta-200:focus-visible{background-color:#ed93bb}.focus\\:bg-magenta-300:focus-visible{background-color:#e668a0}.focus\\:bg-magenta-500:focus-visible{background-color:#df3d85}.focus\\:bg-magenta-500:focus-visible\\/20{background-color:#df3d8533}.focus\\:bg-magenta-500:focus-visible\\/40{background-color:#df3d8566}.focus\\:bg-magenta-500:focus-visible\\/70{background-color:#df3d85b3}.focus\\:bg-magenta-700:focus-visible{background-color:#c10d5d}.active\\:text-white-50:active{color:#fff}.active\\:text-white-100:active{color:#f7f7f7}.active\\:text-white-200:active{color:#eee}.active\\:text-white-300:active{color:#e5e5e5}.active\\:text-white-500:active{color:#dadada}.active\\:text-white-500:active\\/20{color:#dadada33}.active\\:text-white-500:active\\/40{color:#dadada66}.active\\:text-white-500:active\\/70{color:#dadadab3}.active\\:text-white-700:active{color:#ccc}.active\\:text-black-50:active{color:#aaa}.active\\:text-black-100:active{color:#919191}.active\\:text-black-200:active{color:#6c6c6c}.active\\:text-black-300:active{color:#424242}.active\\:text-black-500:active{color:#2f2f2f}.active\\:text-black-500:active\\/20{color:#2f2f2f33}.active\\:text-black-500:active\\/40{color:#2f2f2f66}.active\\:text-black-500:active\\/70{color:#2f2f2fb3}.active\\:text-black-700:active{color:#1d1d1d}.active\\:text-blue-50:active{color:#e9effd}.active\\:text-blue-100:active{color:#bed0f9}.active\\:text-blue-200:active{color:#92b1f5}.active\\:text-blue-300:active{color:#6692f1}.active\\:text-blue-500:active{color:#3b73ed}.active\\:text-blue-500:active\\/20{color:#3b73ed33}.active\\:text-blue-500:active\\/40{color:#3b73ed66}.active\\:text-blue-500:active\\/70{color:#3b73edb3}.active\\:text-blue-700:active{color:#0b49d1}.active\\:text-blue-900:active{color:#00179e}.active\\:text-red-50:active{color:#fbe9e9}.active\\:text-red-100:active{color:#f4bebe}.active\\:text-red-200:active{color:#ed9292}.active\\:text-red-300:active{color:#e66767}.active\\:text-red-500:active{color:#df3c3c}.active\\:text-red-500:active\\/20{color:#df3c3c33}.active\\:text-red-500:active\\/40{color:#df3c3c66}.active\\:text-red-500:active\\/70{color:#df3c3cb3}.active\\:text-red-700:active{color:#c20c0c}.active\\:text-green-50:active{color:#e7f4f3}.active\\:text-green-100:active{color:#b6dfdb}.active\\:text-green-200:active{color:#86c9c3}.active\\:text-green-300:active{color:#56b4ac}.active\\:text-green-500:active{color:#259f94}.active\\:text-green-500:active\\/20{color:#259f9433}.active\\:text-green-500:active\\/40{color:#259f9466}.active\\:text-green-500:active\\/70{color:#259f94b3}.active\\:text-green-700:active{color:#007a6e}.active\\:text-yellow-50:active{color:#fef4e8}.active\\:text-yellow-100:active{color:#fddeb9}.active\\:text-yellow-200:active{color:#fbc88b}.active\\:text-yellow-300:active{color:#fab15c}.active\\:text-yellow-500:active{color:#f89b2e}.active\\:text-yellow-500:active\\/20{color:#f89b2e33}.active\\:text-yellow-500:active\\/40{color:#f89b2e66}.active\\:text-yellow-500:active\\/70{color:#f89b2eb3}.active\\:text-yellow-700:active{color:#de7700}.active\\:text-purple-50:active{color:#f4ebfd}.active\\:text-purple-100:active{color:#dfc2f9}.active\\:text-purple-200:active{color:#c999f4}.active\\:text-purple-300:active{color:#b370f0}.active\\:text-purple-500:active{color:#9e47ec}.active\\:text-purple-500:active\\/20{color:#9e47ec33}.active\\:text-purple-500:active\\/40{color:#9e47ec66}.active\\:text-purple-500:active\\/70{color:#9e47ecb3}.active\\:text-purple-700:active{color:#7919d0}.active\\:text-orange-50:active{color:#ffefea}.active\\:text-orange-100:active{color:#ffcfc0}.active\\:text-orange-200:active{color:#ffb097}.active\\:text-orange-300:active{color:#ff906d}.active\\:text-orange-500:active{color:#ff7043}.active\\:text-orange-500:active\\/20{color:#ff704333}.active\\:text-orange-500:active\\/40{color:#ff704366}.active\\:text-orange-500:active\\/70{color:#ff7043b3}.active\\:text-orange-700:active{color:#e54715}.active\\:text-azure-50:active{color:#e5f7fc}.active\\:text-azure-100:active{color:#b2e6f7}.active\\:text-azure-200:active{color:#80d6f1}.active\\:text-azure-300:active{color:#4dc5eb}.active\\:text-azure-500:active{color:#1ab5e6}.active\\:text-azure-500:active\\/20{color:#1ab5e633}.active\\:text-azure-500:active\\/40{color:#1ab5e666}.active\\:text-azure-500:active\\/70{color:#1ab5e6b3}.active\\:text-azure-700:active{color:#0093c9}.active\\:text-gold-50:active{color:#faf3e6}.active\\:text-gold-100:active{color:#efdcb4}.active\\:text-gold-200:active{color:#e4c481}.active\\:text-gold-300:active{color:#daad4f}.active\\:text-gold-500:active{color:#cf961d}.active\\:text-gold-500:active\\/20{color:#cf961d33}.active\\:text-gold-500:active\\/40{color:#cf961d66}.active\\:text-gold-500:active\\/70{color:#cf961db3}.active\\:text-gold-700:active{color:#b07000}.active\\:text-brown-50:active{color:#f1ede9}.active\\:text-brown-100:active{color:#d6c9bd}.active\\:text-brown-200:active{color:#bca691}.active\\:text-brown-300:active{color:#a08266}.active\\:text-brown-500:active{color:#865e3a}.active\\:text-brown-500:active\\/20{color:#865e3a33}.active\\:text-brown-500:active\\/40{color:#865e3a66}.active\\:text-brown-500:active\\/70{color:#865e3ab3}.active\\:text-brown-700:active{color:#5f330a}.active\\:text-navy-50:active{color:#e7e7fa}.active\\:text-navy-100:active{color:#b7b6f1}.active\\:text-navy-200:active{color:#8785e8}.active\\:text-navy-300:active{color:#5755df}.active\\:text-navy-500:active{color:#2724d6}.active\\:text-navy-500:active\\/20{color:#2724d633}.active\\:text-navy-500:active\\/40{color:#2724d666}.active\\:text-navy-500:active\\/70{color:#2724d6b3}.active\\:text-navy-700:active{color:#0000b8}.active\\:text-lime-50:active{color:#ecf6e7}.active\\:text-lime-100:active{color:#c5e3b6}.active\\:text-lime-200:active{color:#9ed186}.active\\:text-lime-300:active{color:#77bf56}.active\\:text-lime-500:active{color:#50ac25}.active\\:text-lime-500:active\\/20{color:#50ac2533}.active\\:text-lime-500:active\\/40{color:#50ac2566}.active\\:text-lime-500:active\\/70{color:#50ac25b3}.active\\:text-lime-700:active{color:#238900}.active\\:text-magenta-50:active{color:#fbe9f1}.active\\:text-magenta-100:active{color:#f4bed6}.active\\:text-magenta-200:active{color:#ed93bb}.active\\:text-magenta-300:active{color:#e668a0}.active\\:text-magenta-500:active{color:#df3d85}.active\\:text-magenta-500:active\\/20{color:#df3d8533}.active\\:text-magenta-500:active\\/40{color:#df3d8566}.active\\:text-magenta-500:active\\/70{color:#df3d85b3}.active\\:text-magenta-700:active{color:#c10d5d}.active\\:bg-white-50:active{background-color:#fff}.active\\:bg-white-100:active{background-color:#f7f7f7}.active\\:bg-white-200:active{background-color:#eee}.active\\:bg-white-300:active{background-color:#e5e5e5}.active\\:bg-white-500:active{background-color:#dadada}.active\\:bg-white-500:active\\/20{background-color:#dadada33}.active\\:bg-white-500:active\\/40{background-color:#dadada66}.active\\:bg-white-500:active\\/70{background-color:#dadadab3}.active\\:bg-white-700:active{background-color:#ccc}.active\\:bg-black-50:active{background-color:#aaa}.active\\:bg-black-100:active{background-color:#919191}.active\\:bg-black-200:active{background-color:#6c6c6c}.active\\:bg-black-300:active{background-color:#424242}.active\\:bg-black-500:active{background-color:#2f2f2f}.active\\:bg-black-500:active\\/20{background-color:#2f2f2f33}.active\\:bg-black-500:active\\/40{background-color:#2f2f2f66}.active\\:bg-black-500:active\\/70{background-color:#2f2f2fb3}.active\\:bg-black-700:active{background-color:#1d1d1d}.active\\:bg-blue-50:active{background-color:#e9effd}.active\\:bg-blue-100:active{background-color:#bed0f9}.active\\:bg-blue-200:active{background-color:#92b1f5}.active\\:bg-blue-300:active{background-color:#6692f1}.active\\:bg-blue-500:active{background-color:#3b73ed}.active\\:bg-blue-500:active\\/20{background-color:#3b73ed33}.active\\:bg-blue-500:active\\/40{background-color:#3b73ed66}.active\\:bg-blue-500:active\\/70{background-color:#3b73edb3}.active\\:bg-blue-700:active{background-color:#0b49d1}.active\\:bg-blue-900:active{background-color:#00179e}.active\\:bg-red-50:active{background-color:#fbe9e9}.active\\:bg-red-100:active{background-color:#f4bebe}.active\\:bg-red-200:active{background-color:#ed9292}.active\\:bg-red-300:active{background-color:#e66767}.active\\:bg-red-500:active{background-color:#df3c3c}.active\\:bg-red-500:active\\/20{background-color:#df3c3c33}.active\\:bg-red-500:active\\/40{background-color:#df3c3c66}.active\\:bg-red-500:active\\/70{background-color:#df3c3cb3}.active\\:bg-red-700:active{background-color:#c20c0c}.active\\:bg-green-50:active{background-color:#e7f4f3}.active\\:bg-green-100:active{background-color:#b6dfdb}.active\\:bg-green-200:active{background-color:#86c9c3}.active\\:bg-green-300:active{background-color:#56b4ac}.active\\:bg-green-500:active{background-color:#259f94}.active\\:bg-green-500:active\\/20{background-color:#259f9433}.active\\:bg-green-500:active\\/40{background-color:#259f9466}.active\\:bg-green-500:active\\/70{background-color:#259f94b3}.active\\:bg-green-700:active{background-color:#007a6e}.active\\:bg-yellow-50:active{background-color:#fef4e8}.active\\:bg-yellow-100:active{background-color:#fddeb9}.active\\:bg-yellow-200:active{background-color:#fbc88b}.active\\:bg-yellow-300:active{background-color:#fab15c}.active\\:bg-yellow-500:active{background-color:#f89b2e}.active\\:bg-yellow-500:active\\/20{background-color:#f89b2e33}.active\\:bg-yellow-500:active\\/40{background-color:#f89b2e66}.active\\:bg-yellow-500:active\\/70{background-color:#f89b2eb3}.active\\:bg-yellow-700:active{background-color:#de7700}.active\\:bg-purple-50:active{background-color:#f4ebfd}.active\\:bg-purple-100:active{background-color:#dfc2f9}.active\\:bg-purple-200:active{background-color:#c999f4}.active\\:bg-purple-300:active{background-color:#b370f0}.active\\:bg-purple-500:active{background-color:#9e47ec}.active\\:bg-purple-500:active\\/20{background-color:#9e47ec33}.active\\:bg-purple-500:active\\/40{background-color:#9e47ec66}.active\\:bg-purple-500:active\\/70{background-color:#9e47ecb3}.active\\:bg-purple-700:active{background-color:#7919d0}.active\\:bg-orange-50:active{background-color:#ffefea}.active\\:bg-orange-100:active{background-color:#ffcfc0}.active\\:bg-orange-200:active{background-color:#ffb097}.active\\:bg-orange-300:active{background-color:#ff906d}.active\\:bg-orange-500:active{background-color:#ff7043}.active\\:bg-orange-500:active\\/20{background-color:#ff704333}.active\\:bg-orange-500:active\\/40{background-color:#ff704366}.active\\:bg-orange-500:active\\/70{background-color:#ff7043b3}.active\\:bg-orange-700:active{background-color:#e54715}.active\\:bg-azure-50:active{background-color:#e5f7fc}.active\\:bg-azure-100:active{background-color:#b2e6f7}.active\\:bg-azure-200:active{background-color:#80d6f1}.active\\:bg-azure-300:active{background-color:#4dc5eb}.active\\:bg-azure-500:active{background-color:#1ab5e6}.active\\:bg-azure-500:active\\/20{background-color:#1ab5e633}.active\\:bg-azure-500:active\\/40{background-color:#1ab5e666}.active\\:bg-azure-500:active\\/70{background-color:#1ab5e6b3}.active\\:bg-azure-700:active{background-color:#0093c9}.active\\:bg-gold-50:active{background-color:#faf3e6}.active\\:bg-gold-100:active{background-color:#efdcb4}.active\\:bg-gold-200:active{background-color:#e4c481}.active\\:bg-gold-300:active{background-color:#daad4f}.active\\:bg-gold-500:active{background-color:#cf961d}.active\\:bg-gold-500:active\\/20{background-color:#cf961d33}.active\\:bg-gold-500:active\\/40{background-color:#cf961d66}.active\\:bg-gold-500:active\\/70{background-color:#cf961db3}.active\\:bg-gold-700:active{background-color:#b07000}.active\\:bg-brown-50:active{background-color:#f1ede9}.active\\:bg-brown-100:active{background-color:#d6c9bd}.active\\:bg-brown-200:active{background-color:#bca691}.active\\:bg-brown-300:active{background-color:#a08266}.active\\:bg-brown-500:active{background-color:#865e3a}.active\\:bg-brown-500:active\\/20{background-color:#865e3a33}.active\\:bg-brown-500:active\\/40{background-color:#865e3a66}.active\\:bg-brown-500:active\\/70{background-color:#865e3ab3}.active\\:bg-brown-700:active{background-color:#5f330a}.active\\:bg-navy-50:active{background-color:#e7e7fa}.active\\:bg-navy-100:active{background-color:#b7b6f1}.active\\:bg-navy-200:active{background-color:#8785e8}.active\\:bg-navy-300:active{background-color:#5755df}.active\\:bg-navy-500:active{background-color:#2724d6}.active\\:bg-navy-500:active\\/20{background-color:#2724d633}.active\\:bg-navy-500:active\\/40{background-color:#2724d666}.active\\:bg-navy-500:active\\/70{background-color:#2724d6b3}.active\\:bg-navy-700:active{background-color:#0000b8}.active\\:bg-lime-50:active{background-color:#ecf6e7}.active\\:bg-lime-100:active{background-color:#c5e3b6}.active\\:bg-lime-200:active{background-color:#9ed186}.active\\:bg-lime-300:active{background-color:#77bf56}.active\\:bg-lime-500:active{background-color:#50ac25}.active\\:bg-lime-500:active\\/20{background-color:#50ac2533}.active\\:bg-lime-500:active\\/40{background-color:#50ac2566}.active\\:bg-lime-500:active\\/70{background-color:#50ac25b3}.active\\:bg-lime-700:active{background-color:#238900}.active\\:bg-magenta-50:active{background-color:#fbe9f1}.active\\:bg-magenta-100:active{background-color:#f4bed6}.active\\:bg-magenta-200:active{background-color:#ed93bb}.active\\:bg-magenta-300:active{background-color:#e668a0}.active\\:bg-magenta-500:active{background-color:#df3d85}.active\\:bg-magenta-500:active\\/20{background-color:#df3d8533}.active\\:bg-magenta-500:active\\/40{background-color:#df3d8566}.active\\:bg-magenta-500:active\\/70{background-color:#df3d85b3}.active\\:bg-magenta-700:active{background-color:#c10d5d}.transition{transition:all .2s ease-in-out}.disable-selection,.logo-container .logo-image,.cover-container .cover-image,.profile-rounded-image,.profile-square-image{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none}.drop-zone-container.has-logo{display:none}.largeContainer{position:relative;min-height:178px}.largeContainer .cropper-overlay{width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:1050;gap:4px;opacity:1;position:absolute}.largeContainer .cropper-overlay .img-cropper{height:178px!important}.largeContainer.hasCropper{min-height:212px;position:relative}.logo-container{position:absolute;top:0;left:0;width:616px;height:214px;overflow:hidden}.logo-container .logo-image{width:100%;height:100%;z-index:1000}.logoVar{height:214px}.logoVar.hasCropper{height:240px!important}.logoVar.hasCropper .drop-zone-container{display:none!important}.logoVar .drop-zone-container .drop-zone,.logoVar .drop-zone-container .drop-zone-error{height:204px}.logoVar .cropper-overlay{height:240px!important}.logoVar .cropper-overlay .img-cropper{height:206px!important}.cover-container{width:267px;height:178px}.cover-container .cover-image{width:100%;height:100%;object-fit:cover;display:block}.profile-rounded-image{width:178px;height:178px;object-fit:cover;display:block;border-radius:50%}.profile-square-image{width:160px;height:178px;object-fit:cover;display:block;border-radius:2px}.container.dragMode{position:fixed;position-anchor:--modal-body;left:anchor(left);top:anchor(top);height:anchor-size(--modal-body height)!important;width:anchor-size(--modal-body width)!important;display:flex;justify-content:center;align-items:center;gap:0;background-color:#fff!important}.container.dragMode .avatar,.container.dragMode .profile-container,.container.dragMode .logo-container,.container.dragMode .cover-container,.container.dragMode .docs{display:none}.container.dragMode .drop-zone-container{position:relative;width:100%;height:100%;flex:1 1 100%}.container.dragMode .drop-zone-container .drop-zone{flex-direction:column;height:100%;outline:none!important;margin:0!important;border:4px dashed #cccccc;border-color:#ccc}.container.dragMode .drop-zone-container .drop-zone .illustration,.container.dragMode .drop-zone-container .drop-zone svg{width:200px!important;height:200px!important;pointer-events:none!important}.container.dragMode .drop-zone-container .drop-zone .drag-icons-container{position:relative}.container.dragMode .drop-zone-container .drop-zone .drag-icons-container .drag-icon-document{width:80px!important;height:80px!important}.container.dragMode .drop-zone-container .drop-zone .drag-icons-container .drag-icon-document svg{width:80px!important;height:80px!important}.container.dragMode .drop-zone-container .drop-zone .drag-icons-container ng-lottie{width:200px;height:200px;display:block}.container.dragMode .drop-zone-container .drop-zone .drop-zone-focus-text{margin-top:32px}.container.dragMode .drop-zone-container .drop-zone .drop-zone-focus-text .heading{font-weight:700;font-size:14px;line-height:18px}.container.dragMode:hover .drop-zone{background-color:#fff!important}.container.dragMode.onDragover .drop-zone-container .drop-zone{border-color:#ccc}.is-documents-mode .dragMode{height:120px!important}.dragModeDocuments .drop-zone-container .drop-zone{background-color:#fff!important}.dragModeDocuments .drop-zone-container .drop-zone .drop-zone-focus-text .heading{font-weight:700;font-size:14px;line-height:18px}.is-details-slider{width:100%!important;height:100%!important;overflow:hidden}.is-details-slider .sliders{display:flex;align-items:center;justify-content:center;gap:4px;min-height:6px!important;height:auto!important;width:100%!important;margin-bottom:6px!important;margin-top:12px!important;opacity:0;pointer-events:none;transition:opacity .3s ease-in-out}.is-details-slider .sliders .slider-item{width:12px;height:6px;border-radius:2px;background-color:#e5e5e5;transform-origin:center;cursor:pointer!important;transition:width .2s ease-in-out,background-color .2s ease-in-out}.is-details-slider .sliders .slider-item.active{width:20px;background-color:#919191}.is-details-slider .drop-zone-container{display:none!important}.is-details-slider .docs{width:100%!important;position:relative!important;overflow:hidden!important}.is-details-slider .docs .carousel-button{opacity:0!important;pointer-events:none!important;transition:opacity .3s ease-in-out!important}.is-details-slider .docs:hover .carousel-button{opacity:1!important;pointer-events:auto!important}.is-details-slider .docs:hover .carousel-button[disabled]{opacity:0!important;pointer-events:none!important}.is-details-slider .doc-container{display:flex!important;align-items:flex-start!important;height:auto!important;flex-shrink:0!important;gap:0!important;position:relative!important;transition:transform .3s ease-out}.is-details-slider .doc{flex:0 0 100%!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;display:flex!important;justify-content:center!important;background-color:transparent!important;flex-shrink:0!important;position:relative!important}.is-details-slider .doc.doc-hidden{height:0!important;max-height:0!important;min-height:0!important;overflow:hidden!important;opacity:0;pointer-events:none;visibility:hidden;margin:0!important;padding:0!important}.is-details-slider .doc.doc-visible{height:auto!important;opacity:1;visibility:visible}.is-details-slider .carousel-button{position:absolute!important;top:45%!important}.is-details-slider:hover .sliders{opacity:1;pointer-events:auto}.is-drawer-mode{width:100%!important;padding:4px!important;position:absolute!important;max-width:100%!important}.is-drawer-mode .drop-zone-container{display:none!important}.is-drawer-mode .skeleton-container.drawer-position{width:100%!important;position:relative!important;overflow:hidden!important;display:flex;align-items:center;gap:4px}.is-drawer-mode .skeleton-container.drawer-position .skeleton-item{width:194px;height:194px;flex:0 0 194px;border-radius:2px;padding:4px}.is-drawer-mode .skeleton-container.drawer-position .skeleton-item .skeleton-bar{width:100%;height:100%;background-color:#fff}.is-drawer-mode .docs{width:100%!important;position:relative!important;overflow:hidden!important}.is-drawer-mode .docs .doc-container{display:flex;width:auto!important;height:auto!important;gap:4px!important;transition:transform .3s ease-out}.is-drawer-mode .docs .doc-container .doc{width:194px!important;height:194px!important;flex:0 0 194px!important;background-color:transparent!important}.is-drawer-mode .carousel-button.carousel-right{right:4px!important;position:absolute!important}.is-drawer-mode .carousel-button.carousel-left{left:4px!important;position:absolute!important}.isCoverDetails{width:100%!important;height:100%!important}.isCoverDetails .drop-zone-container{display:none!important}.isCoverDetails .docs{width:100%!important}.isCoverDetails .docs .doc{flex:0 0 100%!important;width:100%!important;height:auto!important;display:block!important;background-color:transparent!important}.more-docs{width:148px;flex:0 0 148px}.more-docs .illustration{width:80px;height:80px}.more-docs .drop-zone{padding:22px 0;flex-direction:column}.more-docs .drop-zone-error,.more-docs .drop-zone-error .drop-zone-text{padding:0 12px}.small-more-docs{width:148px!important}.small-more-docs .illustration,.small-more-docs svg{width:80px!important;height:80px!important}.small-more-docs .drop-zone{padding:22px 0!important;flex-direction:column}.unsupported .drop-zone-error{display:flex}.unsupported .drop-zone-text{padding:0 12px}.unsupported .drop-zone-text .heading.invalid{line-height:18px}.unsupported .drop-zone-text .subtext{line-height:14px;margin-bottom:0}.unsupported .cancel-button .cancel-icon{width:18px!important;height:18px!important}.unsupported .cancel-button-documents{display:none}.max-reached,.max-reached-more-doc{opacity:.4;pointer-events:none;cursor:none}.max-reached-more-doc .drop-zone{padding:6px 0!important;height:170px}.max-reached-more-doc .drop-zone-text{padding-left:20px;padding-right:20px}.max-reached-more-video .drop-zone{padding:13px 0!important;flex-direction:column}.invalid-file-size .drop-zone .illustration{display:none!important}.invalid-file-size .drop-zone .drop-zone-text{padding-left:20px;padding-right:20px}.drop-zone-error{position:absolute;inset:0;background-color:#fff;display:none;justify-content:center;align-items:center;flex-direction:column;margin:4px;outline:4px dashed #ed9292;border-radius:2px;padding:52px 12px;gap:12px}.drop-zone-error .cancel-button{cursor:pointer;background-color:transparent;position:absolute;top:2px;right:2px;height:26px;width:26px;padding:0;display:grid;place-items:center;transition:color .2s ease-in-out;color:#919191}.drop-zone-error .cancel-button:hover{color:#424242}.drop-zone-error .file-types{display:flex;align-items:center;gap:2px;text-transform:uppercase;max-width:100%;flex-wrap:wrap;justify-content:center}.drop-zone-error .badge{font-size:11px;font-weight:900;color:#fff;line-height:14px;padding:2px 4px;width:35px;border-radius:1px;margin-bottom:0;text-align:center;background-color:#919191}.drop-zone-error .pdf{background-color:#e66767}.drop-zone-error .video{background-color:#b370f0}.drop-zone-error .image{background-color:#fab15c}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
5661
5662
|
// modules
|
|
5662
5663
|
CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "directive", type: i2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type:
|
|
5663
5664
|
// components
|
|
@@ -5679,7 +5680,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
5679
5680
|
LottieComponent,
|
|
5680
5681
|
//pipes
|
|
5681
5682
|
DragModeAnimationPipe,
|
|
5682
|
-
], providers: [], template: "@let docCount = docs().length; @let cropFile = crop() === true;\n@let showCrop = showCropper() === true;\n@let documentVariant = variant() === dropZoneVariant.DOCUMENT;\n@let videoVariant = variant() === dropZoneVariant.VIDEO;\n@let profileVariant = variant() === dropZoneVariant.PROFILE;\n@let coverVariant = variant() === dropZoneVariant.COVER;\n@let logoVariant = variant() === dropZoneVariant.LOGO;\n@let roundedBorder = rounded() === true; @let coverPreview = coverUrl !== \"\";\n@let profilePreview = profileUrl !== \"\"; @let logoPreview = !!logoUrl;\n@let smallSize = size() === \"480px\";\n@let countFiles = this.maxCountFiles();\n@let largeSize = size() === \"640px\";\n\n@if (isDocumentsMode() && documentsDropZoneOpen() && dragMode()) {\n <div class=\"documents-drag-overlay\"></div>\n}\n\n<div\n class=\"container\"\n [class]=\"{\n smallContainer: smallSize,\n largeContainer: largeSize,\n dragMode: dragMode() && !isDocumentsMode(),\n dragModeDocuments: dragMode() && isDocumentsMode(),\n onDragover: onDragover(),\n logoVar: logoVariant,\n hasCropper: isCropperReady(),\n 'is-details-slider': isDetailsSlider(),\n 'is-drawer-mode': isDrawerMode(),\n isCoverDetails: isCoverDetails(),\n 'is-documents-mode': isDocumentsMode(),\n }\"\n>\n @if (coverVariant && coverPreview) {\n <div class=\"cover-container\">\n <img [src]=\"coverUrl\" class=\"cover-image\" draggable=\"false\" />\n </div>\n }\n @if (profileVariant) {\n @if (!profilePreview) {\n <div class=\"avatar\">\n <cai-avatar\n [driver]=\"driver()\"\n [size]=\"160\"\n [rounded]=\"rounded()\"\n ></cai-avatar>\n </div>\n } @else {\n <div class=\"profile-container\">\n <img\n [class]=\"rounded() ? 'profile-rounded-image' : 'profile-square-image'\"\n [src]=\"profileUrl\"\n draggable=\"false\"\n />\n </div>\n }\n }\n @if (logoVariant && logoPreview) {\n <div class=\"logo-container\" [class.has-logo]=\"!!logoUrl\">\n <img class=\"logo-image\" [src]=\"logoUrl\" draggable=\"false\" />\n </div>\n }\n <!--Image Cropper-->\n @if (cropFile && showCrop) {\n @if (!isCropperReady()) {\n <div class=\"cropper-loader\">\n <div class=\"spinner\"></div>\n </div>\n }\n <div class=\"cropper-overlay\">\n <image-cropper\n #cropper\n class=\"img-cropper\"\n [output]=\"'base64'\"\n [class.logoBorder]=\"logoVariant\"\n [roundCropper]=\"roundedBorder ? true : false\"\n [hideResizeSquares]=\"true\"\n [allowMoveImage]=\"true\"\n [transform]=\"transform\"\n (transformChange)=\"onTransformChange($event)\"\n format=\"png\"\n [aspectRatio]=\"ratioHelper()\"\n [resizeToWidth]=\"cropWidth()\"\n [resizeToHeight]=\"cropHeight()\"\n [containWithinAspectRatio]=\"true\"\n [imageChangedEvent]=\"imageChangedEvent\"\n (imageCropped)=\"imageCropped($event)\"\n (imageLoaded)=\"imageLoaded($event)\"\n (cropperReady)=\"cropperReady()\"\n (loadImageFailed)=\"loadImageFailed()\"\n ></image-cropper>\n @if (isCropperReady()) {\n <div class=\"lower-part\">\n <div class=\"range\">\n <input\n #inputRange\n type=\"range\"\n class=\"custom-range\"\n min=\"1\"\n max=\"10\"\n step=\"0.1\"\n [value]=\"zoomValue()\"\n (input)=\"onZoomChange($event)\"\n />\n </div>\n <div class=\"cropper-buttons\">\n <button class=\"cancel-button\" (click)=\"cancelCrop()\">Cancel</button>\n <button class=\"submit-button\" (click)=\"submitCrop()\">Crop</button>\n </div>\n </div>\n }\n </div>\n }\n <!-- Drop Zone -->\n @if (!isDocumentsMode() || documentsDropZoneOpen()) {\n <div\n #dropZoneContainer\n class=\"drop-zone-container\"\n [class.has-logo]=\"logoVariant && !!logoUrl\"\n (drop)=\"onDrop($event)\"\n (dragover)=\"onDragOver($event)\"\n (dragenter)=\"onDragEnter($event)\"\n (dragleave)=\"onDragLeave($event)\"\n [class]=\"{\n 'more-docs': docCount >= 3 && largeSize,\n 'small-more-docs': docCount >= 2 && smallSize,\n 'max-reached-drop-design':\n (countFiles <= this.docs().length || maxCountReached()) &&\n documentVariant,\n 'max-reached-more-doc':\n (countFiles <= this.docs().length || maxCountReached()) &&\n documentVariant,\n 'max-reached-more-video':\n (countFiles <= this.docs().length || maxCountReached()) &&\n videoVariant,\n 'invalid-file-size': invalidFileSize(),\n unsupported: unsupported() || invalidFileSize(),\n smallView: this.smallView() && !dragMode(),\n }\"\n >\n <!-- Drop Zone -->\n <div class=\"drop-zone\" (click)=\"handleClickToAdd()\">\n @if (dragMode()) {\n <div class=\"drag-icons-container\">\n @if (isDocumentsMode()) {\n <svg-icon\n name=\"cai-drop-zone-focus\"\n class=\"illustration drag-icon-document\"\n ></svg-icon>\n } @else {\n <!-- Animation -->\n <ng-lottie\n [options]=\"{\n path: variant() | dropZoneAnimation,\n loop: false,\n autoplay: false,\n }\"\n (animationCreated)=\"animationCreated($event)\"\n ></ng-lottie>\n }\n </div>\n <div class=\"drop-zone-focus-text\">\n @if (isDocumentsMode()) {\n <p class=\"heading\">DRAG FILES HERE</p>\n } @else if (documentVariant || videoVariant) {\n <p class=\"heading\">\n {{ onDragover() ? \"DROP FILES HERE\" : \"DRAG FILES HERE\" }}\n </p>\n } @else {\n <p class=\"heading\">\n {{ onDragover() ? \"DROP IMAGE HERE\" : \"DRAG IMAGE HERE\" }}\n </p>\n }\n </div>\n } @else {\n @let svgIcon = variant() | dropZoneAnimation: true;\n <svg-icon [name]=\"svgIcon\" class=\"illustration\"></svg-icon>\n @if (\n (countFiles <= this.docs().length || maxCountReached()) &&\n documentVariant\n ) {\n <div class=\"drop-zone-text\">\n <p class=\"heading\">\n <span class=\"line\">MAX COUNT</span>\n <span class=\"line\">REACHED</span>\n </p>\n <p class=\"subtext\">\n <span class=\"line\">{{ countFiles }} FILES </span>\n <span class=\"line\">IMPORTED</span>\n </p>\n </div>\n } @else {\n <div class=\"drop-zone-text\">\n <p class=\"heading\">\n @if (documentVariant || videoVariant) {\n DRAG FILES\n @if (docCount < 1 || isDocumentsMode()) {\n <span>HERE</span>\n }\n } @else if (profileVariant && roundedBorder) {\n DRAG IMAGE\n } @else {\n DRAG IMAGE HERE\n }\n </p>\n @if (!coverPreview && !profilePreview) {\n <p class=\"subtext\">OR CLICK TO ADD</p>\n }\n @if (coverPreview || profilePreview) {\n <p class=\"subtext\">OR CLICK TO REPLACE</p>\n }\n @if (videoVariant) {\n <p class=\"video-subtext\">max file size {{ maxFileSize() }}mb</p>\n }\n </div>\n @if (isDocumentsMode()) {\n <button\n class=\"cancel-button-documents\"\n ngbTooltip=\"Cancel\"\n [placement]=\"'bottom'\"\n container=\"body\"\n triggers=\"mouseenter:mouseleave\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n >\n <svg-icon\n name=\"cai-cancel\"\n class=\"cancel-icon\"\n (click)=\"onCancel($event)\"\n ></svg-icon>\n </button>\n }\n }\n }\n <input\n type=\"file\"\n aria-hidden=\"true\"\n multiple\n class=\"drop-zone-input\"\n #inputRef\n (input)=\"onInput($event)\"\n (change)=\"fileChangeEvent($event)\"\n />\n </div>\n\n <!-- Drop Zone Error -->\n <div class=\"drop-zone-error\">\n @if (invalidFileSize()) {\n <div class=\"drop-zone-text\">\n <p class=\"heading invalid\">INVALID FILE SIZE</p>\n <p class=\"subtext\">MAX {{ maxFileSize() }} MB</p>\n </div>\n } @else {\n <div class=\"drop-zone-text\">\n <p class=\"heading invalid\">INVALID FILE TYPE</p>\n <p class=\"subtext\">SUPPORTED FORMATS</p>\n </div>\n <div class=\"file-types\">\n @for (type of supportedFileTypes(); track $index) {\n <p\n class=\"badge\"\n [class]=\"{\n pdf: type === 'pdf',\n video: ['avi', 'mp4', 'mov'].includes(type),\n image: ['jpg', 'png', 'jpeg', 'gif'].includes(type),\n }\"\n >\n {{ type }}\n </p>\n }\n </div>\n }\n <button class=\"cancel-button\">\n <svg-icon\n name=\"cai-cancel\"\n class=\"cancel-icon\"\n (click)=\"cancel()\"\n ></svg-icon>\n </button>\n </div>\n </div>\n }\n @if (isLoadingSkeleton()) {\n <!-- Skeleton -->\n <ng-container *ngTemplateOutlet=\"skeletonTemplate\"></ng-container>\n } @else {\n <!-- Carousel -->\n @if (docCount > 0 && (documentVariant || videoVariant)) {\n <div #docsViewport class=\"docs\">\n <div\n class=\"doc-container\"\n [class.documents-container-grid]=\"isDocumentsMode()\"\n [style.transform]=\"isDocumentsMode() ? '' : carouselTransform()\"\n [style.--carousel-index]=\"isDocumentsMode() ? null : carouselIndex()\"\n >\n @for (doc of docs(); track doc.fileId) {\n <cai-document-preview\n [class.doc-visible]=\"\n isDetailsSlider() && $index === carouselIndex()\n \"\n [class.doc-hidden]=\"\n isDetailsSlider() && $index !== carouselIndex()\n \"\n class=\"doc\"\n [file]=\"doc\"\n [tags]=\"documentTags()\"\n [searchText]=\"searchText()\"\n [cdlDetailsMode]=\"isDetailsSlider()\"\n [multipleDetailsDocs]=\"isDetailsSlider() && docCount > 1\"\n [maxAspectRatio]=\"\n isDetailsSlider() && docCount > 1\n ? maxDetailsAspectRatio()\n : null\n \"\n [drawerMode]=\"isDrawerMode()\"\n [isCoverDetails]=\"isCoverDetails()\"\n [viewMode]=\"isDocumentsMode() ? 'large' : 'small'\"\n (onDelete)=\"handleDelete($event)\"\n (onDownload)=\"handleDownload($event)\"\n (onTagChange)=\"handleTagChange($event)\"\n (onFileNameChange)=\"handleFileNameChange($event)\"\n (onDocumentPreviewClick)=\"handleDocumentPreviewClick($event)\"\n (aspectRatioChange)=\"onDocAspectRatioChange($event)\"\n ></cai-document-preview>\n }\n </div>\n @if (docCount >= 3 || (isDetailsSlider() && docCount > 1)) {\n <button\n class=\"carousel-button carousel-left\"\n type=\"button\"\n (click)=\"carouselLeft()\"\n [disabled]=\"carouselIndex() === 0\"\n [style.opacity]=\"carouselIndex() === 0 ? '0' : '1'\"\n >\n <svg-icon name=\"cai-arrow-secondary-left\" class=\"arrow\"></svg-icon>\n </button>\n <button\n class=\"carousel-button carousel-right\"\n type=\"button\"\n (click)=\"carouselRight()\"\n [disabled]=\"isCarouselAtEnd()\"\n [style.opacity]=\"isCarouselAtEnd() ? '0' : '1'\"\n >\n <svg-icon name=\"cai-arrow-secondary-right\" class=\"arrow\"></svg-icon>\n </button>\n }\n @if (isDetailsSlider() && docCount > 1) {\n <div class=\"sliders\">\n @for (doc of docs(); track $index) {\n <div\n class=\"slider-item\"\n (click)=\"carouselIndex.set($index)\"\n [class.active]=\"$index === carouselIndex()\"\n ></div>\n }\n </div>\n }\n </div>\n }\n }\n</div>\n\n<!-- Skeleton Template -->\n\n<ng-template #skeletonTemplate>\n <div\n class=\"skeleton-container\"\n [ngClass]=\"{\n 'documents-container-grid': isDocumentsMode(),\n 'drawer-position': isDrawerMode(),\n }\"\n >\n @for (item of skeletonItems(); track $index) {\n <div class=\"skeleton-item\">\n <div class=\"skeleton-bar\"></div>\n </div>\n }\n </div>\n</ng-template>\n", styles: [".container.is-documents-mode{width:100%!important;max-width:100%!important}.container.is-documents-mode .drop-zone-container .drop-zone{width:100%!important}.documents-drag-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0003;z-index:10}.is-documents-mode{display:flex;flex-direction:column;gap:0!important;width:100%!important;height:100%!important}.is-documents-mode .drop-zone-container{display:flex;margin-bottom:4px;background-color:#f7f7f7;z-index:20}.is-documents-mode .drop-zone-container .drop-zone{width:100%;height:120px!important;background-color:transparent;outline-color:#dadada;transition:background-color .2s ease-in-out}.is-documents-mode .drop-zone-container .drop-zone:hover{background-color:#fff!important}.is-documents-mode .drop-zone-container .drop-zone .illustration{width:80px;height:80px}.is-documents-mode .drop-zone-container .drop-zone .drop-zone-text .heading{padding-bottom:0}.is-documents-mode .drop-zone-container .drop-zone .cancel-button-documents{z-index:1000;position:absolute;top:4px;right:4px;width:26px;height:26px;background-color:transparent;padding:4px}.is-documents-mode .drop-zone-container .drop-zone .cancel-button-documents .cancel-icon{width:18px;height:18px;color:#919191}.is-documents-mode .drop-zone-container .drop-zone .cancel-button-documents:hover .cancel-icon{color:#424242}.is-documents-mode .skeleton-container .skeleton-item{width:100%;height:auto;aspect-ratio:1/1;max-width:100%;min-width:302px;min-height:302px;position:relative;border-radius:3px;background-color:#fff}.is-documents-mode .skeleton-container .skeleton-item .skeleton-bar{position:absolute;bottom:8px;left:8px;right:8px;width:auto;height:26px;background-color:#91919133;animation:skeleton-pulse 1s ease-in-out infinite alternate;border-radius:2px}.is-documents-mode .docs{width:100%!important;position:static!important;overflow:visible!important}.is-documents-mode .docs .doc-container .doc{height:auto!important}.is-documents-mode .docs .carousel-button{display:none}.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{display:grid;width:100%;grid-template-columns:repeat(auto-fill,minmax(302px,1fr));gap:4px;justify-items:stretch;align-items:start}@media (min-width: 801px) and (max-width: 1001px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(2,minmax(302px,1fr))}}@media (min-width: 1002px) and (max-width: 1307px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(3,minmax(302px,1fr))}}@media (min-width: 1308px) and (max-width: 1613px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(4,minmax(302px,1fr))}}@media (min-width: 1614px) and (max-width: 1920px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(5,minmax(302px,1fr))}}@media (min-width: 1921px) and (max-width: 2227px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(6,minmax(302px,1fr))}}@media (min-width: 2228px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(auto-fit,minmax(302px,1fr))}}@keyframes skeleton-pulse{0%{background-color:#91919133}to{background-color:#91919120}}.cropper-overlay{display:flex;justify-content:center;flex-direction:column;background-color:#fff;align-items:center;z-index:2000;gap:4px;opacity:1;top:0;left:0;position:absolute;width:100%;height:212px}.cropper-overlay .img-cropper{width:100%;height:178px;padding:0}.cropper-overlay .lower-part{display:flex;place-items:center;align-items:center;margin-left:3px;margin-right:3px;width:100%;gap:12px}.cropper-overlay .lower-part .range{width:100%;height:22px;display:flex;align-items:center}.cropper-overlay .lower-part .range input[type=range]{width:100%}.cropper-overlay .lower-part .range input[type=range]{-webkit-appearance:none;appearance:none;border-radius:2px;--range-active-color: #6692f1;--range-progress: 50%;background:transparent;cursor:pointer}.cropper-overlay .lower-part .cropper-buttons{display:flex;justify-content:start;gap:6px}.cropper-overlay .lower-part .cropper-buttons .cancel-button,.cropper-overlay .lower-part .cropper-buttons .submit-button{padding:4px;width:80px;font-size:14px;border-radius:2px;text-transform:uppercase;line-height:14px;font-weight:700;font-size:11px;cursor:pointer}.cropper-overlay .lower-part .cropper-buttons .cancel-button{background-color:#eee;color:#6c6c6c;transition:background-color .3s ease-in-out,color .3s ease-in-out}.cropper-overlay .lower-part .cropper-buttons .cancel-button:hover{background-color:#424242;color:#fff}.cropper-overlay .lower-part .cropper-buttons .cancel-button:active{background-color:#1d1d1d;color:#fff}.cropper-overlay .lower-part .cropper-buttons .submit-button{background-color:#3b73ed;color:#fff;transition:background-color .3s ease-in-out,color .3s ease-in-out}.cropper-overlay .lower-part .cropper-buttons .submit-button:hover{background-color:#0b49d1;color:#fff}.cropper-overlay .lower-part .cropper-buttons .submit-button:active{background-color:#00179e;color:#fff}.cropper-loader{position:absolute;z-index:1100;display:flex;justify-content:center;align-items:center;background-color:#fff;width:100%;height:100%}.cropper-loader .spinner{width:48px;height:48px;border:5px solid rgba(145,145,145,.2);border-top:5px solid #3b73ed;border-radius:50%;animation:spin 1s linear infinite}.hasCropper{height:204px!important;position:relative}input[type=range]:hover{--range-active-color: $color-blue-500}input[type=range]:active{--range-active-color: $color-blue-700}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-7px;background-color:#fff;height:20px;width:30px;box-shadow:0 0 4px #00000026;background-image:url(/assets/icons/interaction/cai-thumb.svg);background-repeat:no-repeat;background-position:center;background-size:14px 18px;border-radius:2px;transition:background-color .3s ease-in-out}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--range-active-color) 0%,var(--range-active-color) var(--range-progress),#eeeeee var(--range-progress),#eeeeee 100%);height:6px;transition:background .3s ease-in-out}input[type=range]:hover::-webkit-slider-runnable-track{background:linear-gradient(to right,#3b73ed 0%,#3b73ed var(--range-progress),#eeeeee var(--range-progress),#eeeeee 100%)}input[type=range]:active::-webkit-slider-runnable-track{background:linear-gradient(to right,#0b49d1 0%,#0b49d1 var(--range-progress),#eeeeee var(--range-progress),#eeeeee 100%)}input[type=range]:hover::-webkit-slider-thumb{cursor:grab}input[type=range]:active::-webkit-slider-thumb{background-image:url(/assets/icons/interaction/cai-thumb-active.svg);cursor:grabbing}@keyframes spin{to{transform:rotate(360deg)}}p{margin-bottom:0}svg-icon{display:flex;align-items:center;justify-content:center}button{border:none!important;outline:none!important}.illustration{width:100px;height:100px}.container{display:flex;gap:6px;position:relative;padding-left:0!important;padding-right:0!important;margin:0!important}.container.smallContainer{width:456px!important}.container.largeContainer{width:616px!important}.docs{flex-shrink:0;height:100%;overflow:hidden;position:relative;border-radius:2px}.smallContainer .docs{max-width:302px!important}.smallContainer .docs .doc-container{display:flex;gap:6px;transition:transform .2s ease-out}.largeContainer .docs{max-width:460px!important}.largeContainer .docs .doc-container{display:flex;gap:8px;transition:transform .2s ease-out}.carousel-button{position:absolute;top:50%;transform:translateY(-50%);border:none;outline:none;width:24px;height:32px;background-color:#ffffffb2;border-radius:2px;box-shadow:0 0 5px #0000004d;cursor:pointer;display:grid;place-items:center;padding:0}.drop-zone-input{display:none}.carousel-left{left:4px}.carousel-right{right:4px}.arrow{width:18px;height:18px;color:#0000004d}.doc{flex:0 0 148px;height:178px;display:flex;background-color:#eee;border-radius:2px}.drop-zone-container{position:relative;flex:1 0 auto}.drop-zone{display:flex;justify-content:center;align-items:center;flex-direction:row;outline:4px dashed #eeeeee;border-radius:2px;padding:35px 0;margin:4px;gap:10px;cursor:pointer;transition:background-color .2s ease-in-out}.drop-zone:hover{background-color:#eee}.drop-zone-text{-webkit-user-select:none;user-select:none;text-align:center}.drop-zone-text .heading{color:#424242;font-size:14px;line-height:18px;font-weight:700;padding-bottom:4px}.drop-zone-text .heading .line{display:block;width:fit-content;margin:0 auto}.drop-zone-text .invalid{color:#df3c3c}.drop-zone-text .subtext{color:#424242;font-size:11px;line-height:14px;font-weight:600}.drop-zone-text .subtext .line{display:block;width:fit-content;margin:0 auto}.drop-zone-text .video-subtext{margin-top:4px;color:#919191;font-size:11px;line-height:14px;font-weight:500}.smallView{width:173px!important}.smallView .drop-zone{flex-direction:column!important;padding:20px 0;width:173px;height:170px}.smallView .drop-zone .drop-zone-text .heading{line-height:18px;padding-bottom:0!important}.smallView .drop-zone .drop-zone-text .subtext{line-height:14px;margin-bottom:0!important}.smallView .illustration{width:80px;height:80px}.text-white-50{color:#fff}.text-white-100{color:#f7f7f7}.text-white-200{color:#eee}.text-white-300{color:#e5e5e5}.text-white-500{color:#dadada}.text-white-500\\/20{color:#dadada33}.text-white-500\\/40{color:#dadada66}.text-white-500\\/70{color:#dadadab3}.text-white-700{color:#ccc}.text-black-50{color:#aaa}.text-black-100{color:#919191}.text-black-200{color:#6c6c6c}.text-black-300{color:#424242}.text-black-500{color:#2f2f2f}.text-black-500\\/20{color:#2f2f2f33}.text-black-500\\/40{color:#2f2f2f66}.text-black-500\\/70{color:#2f2f2fb3}.text-black-700{color:#1d1d1d}.text-blue-50{color:#e9effd}.text-blue-100{color:#bed0f9}.text-blue-200{color:#92b1f5}.text-blue-300{color:#6692f1}.text-blue-500{color:#3b73ed}.text-blue-500\\/20{color:#3b73ed33}.text-blue-500\\/40{color:#3b73ed66}.text-blue-500\\/70{color:#3b73edb3}.text-blue-700{color:#0b49d1}.text-blue-900{color:#00179e}.text-red-50{color:#fbe9e9}.text-red-100{color:#f4bebe}.text-red-200{color:#ed9292}.text-red-300{color:#e66767}.text-red-500{color:#df3c3c}.text-red-500\\/20{color:#df3c3c33}.text-red-500\\/40{color:#df3c3c66}.text-red-500\\/70{color:#df3c3cb3}.text-red-700{color:#c20c0c}.text-green-50{color:#e7f4f3}.text-green-100{color:#b6dfdb}.text-green-200{color:#86c9c3}.text-green-300{color:#56b4ac}.text-green-500{color:#259f94}.text-green-500\\/20{color:#259f9433}.text-green-500\\/40{color:#259f9466}.text-green-500\\/70{color:#259f94b3}.text-green-700{color:#007a6e}.text-yellow-50{color:#fef4e8}.text-yellow-100{color:#fddeb9}.text-yellow-200{color:#fbc88b}.text-yellow-300{color:#fab15c}.text-yellow-500{color:#f89b2e}.text-yellow-500\\/20{color:#f89b2e33}.text-yellow-500\\/40{color:#f89b2e66}.text-yellow-500\\/70{color:#f89b2eb3}.text-yellow-700{color:#de7700}.text-purple-50{color:#f4ebfd}.text-purple-100{color:#dfc2f9}.text-purple-200{color:#c999f4}.text-purple-300{color:#b370f0}.text-purple-500{color:#9e47ec}.text-purple-500\\/20{color:#9e47ec33}.text-purple-500\\/40{color:#9e47ec66}.text-purple-500\\/70{color:#9e47ecb3}.text-purple-700{color:#7919d0}.text-orange-50{color:#ffefea}.text-orange-100{color:#ffcfc0}.text-orange-200{color:#ffb097}.text-orange-300{color:#ff906d}.text-orange-500{color:#ff7043}.text-orange-500\\/20{color:#ff704333}.text-orange-500\\/40{color:#ff704366}.text-orange-500\\/70{color:#ff7043b3}.text-orange-700{color:#e54715}.text-azure-50{color:#e5f7fc}.text-azure-100{color:#b2e6f7}.text-azure-200{color:#80d6f1}.text-azure-300{color:#4dc5eb}.text-azure-500{color:#1ab5e6}.text-azure-500\\/20{color:#1ab5e633}.text-azure-500\\/40{color:#1ab5e666}.text-azure-500\\/70{color:#1ab5e6b3}.text-azure-700{color:#0093c9}.text-gold-50{color:#faf3e6}.text-gold-100{color:#efdcb4}.text-gold-200{color:#e4c481}.text-gold-300{color:#daad4f}.text-gold-500{color:#cf961d}.text-gold-500\\/20{color:#cf961d33}.text-gold-500\\/40{color:#cf961d66}.text-gold-500\\/70{color:#cf961db3}.text-gold-700{color:#b07000}.text-brown-50{color:#f1ede9}.text-brown-100{color:#d6c9bd}.text-brown-200{color:#bca691}.text-brown-300{color:#a08266}.text-brown-500{color:#865e3a}.text-brown-500\\/20{color:#865e3a33}.text-brown-500\\/40{color:#865e3a66}.text-brown-500\\/70{color:#865e3ab3}.text-brown-700{color:#5f330a}.text-navy-50{color:#e7e7fa}.text-navy-100{color:#b7b6f1}.text-navy-200{color:#8785e8}.text-navy-300{color:#5755df}.text-navy-500{color:#2724d6}.text-navy-500\\/20{color:#2724d633}.text-navy-500\\/40{color:#2724d666}.text-navy-500\\/70{color:#2724d6b3}.text-navy-700{color:#0000b8}.text-lime-50{color:#ecf6e7}.text-lime-100{color:#c5e3b6}.text-lime-200{color:#9ed186}.text-lime-300{color:#77bf56}.text-lime-500{color:#50ac25}.text-lime-500\\/20{color:#50ac2533}.text-lime-500\\/40{color:#50ac2566}.text-lime-500\\/70{color:#50ac25b3}.text-lime-700{color:#238900}.text-magenta-50{color:#fbe9f1}.text-magenta-100{color:#f4bed6}.text-magenta-200{color:#ed93bb}.text-magenta-300{color:#e668a0}.text-magenta-500{color:#df3d85}.text-magenta-500\\/20{color:#df3d8533}.text-magenta-500\\/40{color:#df3d8566}.text-magenta-500\\/70{color:#df3d85b3}.text-magenta-700{color:#c10d5d}.bg-white-50{background-color:#fff}.bg-white-100{background-color:#f7f7f7}.bg-white-200{background-color:#eee}.bg-white-300{background-color:#e5e5e5}.bg-white-500{background-color:#dadada}.bg-white-500\\/20{background-color:#dadada33}.bg-white-500\\/40{background-color:#dadada66}.bg-white-500\\/70{background-color:#dadadab3}.bg-white-700{background-color:#ccc}.bg-black-50{background-color:#aaa}.bg-black-100{background-color:#919191}.bg-black-200{background-color:#6c6c6c}.bg-black-300{background-color:#424242}.bg-black-500{background-color:#2f2f2f}.bg-black-500\\/20{background-color:#2f2f2f33}.bg-black-500\\/40{background-color:#2f2f2f66}.bg-black-500\\/70{background-color:#2f2f2fb3}.bg-black-700{background-color:#1d1d1d}.bg-blue-50{background-color:#e9effd}.bg-blue-100{background-color:#bed0f9}.bg-blue-200{background-color:#92b1f5}.bg-blue-300{background-color:#6692f1}.bg-blue-500{background-color:#3b73ed}.bg-blue-500\\/20{background-color:#3b73ed33}.bg-blue-500\\/40{background-color:#3b73ed66}.bg-blue-500\\/70{background-color:#3b73edb3}.bg-blue-700{background-color:#0b49d1}.bg-blue-900{background-color:#00179e}.bg-red-50{background-color:#fbe9e9}.bg-red-100{background-color:#f4bebe}.bg-red-200{background-color:#ed9292}.bg-red-300{background-color:#e66767}.bg-red-500{background-color:#df3c3c}.bg-red-500\\/20{background-color:#df3c3c33}.bg-red-500\\/40{background-color:#df3c3c66}.bg-red-500\\/70{background-color:#df3c3cb3}.bg-red-700{background-color:#c20c0c}.bg-green-50{background-color:#e7f4f3}.bg-green-100{background-color:#b6dfdb}.bg-green-200{background-color:#86c9c3}.bg-green-300{background-color:#56b4ac}.bg-green-500{background-color:#259f94}.bg-green-500\\/20{background-color:#259f9433}.bg-green-500\\/40{background-color:#259f9466}.bg-green-500\\/70{background-color:#259f94b3}.bg-green-700{background-color:#007a6e}.bg-yellow-50{background-color:#fef4e8}.bg-yellow-100{background-color:#fddeb9}.bg-yellow-200{background-color:#fbc88b}.bg-yellow-300{background-color:#fab15c}.bg-yellow-500{background-color:#f89b2e}.bg-yellow-500\\/20{background-color:#f89b2e33}.bg-yellow-500\\/40{background-color:#f89b2e66}.bg-yellow-500\\/70{background-color:#f89b2eb3}.bg-yellow-700{background-color:#de7700}.bg-purple-50{background-color:#f4ebfd}.bg-purple-100{background-color:#dfc2f9}.bg-purple-200{background-color:#c999f4}.bg-purple-300{background-color:#b370f0}.bg-purple-500{background-color:#9e47ec}.bg-purple-500\\/20{background-color:#9e47ec33}.bg-purple-500\\/40{background-color:#9e47ec66}.bg-purple-500\\/70{background-color:#9e47ecb3}.bg-purple-700{background-color:#7919d0}.bg-orange-50{background-color:#ffefea}.bg-orange-100{background-color:#ffcfc0}.bg-orange-200{background-color:#ffb097}.bg-orange-300{background-color:#ff906d}.bg-orange-500{background-color:#ff7043}.bg-orange-500\\/20{background-color:#ff704333}.bg-orange-500\\/40{background-color:#ff704366}.bg-orange-500\\/70{background-color:#ff7043b3}.bg-orange-700{background-color:#e54715}.bg-azure-50{background-color:#e5f7fc}.bg-azure-100{background-color:#b2e6f7}.bg-azure-200{background-color:#80d6f1}.bg-azure-300{background-color:#4dc5eb}.bg-azure-500{background-color:#1ab5e6}.bg-azure-500\\/20{background-color:#1ab5e633}.bg-azure-500\\/40{background-color:#1ab5e666}.bg-azure-500\\/70{background-color:#1ab5e6b3}.bg-azure-700{background-color:#0093c9}.bg-gold-50{background-color:#faf3e6}.bg-gold-100{background-color:#efdcb4}.bg-gold-200{background-color:#e4c481}.bg-gold-300{background-color:#daad4f}.bg-gold-500{background-color:#cf961d}.bg-gold-500\\/20{background-color:#cf961d33}.bg-gold-500\\/40{background-color:#cf961d66}.bg-gold-500\\/70{background-color:#cf961db3}.bg-gold-700{background-color:#b07000}.bg-brown-50{background-color:#f1ede9}.bg-brown-100{background-color:#d6c9bd}.bg-brown-200{background-color:#bca691}.bg-brown-300{background-color:#a08266}.bg-brown-500{background-color:#865e3a}.bg-brown-500\\/20{background-color:#865e3a33}.bg-brown-500\\/40{background-color:#865e3a66}.bg-brown-500\\/70{background-color:#865e3ab3}.bg-brown-700{background-color:#5f330a}.bg-navy-50{background-color:#e7e7fa}.bg-navy-100{background-color:#b7b6f1}.bg-navy-200{background-color:#8785e8}.bg-navy-300{background-color:#5755df}.bg-navy-500{background-color:#2724d6}.bg-navy-500\\/20{background-color:#2724d633}.bg-navy-500\\/40{background-color:#2724d666}.bg-navy-500\\/70{background-color:#2724d6b3}.bg-navy-700{background-color:#0000b8}.bg-lime-50{background-color:#ecf6e7}.bg-lime-100{background-color:#c5e3b6}.bg-lime-200{background-color:#9ed186}.bg-lime-300{background-color:#77bf56}.bg-lime-500{background-color:#50ac25}.bg-lime-500\\/20{background-color:#50ac2533}.bg-lime-500\\/40{background-color:#50ac2566}.bg-lime-500\\/70{background-color:#50ac25b3}.bg-lime-700{background-color:#238900}.bg-magenta-50{background-color:#fbe9f1}.bg-magenta-100{background-color:#f4bed6}.bg-magenta-200{background-color:#ed93bb}.bg-magenta-300{background-color:#e668a0}.bg-magenta-500{background-color:#df3d85}.bg-magenta-500\\/20{background-color:#df3d8533}.bg-magenta-500\\/40{background-color:#df3d8566}.bg-magenta-500\\/70{background-color:#df3d85b3}.bg-magenta-700{background-color:#c10d5d}.border-white-50{border-color:#fff}.border-white-100{border-color:#f7f7f7}.border-white-200{border-color:#eee}.border-white-300{border-color:#e5e5e5}.border-white-500{border-color:#dadada}.border-white-500\\/20{border-color:#dadada33}.border-white-500\\/40{border-color:#dadada66}.border-white-500\\/70{border-color:#dadadab3}.border-white-700{border-color:#ccc}.border-black-50{border-color:#aaa}.border-black-100{border-color:#919191}.border-black-200{border-color:#6c6c6c}.border-black-300{border-color:#424242}.border-black-500{border-color:#2f2f2f}.border-black-500\\/20{border-color:#2f2f2f33}.border-black-500\\/40{border-color:#2f2f2f66}.border-black-500\\/70{border-color:#2f2f2fb3}.border-black-700{border-color:#1d1d1d}.border-blue-50{border-color:#e9effd}.border-blue-100{border-color:#bed0f9}.border-blue-200{border-color:#92b1f5}.border-blue-300{border-color:#6692f1}.border-blue-500{border-color:#3b73ed}.border-blue-500\\/20{border-color:#3b73ed33}.border-blue-500\\/40{border-color:#3b73ed66}.border-blue-500\\/70{border-color:#3b73edb3}.border-blue-700{border-color:#0b49d1}.border-blue-900{border-color:#00179e}.border-red-50{border-color:#fbe9e9}.border-red-100{border-color:#f4bebe}.border-red-200{border-color:#ed9292}.border-red-300{border-color:#e66767}.border-red-500{border-color:#df3c3c}.border-red-500\\/20{border-color:#df3c3c33}.border-red-500\\/40{border-color:#df3c3c66}.border-red-500\\/70{border-color:#df3c3cb3}.border-red-700{border-color:#c20c0c}.border-green-50{border-color:#e7f4f3}.border-green-100{border-color:#b6dfdb}.border-green-200{border-color:#86c9c3}.border-green-300{border-color:#56b4ac}.border-green-500{border-color:#259f94}.border-green-500\\/20{border-color:#259f9433}.border-green-500\\/40{border-color:#259f9466}.border-green-500\\/70{border-color:#259f94b3}.border-green-700{border-color:#007a6e}.border-yellow-50{border-color:#fef4e8}.border-yellow-100{border-color:#fddeb9}.border-yellow-200{border-color:#fbc88b}.border-yellow-300{border-color:#fab15c}.border-yellow-500{border-color:#f89b2e}.border-yellow-500\\/20{border-color:#f89b2e33}.border-yellow-500\\/40{border-color:#f89b2e66}.border-yellow-500\\/70{border-color:#f89b2eb3}.border-yellow-700{border-color:#de7700}.border-purple-50{border-color:#f4ebfd}.border-purple-100{border-color:#dfc2f9}.border-purple-200{border-color:#c999f4}.border-purple-300{border-color:#b370f0}.border-purple-500{border-color:#9e47ec}.border-purple-500\\/20{border-color:#9e47ec33}.border-purple-500\\/40{border-color:#9e47ec66}.border-purple-500\\/70{border-color:#9e47ecb3}.border-purple-700{border-color:#7919d0}.border-orange-50{border-color:#ffefea}.border-orange-100{border-color:#ffcfc0}.border-orange-200{border-color:#ffb097}.border-orange-300{border-color:#ff906d}.border-orange-500{border-color:#ff7043}.border-orange-500\\/20{border-color:#ff704333}.border-orange-500\\/40{border-color:#ff704366}.border-orange-500\\/70{border-color:#ff7043b3}.border-orange-700{border-color:#e54715}.border-azure-50{border-color:#e5f7fc}.border-azure-100{border-color:#b2e6f7}.border-azure-200{border-color:#80d6f1}.border-azure-300{border-color:#4dc5eb}.border-azure-500{border-color:#1ab5e6}.border-azure-500\\/20{border-color:#1ab5e633}.border-azure-500\\/40{border-color:#1ab5e666}.border-azure-500\\/70{border-color:#1ab5e6b3}.border-azure-700{border-color:#0093c9}.border-gold-50{border-color:#faf3e6}.border-gold-100{border-color:#efdcb4}.border-gold-200{border-color:#e4c481}.border-gold-300{border-color:#daad4f}.border-gold-500{border-color:#cf961d}.border-gold-500\\/20{border-color:#cf961d33}.border-gold-500\\/40{border-color:#cf961d66}.border-gold-500\\/70{border-color:#cf961db3}.border-gold-700{border-color:#b07000}.border-brown-50{border-color:#f1ede9}.border-brown-100{border-color:#d6c9bd}.border-brown-200{border-color:#bca691}.border-brown-300{border-color:#a08266}.border-brown-500{border-color:#865e3a}.border-brown-500\\/20{border-color:#865e3a33}.border-brown-500\\/40{border-color:#865e3a66}.border-brown-500\\/70{border-color:#865e3ab3}.border-brown-700{border-color:#5f330a}.border-navy-50{border-color:#e7e7fa}.border-navy-100{border-color:#b7b6f1}.border-navy-200{border-color:#8785e8}.border-navy-300{border-color:#5755df}.border-navy-500{border-color:#2724d6}.border-navy-500\\/20{border-color:#2724d633}.border-navy-500\\/40{border-color:#2724d666}.border-navy-500\\/70{border-color:#2724d6b3}.border-navy-700{border-color:#0000b8}.border-lime-50{border-color:#ecf6e7}.border-lime-100{border-color:#c5e3b6}.border-lime-200{border-color:#9ed186}.border-lime-300{border-color:#77bf56}.border-lime-500{border-color:#50ac25}.border-lime-500\\/20{border-color:#50ac2533}.border-lime-500\\/40{border-color:#50ac2566}.border-lime-500\\/70{border-color:#50ac25b3}.border-lime-700{border-color:#238900}.border-magenta-50{border-color:#fbe9f1}.border-magenta-100{border-color:#f4bed6}.border-magenta-200{border-color:#ed93bb}.border-magenta-300{border-color:#e668a0}.border-magenta-500{border-color:#df3d85}.border-magenta-500\\/20{border-color:#df3d8533}.border-magenta-500\\/40{border-color:#df3d8566}.border-magenta-500\\/70{border-color:#df3d85b3}.border-magenta-700{border-color:#c10d5d}.fill-white-50{fill:#fff}.fill-white-100{fill:#f7f7f7}.fill-white-200{fill:#eee}.fill-white-300{fill:#e5e5e5}.fill-white-500{fill:#dadada}.fill-white-500\\/20{fill:#dadada33}.fill-white-500\\/40{fill:#dadada66}.fill-white-500\\/70{fill:#dadadab3}.fill-white-700{fill:#ccc}.fill-black-50{fill:#aaa}.fill-black-100{fill:#919191}.fill-black-200{fill:#6c6c6c}.fill-black-300{fill:#424242}.fill-black-500{fill:#2f2f2f}.fill-black-500\\/20{fill:#2f2f2f33}.fill-black-500\\/40{fill:#2f2f2f66}.fill-black-500\\/70{fill:#2f2f2fb3}.fill-black-700{fill:#1d1d1d}.fill-blue-50{fill:#e9effd}.fill-blue-100{fill:#bed0f9}.fill-blue-200{fill:#92b1f5}.fill-blue-300{fill:#6692f1}.fill-blue-500{fill:#3b73ed}.fill-blue-500\\/20{fill:#3b73ed33}.fill-blue-500\\/40{fill:#3b73ed66}.fill-blue-500\\/70{fill:#3b73edb3}.fill-blue-700{fill:#0b49d1}.fill-blue-900{fill:#00179e}.fill-red-50{fill:#fbe9e9}.fill-red-100{fill:#f4bebe}.fill-red-200{fill:#ed9292}.fill-red-300{fill:#e66767}.fill-red-500{fill:#df3c3c}.fill-red-500\\/20{fill:#df3c3c33}.fill-red-500\\/40{fill:#df3c3c66}.fill-red-500\\/70{fill:#df3c3cb3}.fill-red-700{fill:#c20c0c}.fill-green-50{fill:#e7f4f3}.fill-green-100{fill:#b6dfdb}.fill-green-200{fill:#86c9c3}.fill-green-300{fill:#56b4ac}.fill-green-500{fill:#259f94}.fill-green-500\\/20{fill:#259f9433}.fill-green-500\\/40{fill:#259f9466}.fill-green-500\\/70{fill:#259f94b3}.fill-green-700{fill:#007a6e}.fill-yellow-50{fill:#fef4e8}.fill-yellow-100{fill:#fddeb9}.fill-yellow-200{fill:#fbc88b}.fill-yellow-300{fill:#fab15c}.fill-yellow-500{fill:#f89b2e}.fill-yellow-500\\/20{fill:#f89b2e33}.fill-yellow-500\\/40{fill:#f89b2e66}.fill-yellow-500\\/70{fill:#f89b2eb3}.fill-yellow-700{fill:#de7700}.fill-purple-50{fill:#f4ebfd}.fill-purple-100{fill:#dfc2f9}.fill-purple-200{fill:#c999f4}.fill-purple-300{fill:#b370f0}.fill-purple-500{fill:#9e47ec}.fill-purple-500\\/20{fill:#9e47ec33}.fill-purple-500\\/40{fill:#9e47ec66}.fill-purple-500\\/70{fill:#9e47ecb3}.fill-purple-700{fill:#7919d0}.fill-orange-50{fill:#ffefea}.fill-orange-100{fill:#ffcfc0}.fill-orange-200{fill:#ffb097}.fill-orange-300{fill:#ff906d}.fill-orange-500{fill:#ff7043}.fill-orange-500\\/20{fill:#ff704333}.fill-orange-500\\/40{fill:#ff704366}.fill-orange-500\\/70{fill:#ff7043b3}.fill-orange-700{fill:#e54715}.fill-azure-50{fill:#e5f7fc}.fill-azure-100{fill:#b2e6f7}.fill-azure-200{fill:#80d6f1}.fill-azure-300{fill:#4dc5eb}.fill-azure-500{fill:#1ab5e6}.fill-azure-500\\/20{fill:#1ab5e633}.fill-azure-500\\/40{fill:#1ab5e666}.fill-azure-500\\/70{fill:#1ab5e6b3}.fill-azure-700{fill:#0093c9}.fill-gold-50{fill:#faf3e6}.fill-gold-100{fill:#efdcb4}.fill-gold-200{fill:#e4c481}.fill-gold-300{fill:#daad4f}.fill-gold-500{fill:#cf961d}.fill-gold-500\\/20{fill:#cf961d33}.fill-gold-500\\/40{fill:#cf961d66}.fill-gold-500\\/70{fill:#cf961db3}.fill-gold-700{fill:#b07000}.fill-brown-50{fill:#f1ede9}.fill-brown-100{fill:#d6c9bd}.fill-brown-200{fill:#bca691}.fill-brown-300{fill:#a08266}.fill-brown-500{fill:#865e3a}.fill-brown-500\\/20{fill:#865e3a33}.fill-brown-500\\/40{fill:#865e3a66}.fill-brown-500\\/70{fill:#865e3ab3}.fill-brown-700{fill:#5f330a}.fill-navy-50{fill:#e7e7fa}.fill-navy-100{fill:#b7b6f1}.fill-navy-200{fill:#8785e8}.fill-navy-300{fill:#5755df}.fill-navy-500{fill:#2724d6}.fill-navy-500\\/20{fill:#2724d633}.fill-navy-500\\/40{fill:#2724d666}.fill-navy-500\\/70{fill:#2724d6b3}.fill-navy-700{fill:#0000b8}.fill-lime-50{fill:#ecf6e7}.fill-lime-100{fill:#c5e3b6}.fill-lime-200{fill:#9ed186}.fill-lime-300{fill:#77bf56}.fill-lime-500{fill:#50ac25}.fill-lime-500\\/20{fill:#50ac2533}.fill-lime-500\\/40{fill:#50ac2566}.fill-lime-500\\/70{fill:#50ac25b3}.fill-lime-700{fill:#238900}.fill-magenta-50{fill:#fbe9f1}.fill-magenta-100{fill:#f4bed6}.fill-magenta-200{fill:#ed93bb}.fill-magenta-300{fill:#e668a0}.fill-magenta-500{fill:#df3d85}.fill-magenta-500\\/20{fill:#df3d8533}.fill-magenta-500\\/40{fill:#df3d8566}.fill-magenta-500\\/70{fill:#df3d85b3}.fill-magenta-700{fill:#c10d5d}.stroke-white-50{stroke:#fff}.stroke-white-100{stroke:#f7f7f7}.stroke-white-200{stroke:#eee}.stroke-white-300{stroke:#e5e5e5}.stroke-white-500{stroke:#dadada}.stroke-white-500\\/20{stroke:#dadada33}.stroke-white-500\\/40{stroke:#dadada66}.stroke-white-500\\/70{stroke:#dadadab3}.stroke-white-700{stroke:#ccc}.stroke-black-50{stroke:#aaa}.stroke-black-100{stroke:#919191}.stroke-black-200{stroke:#6c6c6c}.stroke-black-300{stroke:#424242}.stroke-black-500{stroke:#2f2f2f}.stroke-black-500\\/20{stroke:#2f2f2f33}.stroke-black-500\\/40{stroke:#2f2f2f66}.stroke-black-500\\/70{stroke:#2f2f2fb3}.stroke-black-700{stroke:#1d1d1d}.stroke-blue-50{stroke:#e9effd}.stroke-blue-100{stroke:#bed0f9}.stroke-blue-200{stroke:#92b1f5}.stroke-blue-300{stroke:#6692f1}.stroke-blue-500{stroke:#3b73ed}.stroke-blue-500\\/20{stroke:#3b73ed33}.stroke-blue-500\\/40{stroke:#3b73ed66}.stroke-blue-500\\/70{stroke:#3b73edb3}.stroke-blue-700{stroke:#0b49d1}.stroke-blue-900{stroke:#00179e}.stroke-red-50{stroke:#fbe9e9}.stroke-red-100{stroke:#f4bebe}.stroke-red-200{stroke:#ed9292}.stroke-red-300{stroke:#e66767}.stroke-red-500{stroke:#df3c3c}.stroke-red-500\\/20{stroke:#df3c3c33}.stroke-red-500\\/40{stroke:#df3c3c66}.stroke-red-500\\/70{stroke:#df3c3cb3}.stroke-red-700{stroke:#c20c0c}.stroke-green-50{stroke:#e7f4f3}.stroke-green-100{stroke:#b6dfdb}.stroke-green-200{stroke:#86c9c3}.stroke-green-300{stroke:#56b4ac}.stroke-green-500{stroke:#259f94}.stroke-green-500\\/20{stroke:#259f9433}.stroke-green-500\\/40{stroke:#259f9466}.stroke-green-500\\/70{stroke:#259f94b3}.stroke-green-700{stroke:#007a6e}.stroke-yellow-50{stroke:#fef4e8}.stroke-yellow-100{stroke:#fddeb9}.stroke-yellow-200{stroke:#fbc88b}.stroke-yellow-300{stroke:#fab15c}.stroke-yellow-500{stroke:#f89b2e}.stroke-yellow-500\\/20{stroke:#f89b2e33}.stroke-yellow-500\\/40{stroke:#f89b2e66}.stroke-yellow-500\\/70{stroke:#f89b2eb3}.stroke-yellow-700{stroke:#de7700}.stroke-purple-50{stroke:#f4ebfd}.stroke-purple-100{stroke:#dfc2f9}.stroke-purple-200{stroke:#c999f4}.stroke-purple-300{stroke:#b370f0}.stroke-purple-500{stroke:#9e47ec}.stroke-purple-500\\/20{stroke:#9e47ec33}.stroke-purple-500\\/40{stroke:#9e47ec66}.stroke-purple-500\\/70{stroke:#9e47ecb3}.stroke-purple-700{stroke:#7919d0}.stroke-orange-50{stroke:#ffefea}.stroke-orange-100{stroke:#ffcfc0}.stroke-orange-200{stroke:#ffb097}.stroke-orange-300{stroke:#ff906d}.stroke-orange-500{stroke:#ff7043}.stroke-orange-500\\/20{stroke:#ff704333}.stroke-orange-500\\/40{stroke:#ff704366}.stroke-orange-500\\/70{stroke:#ff7043b3}.stroke-orange-700{stroke:#e54715}.stroke-azure-50{stroke:#e5f7fc}.stroke-azure-100{stroke:#b2e6f7}.stroke-azure-200{stroke:#80d6f1}.stroke-azure-300{stroke:#4dc5eb}.stroke-azure-500{stroke:#1ab5e6}.stroke-azure-500\\/20{stroke:#1ab5e633}.stroke-azure-500\\/40{stroke:#1ab5e666}.stroke-azure-500\\/70{stroke:#1ab5e6b3}.stroke-azure-700{stroke:#0093c9}.stroke-gold-50{stroke:#faf3e6}.stroke-gold-100{stroke:#efdcb4}.stroke-gold-200{stroke:#e4c481}.stroke-gold-300{stroke:#daad4f}.stroke-gold-500{stroke:#cf961d}.stroke-gold-500\\/20{stroke:#cf961d33}.stroke-gold-500\\/40{stroke:#cf961d66}.stroke-gold-500\\/70{stroke:#cf961db3}.stroke-gold-700{stroke:#b07000}.stroke-brown-50{stroke:#f1ede9}.stroke-brown-100{stroke:#d6c9bd}.stroke-brown-200{stroke:#bca691}.stroke-brown-300{stroke:#a08266}.stroke-brown-500{stroke:#865e3a}.stroke-brown-500\\/20{stroke:#865e3a33}.stroke-brown-500\\/40{stroke:#865e3a66}.stroke-brown-500\\/70{stroke:#865e3ab3}.stroke-brown-700{stroke:#5f330a}.stroke-navy-50{stroke:#e7e7fa}.stroke-navy-100{stroke:#b7b6f1}.stroke-navy-200{stroke:#8785e8}.stroke-navy-300{stroke:#5755df}.stroke-navy-500{stroke:#2724d6}.stroke-navy-500\\/20{stroke:#2724d633}.stroke-navy-500\\/40{stroke:#2724d666}.stroke-navy-500\\/70{stroke:#2724d6b3}.stroke-navy-700{stroke:#0000b8}.stroke-lime-50{stroke:#ecf6e7}.stroke-lime-100{stroke:#c5e3b6}.stroke-lime-200{stroke:#9ed186}.stroke-lime-300{stroke:#77bf56}.stroke-lime-500{stroke:#50ac25}.stroke-lime-500\\/20{stroke:#50ac2533}.stroke-lime-500\\/40{stroke:#50ac2566}.stroke-lime-500\\/70{stroke:#50ac25b3}.stroke-lime-700{stroke:#238900}.stroke-magenta-50{stroke:#fbe9f1}.stroke-magenta-100{stroke:#f4bed6}.stroke-magenta-200{stroke:#ed93bb}.stroke-magenta-300{stroke:#e668a0}.stroke-magenta-500{stroke:#df3d85}.stroke-magenta-500\\/20{stroke:#df3d8533}.stroke-magenta-500\\/40{stroke:#df3d8566}.stroke-magenta-500\\/70{stroke:#df3d85b3}.stroke-magenta-700{stroke:#c10d5d}.hover\\:text-white-50:hover{color:#fff}.hover\\:text-white-100:hover{color:#f7f7f7}.hover\\:text-white-200:hover{color:#eee}.hover\\:text-white-300:hover{color:#e5e5e5}.hover\\:text-white-500:hover{color:#dadada}.hover\\:text-white-500:hover\\/20{color:#dadada33}.hover\\:text-white-500:hover\\/40{color:#dadada66}.hover\\:text-white-500:hover\\/70{color:#dadadab3}.hover\\:text-white-700:hover{color:#ccc}.hover\\:text-black-50:hover{color:#aaa}.hover\\:text-black-100:hover{color:#919191}.hover\\:text-black-200:hover{color:#6c6c6c}.hover\\:text-black-300:hover{color:#424242}.hover\\:text-black-500:hover{color:#2f2f2f}.hover\\:text-black-500:hover\\/20{color:#2f2f2f33}.hover\\:text-black-500:hover\\/40{color:#2f2f2f66}.hover\\:text-black-500:hover\\/70{color:#2f2f2fb3}.hover\\:text-black-700:hover{color:#1d1d1d}.hover\\:text-blue-50:hover{color:#e9effd}.hover\\:text-blue-100:hover{color:#bed0f9}.hover\\:text-blue-200:hover{color:#92b1f5}.hover\\:text-blue-300:hover{color:#6692f1}.hover\\:text-blue-500:hover{color:#3b73ed}.hover\\:text-blue-500:hover\\/20{color:#3b73ed33}.hover\\:text-blue-500:hover\\/40{color:#3b73ed66}.hover\\:text-blue-500:hover\\/70{color:#3b73edb3}.hover\\:text-blue-700:hover{color:#0b49d1}.hover\\:text-blue-900:hover{color:#00179e}.hover\\:text-red-50:hover{color:#fbe9e9}.hover\\:text-red-100:hover{color:#f4bebe}.hover\\:text-red-200:hover{color:#ed9292}.hover\\:text-red-300:hover{color:#e66767}.hover\\:text-red-500:hover{color:#df3c3c}.hover\\:text-red-500:hover\\/20{color:#df3c3c33}.hover\\:text-red-500:hover\\/40{color:#df3c3c66}.hover\\:text-red-500:hover\\/70{color:#df3c3cb3}.hover\\:text-red-700:hover{color:#c20c0c}.hover\\:text-green-50:hover{color:#e7f4f3}.hover\\:text-green-100:hover{color:#b6dfdb}.hover\\:text-green-200:hover{color:#86c9c3}.hover\\:text-green-300:hover{color:#56b4ac}.hover\\:text-green-500:hover{color:#259f94}.hover\\:text-green-500:hover\\/20{color:#259f9433}.hover\\:text-green-500:hover\\/40{color:#259f9466}.hover\\:text-green-500:hover\\/70{color:#259f94b3}.hover\\:text-green-700:hover{color:#007a6e}.hover\\:text-yellow-50:hover{color:#fef4e8}.hover\\:text-yellow-100:hover{color:#fddeb9}.hover\\:text-yellow-200:hover{color:#fbc88b}.hover\\:text-yellow-300:hover{color:#fab15c}.hover\\:text-yellow-500:hover{color:#f89b2e}.hover\\:text-yellow-500:hover\\/20{color:#f89b2e33}.hover\\:text-yellow-500:hover\\/40{color:#f89b2e66}.hover\\:text-yellow-500:hover\\/70{color:#f89b2eb3}.hover\\:text-yellow-700:hover{color:#de7700}.hover\\:text-purple-50:hover{color:#f4ebfd}.hover\\:text-purple-100:hover{color:#dfc2f9}.hover\\:text-purple-200:hover{color:#c999f4}.hover\\:text-purple-300:hover{color:#b370f0}.hover\\:text-purple-500:hover{color:#9e47ec}.hover\\:text-purple-500:hover\\/20{color:#9e47ec33}.hover\\:text-purple-500:hover\\/40{color:#9e47ec66}.hover\\:text-purple-500:hover\\/70{color:#9e47ecb3}.hover\\:text-purple-700:hover{color:#7919d0}.hover\\:text-orange-50:hover{color:#ffefea}.hover\\:text-orange-100:hover{color:#ffcfc0}.hover\\:text-orange-200:hover{color:#ffb097}.hover\\:text-orange-300:hover{color:#ff906d}.hover\\:text-orange-500:hover{color:#ff7043}.hover\\:text-orange-500:hover\\/20{color:#ff704333}.hover\\:text-orange-500:hover\\/40{color:#ff704366}.hover\\:text-orange-500:hover\\/70{color:#ff7043b3}.hover\\:text-orange-700:hover{color:#e54715}.hover\\:text-azure-50:hover{color:#e5f7fc}.hover\\:text-azure-100:hover{color:#b2e6f7}.hover\\:text-azure-200:hover{color:#80d6f1}.hover\\:text-azure-300:hover{color:#4dc5eb}.hover\\:text-azure-500:hover{color:#1ab5e6}.hover\\:text-azure-500:hover\\/20{color:#1ab5e633}.hover\\:text-azure-500:hover\\/40{color:#1ab5e666}.hover\\:text-azure-500:hover\\/70{color:#1ab5e6b3}.hover\\:text-azure-700:hover{color:#0093c9}.hover\\:text-gold-50:hover{color:#faf3e6}.hover\\:text-gold-100:hover{color:#efdcb4}.hover\\:text-gold-200:hover{color:#e4c481}.hover\\:text-gold-300:hover{color:#daad4f}.hover\\:text-gold-500:hover{color:#cf961d}.hover\\:text-gold-500:hover\\/20{color:#cf961d33}.hover\\:text-gold-500:hover\\/40{color:#cf961d66}.hover\\:text-gold-500:hover\\/70{color:#cf961db3}.hover\\:text-gold-700:hover{color:#b07000}.hover\\:text-brown-50:hover{color:#f1ede9}.hover\\:text-brown-100:hover{color:#d6c9bd}.hover\\:text-brown-200:hover{color:#bca691}.hover\\:text-brown-300:hover{color:#a08266}.hover\\:text-brown-500:hover{color:#865e3a}.hover\\:text-brown-500:hover\\/20{color:#865e3a33}.hover\\:text-brown-500:hover\\/40{color:#865e3a66}.hover\\:text-brown-500:hover\\/70{color:#865e3ab3}.hover\\:text-brown-700:hover{color:#5f330a}.hover\\:text-navy-50:hover{color:#e7e7fa}.hover\\:text-navy-100:hover{color:#b7b6f1}.hover\\:text-navy-200:hover{color:#8785e8}.hover\\:text-navy-300:hover{color:#5755df}.hover\\:text-navy-500:hover{color:#2724d6}.hover\\:text-navy-500:hover\\/20{color:#2724d633}.hover\\:text-navy-500:hover\\/40{color:#2724d666}.hover\\:text-navy-500:hover\\/70{color:#2724d6b3}.hover\\:text-navy-700:hover{color:#0000b8}.hover\\:text-lime-50:hover{color:#ecf6e7}.hover\\:text-lime-100:hover{color:#c5e3b6}.hover\\:text-lime-200:hover{color:#9ed186}.hover\\:text-lime-300:hover{color:#77bf56}.hover\\:text-lime-500:hover{color:#50ac25}.hover\\:text-lime-500:hover\\/20{color:#50ac2533}.hover\\:text-lime-500:hover\\/40{color:#50ac2566}.hover\\:text-lime-500:hover\\/70{color:#50ac25b3}.hover\\:text-lime-700:hover{color:#238900}.hover\\:text-magenta-50:hover{color:#fbe9f1}.hover\\:text-magenta-100:hover{color:#f4bed6}.hover\\:text-magenta-200:hover{color:#ed93bb}.hover\\:text-magenta-300:hover{color:#e668a0}.hover\\:text-magenta-500:hover{color:#df3d85}.hover\\:text-magenta-500:hover\\/20{color:#df3d8533}.hover\\:text-magenta-500:hover\\/40{color:#df3d8566}.hover\\:text-magenta-500:hover\\/70{color:#df3d85b3}.hover\\:text-magenta-700:hover{color:#c10d5d}.hover\\:bg-white-50:hover{background-color:#fff}.hover\\:bg-white-100:hover{background-color:#f7f7f7}.hover\\:bg-white-200:hover{background-color:#eee}.hover\\:bg-white-300:hover{background-color:#e5e5e5}.hover\\:bg-white-500:hover{background-color:#dadada}.hover\\:bg-white-500:hover\\/20{background-color:#dadada33}.hover\\:bg-white-500:hover\\/40{background-color:#dadada66}.hover\\:bg-white-500:hover\\/70{background-color:#dadadab3}.hover\\:bg-white-700:hover{background-color:#ccc}.hover\\:bg-black-50:hover{background-color:#aaa}.hover\\:bg-black-100:hover{background-color:#919191}.hover\\:bg-black-200:hover{background-color:#6c6c6c}.hover\\:bg-black-300:hover{background-color:#424242}.hover\\:bg-black-500:hover{background-color:#2f2f2f}.hover\\:bg-black-500:hover\\/20{background-color:#2f2f2f33}.hover\\:bg-black-500:hover\\/40{background-color:#2f2f2f66}.hover\\:bg-black-500:hover\\/70{background-color:#2f2f2fb3}.hover\\:bg-black-700:hover{background-color:#1d1d1d}.hover\\:bg-blue-50:hover{background-color:#e9effd}.hover\\:bg-blue-100:hover{background-color:#bed0f9}.hover\\:bg-blue-200:hover{background-color:#92b1f5}.hover\\:bg-blue-300:hover{background-color:#6692f1}.hover\\:bg-blue-500:hover{background-color:#3b73ed}.hover\\:bg-blue-500:hover\\/20{background-color:#3b73ed33}.hover\\:bg-blue-500:hover\\/40{background-color:#3b73ed66}.hover\\:bg-blue-500:hover\\/70{background-color:#3b73edb3}.hover\\:bg-blue-700:hover{background-color:#0b49d1}.hover\\:bg-blue-900:hover{background-color:#00179e}.hover\\:bg-red-50:hover{background-color:#fbe9e9}.hover\\:bg-red-100:hover{background-color:#f4bebe}.hover\\:bg-red-200:hover{background-color:#ed9292}.hover\\:bg-red-300:hover{background-color:#e66767}.hover\\:bg-red-500:hover{background-color:#df3c3c}.hover\\:bg-red-500:hover\\/20{background-color:#df3c3c33}.hover\\:bg-red-500:hover\\/40{background-color:#df3c3c66}.hover\\:bg-red-500:hover\\/70{background-color:#df3c3cb3}.hover\\:bg-red-700:hover{background-color:#c20c0c}.hover\\:bg-green-50:hover{background-color:#e7f4f3}.hover\\:bg-green-100:hover{background-color:#b6dfdb}.hover\\:bg-green-200:hover{background-color:#86c9c3}.hover\\:bg-green-300:hover{background-color:#56b4ac}.hover\\:bg-green-500:hover{background-color:#259f94}.hover\\:bg-green-500:hover\\/20{background-color:#259f9433}.hover\\:bg-green-500:hover\\/40{background-color:#259f9466}.hover\\:bg-green-500:hover\\/70{background-color:#259f94b3}.hover\\:bg-green-700:hover{background-color:#007a6e}.hover\\:bg-yellow-50:hover{background-color:#fef4e8}.hover\\:bg-yellow-100:hover{background-color:#fddeb9}.hover\\:bg-yellow-200:hover{background-color:#fbc88b}.hover\\:bg-yellow-300:hover{background-color:#fab15c}.hover\\:bg-yellow-500:hover{background-color:#f89b2e}.hover\\:bg-yellow-500:hover\\/20{background-color:#f89b2e33}.hover\\:bg-yellow-500:hover\\/40{background-color:#f89b2e66}.hover\\:bg-yellow-500:hover\\/70{background-color:#f89b2eb3}.hover\\:bg-yellow-700:hover{background-color:#de7700}.hover\\:bg-purple-50:hover{background-color:#f4ebfd}.hover\\:bg-purple-100:hover{background-color:#dfc2f9}.hover\\:bg-purple-200:hover{background-color:#c999f4}.hover\\:bg-purple-300:hover{background-color:#b370f0}.hover\\:bg-purple-500:hover{background-color:#9e47ec}.hover\\:bg-purple-500:hover\\/20{background-color:#9e47ec33}.hover\\:bg-purple-500:hover\\/40{background-color:#9e47ec66}.hover\\:bg-purple-500:hover\\/70{background-color:#9e47ecb3}.hover\\:bg-purple-700:hover{background-color:#7919d0}.hover\\:bg-orange-50:hover{background-color:#ffefea}.hover\\:bg-orange-100:hover{background-color:#ffcfc0}.hover\\:bg-orange-200:hover{background-color:#ffb097}.hover\\:bg-orange-300:hover{background-color:#ff906d}.hover\\:bg-orange-500:hover{background-color:#ff7043}.hover\\:bg-orange-500:hover\\/20{background-color:#ff704333}.hover\\:bg-orange-500:hover\\/40{background-color:#ff704366}.hover\\:bg-orange-500:hover\\/70{background-color:#ff7043b3}.hover\\:bg-orange-700:hover{background-color:#e54715}.hover\\:bg-azure-50:hover{background-color:#e5f7fc}.hover\\:bg-azure-100:hover{background-color:#b2e6f7}.hover\\:bg-azure-200:hover{background-color:#80d6f1}.hover\\:bg-azure-300:hover{background-color:#4dc5eb}.hover\\:bg-azure-500:hover{background-color:#1ab5e6}.hover\\:bg-azure-500:hover\\/20{background-color:#1ab5e633}.hover\\:bg-azure-500:hover\\/40{background-color:#1ab5e666}.hover\\:bg-azure-500:hover\\/70{background-color:#1ab5e6b3}.hover\\:bg-azure-700:hover{background-color:#0093c9}.hover\\:bg-gold-50:hover{background-color:#faf3e6}.hover\\:bg-gold-100:hover{background-color:#efdcb4}.hover\\:bg-gold-200:hover{background-color:#e4c481}.hover\\:bg-gold-300:hover{background-color:#daad4f}.hover\\:bg-gold-500:hover{background-color:#cf961d}.hover\\:bg-gold-500:hover\\/20{background-color:#cf961d33}.hover\\:bg-gold-500:hover\\/40{background-color:#cf961d66}.hover\\:bg-gold-500:hover\\/70{background-color:#cf961db3}.hover\\:bg-gold-700:hover{background-color:#b07000}.hover\\:bg-brown-50:hover{background-color:#f1ede9}.hover\\:bg-brown-100:hover{background-color:#d6c9bd}.hover\\:bg-brown-200:hover{background-color:#bca691}.hover\\:bg-brown-300:hover{background-color:#a08266}.hover\\:bg-brown-500:hover{background-color:#865e3a}.hover\\:bg-brown-500:hover\\/20{background-color:#865e3a33}.hover\\:bg-brown-500:hover\\/40{background-color:#865e3a66}.hover\\:bg-brown-500:hover\\/70{background-color:#865e3ab3}.hover\\:bg-brown-700:hover{background-color:#5f330a}.hover\\:bg-navy-50:hover{background-color:#e7e7fa}.hover\\:bg-navy-100:hover{background-color:#b7b6f1}.hover\\:bg-navy-200:hover{background-color:#8785e8}.hover\\:bg-navy-300:hover{background-color:#5755df}.hover\\:bg-navy-500:hover{background-color:#2724d6}.hover\\:bg-navy-500:hover\\/20{background-color:#2724d633}.hover\\:bg-navy-500:hover\\/40{background-color:#2724d666}.hover\\:bg-navy-500:hover\\/70{background-color:#2724d6b3}.hover\\:bg-navy-700:hover{background-color:#0000b8}.hover\\:bg-lime-50:hover{background-color:#ecf6e7}.hover\\:bg-lime-100:hover{background-color:#c5e3b6}.hover\\:bg-lime-200:hover{background-color:#9ed186}.hover\\:bg-lime-300:hover{background-color:#77bf56}.hover\\:bg-lime-500:hover{background-color:#50ac25}.hover\\:bg-lime-500:hover\\/20{background-color:#50ac2533}.hover\\:bg-lime-500:hover\\/40{background-color:#50ac2566}.hover\\:bg-lime-500:hover\\/70{background-color:#50ac25b3}.hover\\:bg-lime-700:hover{background-color:#238900}.hover\\:bg-magenta-50:hover{background-color:#fbe9f1}.hover\\:bg-magenta-100:hover{background-color:#f4bed6}.hover\\:bg-magenta-200:hover{background-color:#ed93bb}.hover\\:bg-magenta-300:hover{background-color:#e668a0}.hover\\:bg-magenta-500:hover{background-color:#df3d85}.hover\\:bg-magenta-500:hover\\/20{background-color:#df3d8533}.hover\\:bg-magenta-500:hover\\/40{background-color:#df3d8566}.hover\\:bg-magenta-500:hover\\/70{background-color:#df3d85b3}.hover\\:bg-magenta-700:hover{background-color:#c10d5d}.focus\\:text-white-50:focus-visible{color:#fff}.focus\\:text-white-100:focus-visible{color:#f7f7f7}.focus\\:text-white-200:focus-visible{color:#eee}.focus\\:text-white-300:focus-visible{color:#e5e5e5}.focus\\:text-white-500:focus-visible{color:#dadada}.focus\\:text-white-500:focus-visible\\/20{color:#dadada33}.focus\\:text-white-500:focus-visible\\/40{color:#dadada66}.focus\\:text-white-500:focus-visible\\/70{color:#dadadab3}.focus\\:text-white-700:focus-visible{color:#ccc}.focus\\:text-black-50:focus-visible{color:#aaa}.focus\\:text-black-100:focus-visible{color:#919191}.focus\\:text-black-200:focus-visible{color:#6c6c6c}.focus\\:text-black-300:focus-visible{color:#424242}.focus\\:text-black-500:focus-visible{color:#2f2f2f}.focus\\:text-black-500:focus-visible\\/20{color:#2f2f2f33}.focus\\:text-black-500:focus-visible\\/40{color:#2f2f2f66}.focus\\:text-black-500:focus-visible\\/70{color:#2f2f2fb3}.focus\\:text-black-700:focus-visible{color:#1d1d1d}.focus\\:text-blue-50:focus-visible{color:#e9effd}.focus\\:text-blue-100:focus-visible{color:#bed0f9}.focus\\:text-blue-200:focus-visible{color:#92b1f5}.focus\\:text-blue-300:focus-visible{color:#6692f1}.focus\\:text-blue-500:focus-visible{color:#3b73ed}.focus\\:text-blue-500:focus-visible\\/20{color:#3b73ed33}.focus\\:text-blue-500:focus-visible\\/40{color:#3b73ed66}.focus\\:text-blue-500:focus-visible\\/70{color:#3b73edb3}.focus\\:text-blue-700:focus-visible{color:#0b49d1}.focus\\:text-blue-900:focus-visible{color:#00179e}.focus\\:text-red-50:focus-visible{color:#fbe9e9}.focus\\:text-red-100:focus-visible{color:#f4bebe}.focus\\:text-red-200:focus-visible{color:#ed9292}.focus\\:text-red-300:focus-visible{color:#e66767}.focus\\:text-red-500:focus-visible{color:#df3c3c}.focus\\:text-red-500:focus-visible\\/20{color:#df3c3c33}.focus\\:text-red-500:focus-visible\\/40{color:#df3c3c66}.focus\\:text-red-500:focus-visible\\/70{color:#df3c3cb3}.focus\\:text-red-700:focus-visible{color:#c20c0c}.focus\\:text-green-50:focus-visible{color:#e7f4f3}.focus\\:text-green-100:focus-visible{color:#b6dfdb}.focus\\:text-green-200:focus-visible{color:#86c9c3}.focus\\:text-green-300:focus-visible{color:#56b4ac}.focus\\:text-green-500:focus-visible{color:#259f94}.focus\\:text-green-500:focus-visible\\/20{color:#259f9433}.focus\\:text-green-500:focus-visible\\/40{color:#259f9466}.focus\\:text-green-500:focus-visible\\/70{color:#259f94b3}.focus\\:text-green-700:focus-visible{color:#007a6e}.focus\\:text-yellow-50:focus-visible{color:#fef4e8}.focus\\:text-yellow-100:focus-visible{color:#fddeb9}.focus\\:text-yellow-200:focus-visible{color:#fbc88b}.focus\\:text-yellow-300:focus-visible{color:#fab15c}.focus\\:text-yellow-500:focus-visible{color:#f89b2e}.focus\\:text-yellow-500:focus-visible\\/20{color:#f89b2e33}.focus\\:text-yellow-500:focus-visible\\/40{color:#f89b2e66}.focus\\:text-yellow-500:focus-visible\\/70{color:#f89b2eb3}.focus\\:text-yellow-700:focus-visible{color:#de7700}.focus\\:text-purple-50:focus-visible{color:#f4ebfd}.focus\\:text-purple-100:focus-visible{color:#dfc2f9}.focus\\:text-purple-200:focus-visible{color:#c999f4}.focus\\:text-purple-300:focus-visible{color:#b370f0}.focus\\:text-purple-500:focus-visible{color:#9e47ec}.focus\\:text-purple-500:focus-visible\\/20{color:#9e47ec33}.focus\\:text-purple-500:focus-visible\\/40{color:#9e47ec66}.focus\\:text-purple-500:focus-visible\\/70{color:#9e47ecb3}.focus\\:text-purple-700:focus-visible{color:#7919d0}.focus\\:text-orange-50:focus-visible{color:#ffefea}.focus\\:text-orange-100:focus-visible{color:#ffcfc0}.focus\\:text-orange-200:focus-visible{color:#ffb097}.focus\\:text-orange-300:focus-visible{color:#ff906d}.focus\\:text-orange-500:focus-visible{color:#ff7043}.focus\\:text-orange-500:focus-visible\\/20{color:#ff704333}.focus\\:text-orange-500:focus-visible\\/40{color:#ff704366}.focus\\:text-orange-500:focus-visible\\/70{color:#ff7043b3}.focus\\:text-orange-700:focus-visible{color:#e54715}.focus\\:text-azure-50:focus-visible{color:#e5f7fc}.focus\\:text-azure-100:focus-visible{color:#b2e6f7}.focus\\:text-azure-200:focus-visible{color:#80d6f1}.focus\\:text-azure-300:focus-visible{color:#4dc5eb}.focus\\:text-azure-500:focus-visible{color:#1ab5e6}.focus\\:text-azure-500:focus-visible\\/20{color:#1ab5e633}.focus\\:text-azure-500:focus-visible\\/40{color:#1ab5e666}.focus\\:text-azure-500:focus-visible\\/70{color:#1ab5e6b3}.focus\\:text-azure-700:focus-visible{color:#0093c9}.focus\\:text-gold-50:focus-visible{color:#faf3e6}.focus\\:text-gold-100:focus-visible{color:#efdcb4}.focus\\:text-gold-200:focus-visible{color:#e4c481}.focus\\:text-gold-300:focus-visible{color:#daad4f}.focus\\:text-gold-500:focus-visible{color:#cf961d}.focus\\:text-gold-500:focus-visible\\/20{color:#cf961d33}.focus\\:text-gold-500:focus-visible\\/40{color:#cf961d66}.focus\\:text-gold-500:focus-visible\\/70{color:#cf961db3}.focus\\:text-gold-700:focus-visible{color:#b07000}.focus\\:text-brown-50:focus-visible{color:#f1ede9}.focus\\:text-brown-100:focus-visible{color:#d6c9bd}.focus\\:text-brown-200:focus-visible{color:#bca691}.focus\\:text-brown-300:focus-visible{color:#a08266}.focus\\:text-brown-500:focus-visible{color:#865e3a}.focus\\:text-brown-500:focus-visible\\/20{color:#865e3a33}.focus\\:text-brown-500:focus-visible\\/40{color:#865e3a66}.focus\\:text-brown-500:focus-visible\\/70{color:#865e3ab3}.focus\\:text-brown-700:focus-visible{color:#5f330a}.focus\\:text-navy-50:focus-visible{color:#e7e7fa}.focus\\:text-navy-100:focus-visible{color:#b7b6f1}.focus\\:text-navy-200:focus-visible{color:#8785e8}.focus\\:text-navy-300:focus-visible{color:#5755df}.focus\\:text-navy-500:focus-visible{color:#2724d6}.focus\\:text-navy-500:focus-visible\\/20{color:#2724d633}.focus\\:text-navy-500:focus-visible\\/40{color:#2724d666}.focus\\:text-navy-500:focus-visible\\/70{color:#2724d6b3}.focus\\:text-navy-700:focus-visible{color:#0000b8}.focus\\:text-lime-50:focus-visible{color:#ecf6e7}.focus\\:text-lime-100:focus-visible{color:#c5e3b6}.focus\\:text-lime-200:focus-visible{color:#9ed186}.focus\\:text-lime-300:focus-visible{color:#77bf56}.focus\\:text-lime-500:focus-visible{color:#50ac25}.focus\\:text-lime-500:focus-visible\\/20{color:#50ac2533}.focus\\:text-lime-500:focus-visible\\/40{color:#50ac2566}.focus\\:text-lime-500:focus-visible\\/70{color:#50ac25b3}.focus\\:text-lime-700:focus-visible{color:#238900}.focus\\:text-magenta-50:focus-visible{color:#fbe9f1}.focus\\:text-magenta-100:focus-visible{color:#f4bed6}.focus\\:text-magenta-200:focus-visible{color:#ed93bb}.focus\\:text-magenta-300:focus-visible{color:#e668a0}.focus\\:text-magenta-500:focus-visible{color:#df3d85}.focus\\:text-magenta-500:focus-visible\\/20{color:#df3d8533}.focus\\:text-magenta-500:focus-visible\\/40{color:#df3d8566}.focus\\:text-magenta-500:focus-visible\\/70{color:#df3d85b3}.focus\\:text-magenta-700:focus-visible{color:#c10d5d}.focus\\:bg-white-50:focus-visible{background-color:#fff}.focus\\:bg-white-100:focus-visible{background-color:#f7f7f7}.focus\\:bg-white-200:focus-visible{background-color:#eee}.focus\\:bg-white-300:focus-visible{background-color:#e5e5e5}.focus\\:bg-white-500:focus-visible{background-color:#dadada}.focus\\:bg-white-500:focus-visible\\/20{background-color:#dadada33}.focus\\:bg-white-500:focus-visible\\/40{background-color:#dadada66}.focus\\:bg-white-500:focus-visible\\/70{background-color:#dadadab3}.focus\\:bg-white-700:focus-visible{background-color:#ccc}.focus\\:bg-black-50:focus-visible{background-color:#aaa}.focus\\:bg-black-100:focus-visible{background-color:#919191}.focus\\:bg-black-200:focus-visible{background-color:#6c6c6c}.focus\\:bg-black-300:focus-visible{background-color:#424242}.focus\\:bg-black-500:focus-visible{background-color:#2f2f2f}.focus\\:bg-black-500:focus-visible\\/20{background-color:#2f2f2f33}.focus\\:bg-black-500:focus-visible\\/40{background-color:#2f2f2f66}.focus\\:bg-black-500:focus-visible\\/70{background-color:#2f2f2fb3}.focus\\:bg-black-700:focus-visible{background-color:#1d1d1d}.focus\\:bg-blue-50:focus-visible{background-color:#e9effd}.focus\\:bg-blue-100:focus-visible{background-color:#bed0f9}.focus\\:bg-blue-200:focus-visible{background-color:#92b1f5}.focus\\:bg-blue-300:focus-visible{background-color:#6692f1}.focus\\:bg-blue-500:focus-visible{background-color:#3b73ed}.focus\\:bg-blue-500:focus-visible\\/20{background-color:#3b73ed33}.focus\\:bg-blue-500:focus-visible\\/40{background-color:#3b73ed66}.focus\\:bg-blue-500:focus-visible\\/70{background-color:#3b73edb3}.focus\\:bg-blue-700:focus-visible{background-color:#0b49d1}.focus\\:bg-blue-900:focus-visible{background-color:#00179e}.focus\\:bg-red-50:focus-visible{background-color:#fbe9e9}.focus\\:bg-red-100:focus-visible{background-color:#f4bebe}.focus\\:bg-red-200:focus-visible{background-color:#ed9292}.focus\\:bg-red-300:focus-visible{background-color:#e66767}.focus\\:bg-red-500:focus-visible{background-color:#df3c3c}.focus\\:bg-red-500:focus-visible\\/20{background-color:#df3c3c33}.focus\\:bg-red-500:focus-visible\\/40{background-color:#df3c3c66}.focus\\:bg-red-500:focus-visible\\/70{background-color:#df3c3cb3}.focus\\:bg-red-700:focus-visible{background-color:#c20c0c}.focus\\:bg-green-50:focus-visible{background-color:#e7f4f3}.focus\\:bg-green-100:focus-visible{background-color:#b6dfdb}.focus\\:bg-green-200:focus-visible{background-color:#86c9c3}.focus\\:bg-green-300:focus-visible{background-color:#56b4ac}.focus\\:bg-green-500:focus-visible{background-color:#259f94}.focus\\:bg-green-500:focus-visible\\/20{background-color:#259f9433}.focus\\:bg-green-500:focus-visible\\/40{background-color:#259f9466}.focus\\:bg-green-500:focus-visible\\/70{background-color:#259f94b3}.focus\\:bg-green-700:focus-visible{background-color:#007a6e}.focus\\:bg-yellow-50:focus-visible{background-color:#fef4e8}.focus\\:bg-yellow-100:focus-visible{background-color:#fddeb9}.focus\\:bg-yellow-200:focus-visible{background-color:#fbc88b}.focus\\:bg-yellow-300:focus-visible{background-color:#fab15c}.focus\\:bg-yellow-500:focus-visible{background-color:#f89b2e}.focus\\:bg-yellow-500:focus-visible\\/20{background-color:#f89b2e33}.focus\\:bg-yellow-500:focus-visible\\/40{background-color:#f89b2e66}.focus\\:bg-yellow-500:focus-visible\\/70{background-color:#f89b2eb3}.focus\\:bg-yellow-700:focus-visible{background-color:#de7700}.focus\\:bg-purple-50:focus-visible{background-color:#f4ebfd}.focus\\:bg-purple-100:focus-visible{background-color:#dfc2f9}.focus\\:bg-purple-200:focus-visible{background-color:#c999f4}.focus\\:bg-purple-300:focus-visible{background-color:#b370f0}.focus\\:bg-purple-500:focus-visible{background-color:#9e47ec}.focus\\:bg-purple-500:focus-visible\\/20{background-color:#9e47ec33}.focus\\:bg-purple-500:focus-visible\\/40{background-color:#9e47ec66}.focus\\:bg-purple-500:focus-visible\\/70{background-color:#9e47ecb3}.focus\\:bg-purple-700:focus-visible{background-color:#7919d0}.focus\\:bg-orange-50:focus-visible{background-color:#ffefea}.focus\\:bg-orange-100:focus-visible{background-color:#ffcfc0}.focus\\:bg-orange-200:focus-visible{background-color:#ffb097}.focus\\:bg-orange-300:focus-visible{background-color:#ff906d}.focus\\:bg-orange-500:focus-visible{background-color:#ff7043}.focus\\:bg-orange-500:focus-visible\\/20{background-color:#ff704333}.focus\\:bg-orange-500:focus-visible\\/40{background-color:#ff704366}.focus\\:bg-orange-500:focus-visible\\/70{background-color:#ff7043b3}.focus\\:bg-orange-700:focus-visible{background-color:#e54715}.focus\\:bg-azure-50:focus-visible{background-color:#e5f7fc}.focus\\:bg-azure-100:focus-visible{background-color:#b2e6f7}.focus\\:bg-azure-200:focus-visible{background-color:#80d6f1}.focus\\:bg-azure-300:focus-visible{background-color:#4dc5eb}.focus\\:bg-azure-500:focus-visible{background-color:#1ab5e6}.focus\\:bg-azure-500:focus-visible\\/20{background-color:#1ab5e633}.focus\\:bg-azure-500:focus-visible\\/40{background-color:#1ab5e666}.focus\\:bg-azure-500:focus-visible\\/70{background-color:#1ab5e6b3}.focus\\:bg-azure-700:focus-visible{background-color:#0093c9}.focus\\:bg-gold-50:focus-visible{background-color:#faf3e6}.focus\\:bg-gold-100:focus-visible{background-color:#efdcb4}.focus\\:bg-gold-200:focus-visible{background-color:#e4c481}.focus\\:bg-gold-300:focus-visible{background-color:#daad4f}.focus\\:bg-gold-500:focus-visible{background-color:#cf961d}.focus\\:bg-gold-500:focus-visible\\/20{background-color:#cf961d33}.focus\\:bg-gold-500:focus-visible\\/40{background-color:#cf961d66}.focus\\:bg-gold-500:focus-visible\\/70{background-color:#cf961db3}.focus\\:bg-gold-700:focus-visible{background-color:#b07000}.focus\\:bg-brown-50:focus-visible{background-color:#f1ede9}.focus\\:bg-brown-100:focus-visible{background-color:#d6c9bd}.focus\\:bg-brown-200:focus-visible{background-color:#bca691}.focus\\:bg-brown-300:focus-visible{background-color:#a08266}.focus\\:bg-brown-500:focus-visible{background-color:#865e3a}.focus\\:bg-brown-500:focus-visible\\/20{background-color:#865e3a33}.focus\\:bg-brown-500:focus-visible\\/40{background-color:#865e3a66}.focus\\:bg-brown-500:focus-visible\\/70{background-color:#865e3ab3}.focus\\:bg-brown-700:focus-visible{background-color:#5f330a}.focus\\:bg-navy-50:focus-visible{background-color:#e7e7fa}.focus\\:bg-navy-100:focus-visible{background-color:#b7b6f1}.focus\\:bg-navy-200:focus-visible{background-color:#8785e8}.focus\\:bg-navy-300:focus-visible{background-color:#5755df}.focus\\:bg-navy-500:focus-visible{background-color:#2724d6}.focus\\:bg-navy-500:focus-visible\\/20{background-color:#2724d633}.focus\\:bg-navy-500:focus-visible\\/40{background-color:#2724d666}.focus\\:bg-navy-500:focus-visible\\/70{background-color:#2724d6b3}.focus\\:bg-navy-700:focus-visible{background-color:#0000b8}.focus\\:bg-lime-50:focus-visible{background-color:#ecf6e7}.focus\\:bg-lime-100:focus-visible{background-color:#c5e3b6}.focus\\:bg-lime-200:focus-visible{background-color:#9ed186}.focus\\:bg-lime-300:focus-visible{background-color:#77bf56}.focus\\:bg-lime-500:focus-visible{background-color:#50ac25}.focus\\:bg-lime-500:focus-visible\\/20{background-color:#50ac2533}.focus\\:bg-lime-500:focus-visible\\/40{background-color:#50ac2566}.focus\\:bg-lime-500:focus-visible\\/70{background-color:#50ac25b3}.focus\\:bg-lime-700:focus-visible{background-color:#238900}.focus\\:bg-magenta-50:focus-visible{background-color:#fbe9f1}.focus\\:bg-magenta-100:focus-visible{background-color:#f4bed6}.focus\\:bg-magenta-200:focus-visible{background-color:#ed93bb}.focus\\:bg-magenta-300:focus-visible{background-color:#e668a0}.focus\\:bg-magenta-500:focus-visible{background-color:#df3d85}.focus\\:bg-magenta-500:focus-visible\\/20{background-color:#df3d8533}.focus\\:bg-magenta-500:focus-visible\\/40{background-color:#df3d8566}.focus\\:bg-magenta-500:focus-visible\\/70{background-color:#df3d85b3}.focus\\:bg-magenta-700:focus-visible{background-color:#c10d5d}.active\\:text-white-50:active{color:#fff}.active\\:text-white-100:active{color:#f7f7f7}.active\\:text-white-200:active{color:#eee}.active\\:text-white-300:active{color:#e5e5e5}.active\\:text-white-500:active{color:#dadada}.active\\:text-white-500:active\\/20{color:#dadada33}.active\\:text-white-500:active\\/40{color:#dadada66}.active\\:text-white-500:active\\/70{color:#dadadab3}.active\\:text-white-700:active{color:#ccc}.active\\:text-black-50:active{color:#aaa}.active\\:text-black-100:active{color:#919191}.active\\:text-black-200:active{color:#6c6c6c}.active\\:text-black-300:active{color:#424242}.active\\:text-black-500:active{color:#2f2f2f}.active\\:text-black-500:active\\/20{color:#2f2f2f33}.active\\:text-black-500:active\\/40{color:#2f2f2f66}.active\\:text-black-500:active\\/70{color:#2f2f2fb3}.active\\:text-black-700:active{color:#1d1d1d}.active\\:text-blue-50:active{color:#e9effd}.active\\:text-blue-100:active{color:#bed0f9}.active\\:text-blue-200:active{color:#92b1f5}.active\\:text-blue-300:active{color:#6692f1}.active\\:text-blue-500:active{color:#3b73ed}.active\\:text-blue-500:active\\/20{color:#3b73ed33}.active\\:text-blue-500:active\\/40{color:#3b73ed66}.active\\:text-blue-500:active\\/70{color:#3b73edb3}.active\\:text-blue-700:active{color:#0b49d1}.active\\:text-blue-900:active{color:#00179e}.active\\:text-red-50:active{color:#fbe9e9}.active\\:text-red-100:active{color:#f4bebe}.active\\:text-red-200:active{color:#ed9292}.active\\:text-red-300:active{color:#e66767}.active\\:text-red-500:active{color:#df3c3c}.active\\:text-red-500:active\\/20{color:#df3c3c33}.active\\:text-red-500:active\\/40{color:#df3c3c66}.active\\:text-red-500:active\\/70{color:#df3c3cb3}.active\\:text-red-700:active{color:#c20c0c}.active\\:text-green-50:active{color:#e7f4f3}.active\\:text-green-100:active{color:#b6dfdb}.active\\:text-green-200:active{color:#86c9c3}.active\\:text-green-300:active{color:#56b4ac}.active\\:text-green-500:active{color:#259f94}.active\\:text-green-500:active\\/20{color:#259f9433}.active\\:text-green-500:active\\/40{color:#259f9466}.active\\:text-green-500:active\\/70{color:#259f94b3}.active\\:text-green-700:active{color:#007a6e}.active\\:text-yellow-50:active{color:#fef4e8}.active\\:text-yellow-100:active{color:#fddeb9}.active\\:text-yellow-200:active{color:#fbc88b}.active\\:text-yellow-300:active{color:#fab15c}.active\\:text-yellow-500:active{color:#f89b2e}.active\\:text-yellow-500:active\\/20{color:#f89b2e33}.active\\:text-yellow-500:active\\/40{color:#f89b2e66}.active\\:text-yellow-500:active\\/70{color:#f89b2eb3}.active\\:text-yellow-700:active{color:#de7700}.active\\:text-purple-50:active{color:#f4ebfd}.active\\:text-purple-100:active{color:#dfc2f9}.active\\:text-purple-200:active{color:#c999f4}.active\\:text-purple-300:active{color:#b370f0}.active\\:text-purple-500:active{color:#9e47ec}.active\\:text-purple-500:active\\/20{color:#9e47ec33}.active\\:text-purple-500:active\\/40{color:#9e47ec66}.active\\:text-purple-500:active\\/70{color:#9e47ecb3}.active\\:text-purple-700:active{color:#7919d0}.active\\:text-orange-50:active{color:#ffefea}.active\\:text-orange-100:active{color:#ffcfc0}.active\\:text-orange-200:active{color:#ffb097}.active\\:text-orange-300:active{color:#ff906d}.active\\:text-orange-500:active{color:#ff7043}.active\\:text-orange-500:active\\/20{color:#ff704333}.active\\:text-orange-500:active\\/40{color:#ff704366}.active\\:text-orange-500:active\\/70{color:#ff7043b3}.active\\:text-orange-700:active{color:#e54715}.active\\:text-azure-50:active{color:#e5f7fc}.active\\:text-azure-100:active{color:#b2e6f7}.active\\:text-azure-200:active{color:#80d6f1}.active\\:text-azure-300:active{color:#4dc5eb}.active\\:text-azure-500:active{color:#1ab5e6}.active\\:text-azure-500:active\\/20{color:#1ab5e633}.active\\:text-azure-500:active\\/40{color:#1ab5e666}.active\\:text-azure-500:active\\/70{color:#1ab5e6b3}.active\\:text-azure-700:active{color:#0093c9}.active\\:text-gold-50:active{color:#faf3e6}.active\\:text-gold-100:active{color:#efdcb4}.active\\:text-gold-200:active{color:#e4c481}.active\\:text-gold-300:active{color:#daad4f}.active\\:text-gold-500:active{color:#cf961d}.active\\:text-gold-500:active\\/20{color:#cf961d33}.active\\:text-gold-500:active\\/40{color:#cf961d66}.active\\:text-gold-500:active\\/70{color:#cf961db3}.active\\:text-gold-700:active{color:#b07000}.active\\:text-brown-50:active{color:#f1ede9}.active\\:text-brown-100:active{color:#d6c9bd}.active\\:text-brown-200:active{color:#bca691}.active\\:text-brown-300:active{color:#a08266}.active\\:text-brown-500:active{color:#865e3a}.active\\:text-brown-500:active\\/20{color:#865e3a33}.active\\:text-brown-500:active\\/40{color:#865e3a66}.active\\:text-brown-500:active\\/70{color:#865e3ab3}.active\\:text-brown-700:active{color:#5f330a}.active\\:text-navy-50:active{color:#e7e7fa}.active\\:text-navy-100:active{color:#b7b6f1}.active\\:text-navy-200:active{color:#8785e8}.active\\:text-navy-300:active{color:#5755df}.active\\:text-navy-500:active{color:#2724d6}.active\\:text-navy-500:active\\/20{color:#2724d633}.active\\:text-navy-500:active\\/40{color:#2724d666}.active\\:text-navy-500:active\\/70{color:#2724d6b3}.active\\:text-navy-700:active{color:#0000b8}.active\\:text-lime-50:active{color:#ecf6e7}.active\\:text-lime-100:active{color:#c5e3b6}.active\\:text-lime-200:active{color:#9ed186}.active\\:text-lime-300:active{color:#77bf56}.active\\:text-lime-500:active{color:#50ac25}.active\\:text-lime-500:active\\/20{color:#50ac2533}.active\\:text-lime-500:active\\/40{color:#50ac2566}.active\\:text-lime-500:active\\/70{color:#50ac25b3}.active\\:text-lime-700:active{color:#238900}.active\\:text-magenta-50:active{color:#fbe9f1}.active\\:text-magenta-100:active{color:#f4bed6}.active\\:text-magenta-200:active{color:#ed93bb}.active\\:text-magenta-300:active{color:#e668a0}.active\\:text-magenta-500:active{color:#df3d85}.active\\:text-magenta-500:active\\/20{color:#df3d8533}.active\\:text-magenta-500:active\\/40{color:#df3d8566}.active\\:text-magenta-500:active\\/70{color:#df3d85b3}.active\\:text-magenta-700:active{color:#c10d5d}.active\\:bg-white-50:active{background-color:#fff}.active\\:bg-white-100:active{background-color:#f7f7f7}.active\\:bg-white-200:active{background-color:#eee}.active\\:bg-white-300:active{background-color:#e5e5e5}.active\\:bg-white-500:active{background-color:#dadada}.active\\:bg-white-500:active\\/20{background-color:#dadada33}.active\\:bg-white-500:active\\/40{background-color:#dadada66}.active\\:bg-white-500:active\\/70{background-color:#dadadab3}.active\\:bg-white-700:active{background-color:#ccc}.active\\:bg-black-50:active{background-color:#aaa}.active\\:bg-black-100:active{background-color:#919191}.active\\:bg-black-200:active{background-color:#6c6c6c}.active\\:bg-black-300:active{background-color:#424242}.active\\:bg-black-500:active{background-color:#2f2f2f}.active\\:bg-black-500:active\\/20{background-color:#2f2f2f33}.active\\:bg-black-500:active\\/40{background-color:#2f2f2f66}.active\\:bg-black-500:active\\/70{background-color:#2f2f2fb3}.active\\:bg-black-700:active{background-color:#1d1d1d}.active\\:bg-blue-50:active{background-color:#e9effd}.active\\:bg-blue-100:active{background-color:#bed0f9}.active\\:bg-blue-200:active{background-color:#92b1f5}.active\\:bg-blue-300:active{background-color:#6692f1}.active\\:bg-blue-500:active{background-color:#3b73ed}.active\\:bg-blue-500:active\\/20{background-color:#3b73ed33}.active\\:bg-blue-500:active\\/40{background-color:#3b73ed66}.active\\:bg-blue-500:active\\/70{background-color:#3b73edb3}.active\\:bg-blue-700:active{background-color:#0b49d1}.active\\:bg-blue-900:active{background-color:#00179e}.active\\:bg-red-50:active{background-color:#fbe9e9}.active\\:bg-red-100:active{background-color:#f4bebe}.active\\:bg-red-200:active{background-color:#ed9292}.active\\:bg-red-300:active{background-color:#e66767}.active\\:bg-red-500:active{background-color:#df3c3c}.active\\:bg-red-500:active\\/20{background-color:#df3c3c33}.active\\:bg-red-500:active\\/40{background-color:#df3c3c66}.active\\:bg-red-500:active\\/70{background-color:#df3c3cb3}.active\\:bg-red-700:active{background-color:#c20c0c}.active\\:bg-green-50:active{background-color:#e7f4f3}.active\\:bg-green-100:active{background-color:#b6dfdb}.active\\:bg-green-200:active{background-color:#86c9c3}.active\\:bg-green-300:active{background-color:#56b4ac}.active\\:bg-green-500:active{background-color:#259f94}.active\\:bg-green-500:active\\/20{background-color:#259f9433}.active\\:bg-green-500:active\\/40{background-color:#259f9466}.active\\:bg-green-500:active\\/70{background-color:#259f94b3}.active\\:bg-green-700:active{background-color:#007a6e}.active\\:bg-yellow-50:active{background-color:#fef4e8}.active\\:bg-yellow-100:active{background-color:#fddeb9}.active\\:bg-yellow-200:active{background-color:#fbc88b}.active\\:bg-yellow-300:active{background-color:#fab15c}.active\\:bg-yellow-500:active{background-color:#f89b2e}.active\\:bg-yellow-500:active\\/20{background-color:#f89b2e33}.active\\:bg-yellow-500:active\\/40{background-color:#f89b2e66}.active\\:bg-yellow-500:active\\/70{background-color:#f89b2eb3}.active\\:bg-yellow-700:active{background-color:#de7700}.active\\:bg-purple-50:active{background-color:#f4ebfd}.active\\:bg-purple-100:active{background-color:#dfc2f9}.active\\:bg-purple-200:active{background-color:#c999f4}.active\\:bg-purple-300:active{background-color:#b370f0}.active\\:bg-purple-500:active{background-color:#9e47ec}.active\\:bg-purple-500:active\\/20{background-color:#9e47ec33}.active\\:bg-purple-500:active\\/40{background-color:#9e47ec66}.active\\:bg-purple-500:active\\/70{background-color:#9e47ecb3}.active\\:bg-purple-700:active{background-color:#7919d0}.active\\:bg-orange-50:active{background-color:#ffefea}.active\\:bg-orange-100:active{background-color:#ffcfc0}.active\\:bg-orange-200:active{background-color:#ffb097}.active\\:bg-orange-300:active{background-color:#ff906d}.active\\:bg-orange-500:active{background-color:#ff7043}.active\\:bg-orange-500:active\\/20{background-color:#ff704333}.active\\:bg-orange-500:active\\/40{background-color:#ff704366}.active\\:bg-orange-500:active\\/70{background-color:#ff7043b3}.active\\:bg-orange-700:active{background-color:#e54715}.active\\:bg-azure-50:active{background-color:#e5f7fc}.active\\:bg-azure-100:active{background-color:#b2e6f7}.active\\:bg-azure-200:active{background-color:#80d6f1}.active\\:bg-azure-300:active{background-color:#4dc5eb}.active\\:bg-azure-500:active{background-color:#1ab5e6}.active\\:bg-azure-500:active\\/20{background-color:#1ab5e633}.active\\:bg-azure-500:active\\/40{background-color:#1ab5e666}.active\\:bg-azure-500:active\\/70{background-color:#1ab5e6b3}.active\\:bg-azure-700:active{background-color:#0093c9}.active\\:bg-gold-50:active{background-color:#faf3e6}.active\\:bg-gold-100:active{background-color:#efdcb4}.active\\:bg-gold-200:active{background-color:#e4c481}.active\\:bg-gold-300:active{background-color:#daad4f}.active\\:bg-gold-500:active{background-color:#cf961d}.active\\:bg-gold-500:active\\/20{background-color:#cf961d33}.active\\:bg-gold-500:active\\/40{background-color:#cf961d66}.active\\:bg-gold-500:active\\/70{background-color:#cf961db3}.active\\:bg-gold-700:active{background-color:#b07000}.active\\:bg-brown-50:active{background-color:#f1ede9}.active\\:bg-brown-100:active{background-color:#d6c9bd}.active\\:bg-brown-200:active{background-color:#bca691}.active\\:bg-brown-300:active{background-color:#a08266}.active\\:bg-brown-500:active{background-color:#865e3a}.active\\:bg-brown-500:active\\/20{background-color:#865e3a33}.active\\:bg-brown-500:active\\/40{background-color:#865e3a66}.active\\:bg-brown-500:active\\/70{background-color:#865e3ab3}.active\\:bg-brown-700:active{background-color:#5f330a}.active\\:bg-navy-50:active{background-color:#e7e7fa}.active\\:bg-navy-100:active{background-color:#b7b6f1}.active\\:bg-navy-200:active{background-color:#8785e8}.active\\:bg-navy-300:active{background-color:#5755df}.active\\:bg-navy-500:active{background-color:#2724d6}.active\\:bg-navy-500:active\\/20{background-color:#2724d633}.active\\:bg-navy-500:active\\/40{background-color:#2724d666}.active\\:bg-navy-500:active\\/70{background-color:#2724d6b3}.active\\:bg-navy-700:active{background-color:#0000b8}.active\\:bg-lime-50:active{background-color:#ecf6e7}.active\\:bg-lime-100:active{background-color:#c5e3b6}.active\\:bg-lime-200:active{background-color:#9ed186}.active\\:bg-lime-300:active{background-color:#77bf56}.active\\:bg-lime-500:active{background-color:#50ac25}.active\\:bg-lime-500:active\\/20{background-color:#50ac2533}.active\\:bg-lime-500:active\\/40{background-color:#50ac2566}.active\\:bg-lime-500:active\\/70{background-color:#50ac25b3}.active\\:bg-lime-700:active{background-color:#238900}.active\\:bg-magenta-50:active{background-color:#fbe9f1}.active\\:bg-magenta-100:active{background-color:#f4bed6}.active\\:bg-magenta-200:active{background-color:#ed93bb}.active\\:bg-magenta-300:active{background-color:#e668a0}.active\\:bg-magenta-500:active{background-color:#df3d85}.active\\:bg-magenta-500:active\\/20{background-color:#df3d8533}.active\\:bg-magenta-500:active\\/40{background-color:#df3d8566}.active\\:bg-magenta-500:active\\/70{background-color:#df3d85b3}.active\\:bg-magenta-700:active{background-color:#c10d5d}.transition{transition:all .2s ease-in-out}.disable-selection,.logo-container .logo-image,.cover-container .cover-image,.profile-rounded-image,.profile-square-image{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none}.drop-zone-container.has-logo{display:none}.largeContainer{position:relative;min-height:178px}.largeContainer .cropper-overlay{width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:1050;gap:4px;opacity:1;position:absolute}.largeContainer .cropper-overlay .img-cropper{height:178px!important}.largeContainer.hasCropper{min-height:212px;position:relative}.logo-container{position:absolute;top:0;left:0;width:616px;height:214px;overflow:hidden}.logo-container .logo-image{width:100%;height:100%;z-index:1000}.logoVar{height:214px}.logoVar.hasCropper{height:240px!important}.logoVar.hasCropper .drop-zone-container{display:none!important}.logoVar .drop-zone-container .drop-zone,.logoVar .drop-zone-container .drop-zone-error{height:204px}.logoVar .cropper-overlay{height:240px!important}.logoVar .cropper-overlay .img-cropper{height:206px!important}.cover-container{width:267px;height:178px}.cover-container .cover-image{width:100%;height:100%;object-fit:cover;display:block}.profile-rounded-image{width:178px;height:178px;object-fit:cover;display:block;border-radius:50%}.profile-square-image{width:160px;height:178px;object-fit:cover;display:block;border-radius:2px}.container.dragMode{position:fixed;inset:0;z-index:99999999!important;height:100%!important;width:100%!important;display:flex;justify-content:center;align-items:center;background-color:#fff!important}.container.dragMode .avatar,.container.dragMode .profile-container,.container.dragMode .logo-container,.container.dragMode .cover-container,.container.dragMode .docs{display:none}.container.dragMode .drop-zone-container{position:relative;width:100%;height:100%;flex:1 1 100%}.container.dragMode .drop-zone-container .drop-zone{flex-direction:column;height:100%;outline:none!important;margin:0!important;border:4px dashed #cccccc;border-color:#ccc}.container.dragMode .drop-zone-container .drop-zone .illustration,.container.dragMode .drop-zone-container .drop-zone svg{width:200px!important;height:200px!important;pointer-events:none!important}.container.dragMode .drop-zone-container .drop-zone .drag-icons-container{position:relative}.container.dragMode .drop-zone-container .drop-zone .drag-icons-container .drag-icon-document{width:80px!important;height:80px!important}.container.dragMode .drop-zone-container .drop-zone .drag-icons-container .drag-icon-document svg{width:80px!important;height:80px!important}.container.dragMode .drop-zone-container .drop-zone .drag-icons-container ng-lottie{width:200px;height:200px;display:block}.container.dragMode .drop-zone-container .drop-zone .drop-zone-focus-text{margin-top:32px}.container.dragMode .drop-zone-container .drop-zone .drop-zone-focus-text .heading{font-weight:700;font-size:14px;line-height:18px}.container.dragMode:hover .drop-zone{background-color:#fff!important}.container.dragMode.onDragover .drop-zone-container .drop-zone{border-color:#ccc}.is-documents-mode .dragMode{height:120px!important}.dragModeDocuments .drop-zone-container .drop-zone{background-color:#fff!important}.dragModeDocuments .drop-zone-container .drop-zone .drop-zone-focus-text .heading{font-weight:700;font-size:14px;line-height:18px}.is-details-slider{width:100%!important;height:100%!important;overflow:hidden}.is-details-slider .sliders{display:flex;align-items:center;justify-content:center;gap:4px;min-height:6px!important;height:auto!important;width:100%!important;margin-bottom:6px!important;margin-top:12px!important;opacity:0;pointer-events:none;transition:opacity .3s ease-in-out}.is-details-slider .sliders .slider-item{width:12px;height:6px;border-radius:2px;background-color:#e5e5e5;transform-origin:center;cursor:pointer!important;transition:width .2s ease-in-out,background-color .2s ease-in-out}.is-details-slider .sliders .slider-item.active{width:20px;background-color:#919191}.is-details-slider .drop-zone-container{display:none!important}.is-details-slider .docs{width:100%!important;position:relative!important;overflow:hidden!important}.is-details-slider .docs .carousel-button{opacity:0!important;pointer-events:none!important;transition:opacity .3s ease-in-out!important}.is-details-slider .docs:hover .carousel-button{opacity:1!important;pointer-events:auto!important}.is-details-slider .docs:hover .carousel-button[disabled]{opacity:0!important;pointer-events:none!important}.is-details-slider .doc-container{display:flex!important;align-items:flex-start!important;height:auto!important;flex-shrink:0!important;gap:0!important;position:relative!important;transition:transform .3s ease-out}.is-details-slider .doc{flex:0 0 100%!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;display:flex!important;justify-content:center!important;background-color:transparent!important;flex-shrink:0!important;position:relative!important}.is-details-slider .doc.doc-hidden{height:0!important;max-height:0!important;min-height:0!important;overflow:hidden!important;opacity:0;pointer-events:none;visibility:hidden;margin:0!important;padding:0!important}.is-details-slider .doc.doc-visible{height:auto!important;opacity:1;visibility:visible}.is-details-slider .carousel-button{position:absolute!important;top:45%!important}.is-details-slider:hover .sliders{opacity:1;pointer-events:auto}.is-drawer-mode{width:100%!important;padding:4px!important;position:absolute!important;max-width:100%!important}.is-drawer-mode .drop-zone-container{display:none!important}.is-drawer-mode .skeleton-container.drawer-position{width:100%!important;position:relative!important;overflow:hidden!important;display:flex;align-items:center;gap:4px}.is-drawer-mode .skeleton-container.drawer-position .skeleton-item{width:194px;height:194px;flex:0 0 194px;border-radius:2px;padding:4px}.is-drawer-mode .skeleton-container.drawer-position .skeleton-item .skeleton-bar{width:100%;height:100%;background-color:#fff}.is-drawer-mode .docs{width:100%!important;position:relative!important;overflow:hidden!important}.is-drawer-mode .docs .doc-container{display:flex;width:auto!important;height:auto!important;gap:4px!important;transition:transform .3s ease-out}.is-drawer-mode .docs .doc-container .doc{width:194px!important;height:194px!important;flex:0 0 194px!important;background-color:transparent!important}.is-drawer-mode .carousel-button.carousel-right{right:4px!important;position:absolute!important}.is-drawer-mode .carousel-button.carousel-left{left:4px!important;position:absolute!important}.isCoverDetails{width:100%!important;height:100%!important}.isCoverDetails .drop-zone-container{display:none!important}.isCoverDetails .docs{width:100%!important}.isCoverDetails .docs .doc{flex:0 0 100%!important;width:100%!important;height:auto!important;display:block!important;background-color:transparent!important}.more-docs{width:148px;flex:0 0 148px}.more-docs .illustration{width:80px;height:80px}.more-docs .drop-zone{padding:22px 0;flex-direction:column}.more-docs .drop-zone-error,.more-docs .drop-zone-error .drop-zone-text{padding:0 12px}.small-more-docs{width:148px!important}.small-more-docs .illustration,.small-more-docs svg{width:80px!important;height:80px!important}.small-more-docs .drop-zone{padding:22px 0!important;flex-direction:column}.unsupported .drop-zone-error{display:flex}.unsupported .drop-zone-text{padding:0 12px}.unsupported .drop-zone-text .heading.invalid{line-height:18px}.unsupported .drop-zone-text .subtext{line-height:14px;margin-bottom:0}.unsupported .cancel-button .cancel-icon{width:18px!important;height:18px!important}.unsupported .cancel-button-documents{display:none}.max-reached,.max-reached-more-doc{opacity:.4;pointer-events:none;cursor:none}.max-reached-more-doc .drop-zone{padding:6px 0!important;height:170px}.max-reached-more-doc .drop-zone-text{padding-left:20px;padding-right:20px}.max-reached-more-video .drop-zone{padding:13px 0!important;flex-direction:column}.invalid-file-size .drop-zone .illustration{display:none!important}.invalid-file-size .drop-zone .drop-zone-text{padding-left:20px;padding-right:20px}.drop-zone-error{position:absolute;inset:0;background-color:#fff;display:none;justify-content:center;align-items:center;flex-direction:column;margin:4px;outline:4px dashed #ed9292;border-radius:2px;padding:52px 12px;gap:12px}.drop-zone-error .cancel-button{cursor:pointer;background-color:transparent;position:absolute;top:2px;right:2px;height:26px;width:26px;padding:0;display:grid;place-items:center;transition:color .2s ease-in-out;color:#919191}.drop-zone-error .cancel-button:hover{color:#424242}.drop-zone-error .file-types{display:flex;align-items:center;gap:2px;text-transform:uppercase;max-width:100%;flex-wrap:wrap;justify-content:center}.drop-zone-error .badge{font-size:11px;font-weight:900;color:#fff;line-height:14px;padding:2px 4px;width:35px;border-radius:1px;margin-bottom:0;text-align:center;background-color:#919191}.drop-zone-error .pdf{background-color:#e66767}.drop-zone-error .video{background-color:#b370f0}.drop-zone-error .image{background-color:#fab15c}\n"] }]
|
|
5683
|
+
], providers: [], template: "@let docCount = docs().length; @let cropFile = crop() === true;\n@let showCrop = showCropper() === true;\n@let documentVariant = variant() === dropZoneVariant.DOCUMENT;\n@let videoVariant = variant() === dropZoneVariant.VIDEO;\n@let profileVariant = variant() === dropZoneVariant.PROFILE;\n@let coverVariant = variant() === dropZoneVariant.COVER;\n@let logoVariant = variant() === dropZoneVariant.LOGO;\n@let roundedBorder = rounded() === true; @let coverPreview = coverUrl !== \"\";\n@let profilePreview = profileUrl !== \"\"; @let logoPreview = !!logoUrl;\n@let smallSize = size() === \"480px\";\n@let countFiles = this.maxCountFiles();\n@let largeSize = size() === \"640px\";\n\n@if (isDocumentsMode() && documentsDropZoneOpen() && dragMode()) {\n <div class=\"documents-drag-overlay\"></div>\n}\n\n<div\n class=\"container\"\n [class]=\"{\n smallContainer: smallSize,\n largeContainer: largeSize,\n dragMode: dragMode() && !isDocumentsMode(),\n dragModeDocuments: dragMode() && isDocumentsMode(),\n onDragover: onDragover(),\n logoVar: logoVariant,\n hasCropper: isCropperReady(),\n 'is-details-slider': isDetailsSlider(),\n 'is-drawer-mode': isDrawerMode(),\n isCoverDetails: isCoverDetails(),\n 'is-documents-mode': isDocumentsMode(),\n }\"\n>\n @if (coverVariant && coverPreview) {\n <div class=\"cover-container\">\n <img [src]=\"coverUrl\" class=\"cover-image\" draggable=\"false\" />\n </div>\n }\n @if (profileVariant) {\n @if (!profilePreview) {\n <div class=\"avatar\">\n <cai-avatar\n [driver]=\"driver()\"\n [size]=\"160\"\n [rounded]=\"rounded()\"\n ></cai-avatar>\n </div>\n } @else {\n <div class=\"profile-container\">\n <img\n [class]=\"rounded() ? 'profile-rounded-image' : 'profile-square-image'\"\n [src]=\"profileUrl\"\n draggable=\"false\"\n />\n </div>\n }\n }\n @if (logoVariant && logoPreview) {\n <div class=\"logo-container\" [class.has-logo]=\"!!logoUrl\">\n <img class=\"logo-image\" [src]=\"logoUrl\" draggable=\"false\" />\n </div>\n }\n <!--Image Cropper-->\n @if (cropFile && showCrop) {\n @if (!isCropperReady()) {\n <div class=\"cropper-loader\">\n <div class=\"spinner\"></div>\n </div>\n }\n <div class=\"cropper-overlay\">\n <image-cropper\n #cropper\n class=\"img-cropper\"\n [output]=\"'base64'\"\n [class.logoBorder]=\"logoVariant\"\n [roundCropper]=\"roundedBorder ? true : false\"\n [hideResizeSquares]=\"true\"\n [allowMoveImage]=\"true\"\n [transform]=\"transform\"\n (transformChange)=\"onTransformChange($event)\"\n format=\"png\"\n [aspectRatio]=\"ratioHelper()\"\n [resizeToWidth]=\"cropWidth()\"\n [resizeToHeight]=\"cropHeight()\"\n [containWithinAspectRatio]=\"true\"\n [imageChangedEvent]=\"imageChangedEvent\"\n (imageCropped)=\"imageCropped($event)\"\n (imageLoaded)=\"imageLoaded($event)\"\n (cropperReady)=\"cropperReady()\"\n (loadImageFailed)=\"loadImageFailed()\"\n ></image-cropper>\n @if (isCropperReady()) {\n <div class=\"lower-part\">\n <div class=\"range\">\n <input\n #inputRange\n type=\"range\"\n class=\"custom-range\"\n min=\"1\"\n max=\"10\"\n step=\"0.1\"\n [value]=\"zoomValue()\"\n (input)=\"onZoomChange($event)\"\n />\n </div>\n <div class=\"cropper-buttons\">\n <button class=\"cancel-button\" (click)=\"cancelCrop()\">Cancel</button>\n <button class=\"submit-button\" (click)=\"submitCrop()\">Crop</button>\n </div>\n </div>\n }\n </div>\n }\n <!-- Drop Zone -->\n @if (!isDocumentsMode() || documentsDropZoneOpen()) {\n <div\n #dropZoneContainer\n class=\"drop-zone-container\"\n [class.has-logo]=\"logoVariant && !!logoUrl\"\n (drop)=\"onDrop($event)\"\n (dragover)=\"onDragOver($event)\"\n (dragenter)=\"onDragEnter($event)\"\n (dragleave)=\"onDragLeave($event)\"\n [class]=\"{\n 'more-docs': docCount >= 3 && largeSize,\n 'small-more-docs': docCount >= 2 && smallSize,\n 'max-reached-drop-design':\n (countFiles <= this.docs().length || maxCountReached()) &&\n documentVariant,\n 'max-reached-more-doc':\n (countFiles <= this.docs().length || maxCountReached()) &&\n documentVariant,\n 'max-reached-more-video':\n (countFiles <= this.docs().length || maxCountReached()) &&\n videoVariant,\n 'invalid-file-size': invalidFileSize(),\n unsupported: unsupported() || invalidFileSize(),\n smallView: this.smallView() && !dragMode(),\n }\"\n >\n <!-- Drop Zone -->\n <div class=\"drop-zone\" (click)=\"handleClickToAdd()\">\n @if (dragMode()) {\n <div class=\"drag-icons-container\">\n @if (isDocumentsMode()) {\n <svg-icon\n name=\"cai-drop-zone-focus\"\n class=\"illustration drag-icon-document\"\n ></svg-icon>\n } @else {\n <!-- Animation -->\n <ng-lottie\n [options]=\"{\n path: variant() | dropZoneAnimation,\n loop: false,\n autoplay: false,\n }\"\n (animationCreated)=\"animationCreated($event)\"\n ></ng-lottie>\n }\n </div>\n <div class=\"drop-zone-focus-text\">\n @if (isDocumentsMode()) {\n <p class=\"heading\">DRAG FILES HERE</p>\n } @else if (documentVariant || videoVariant) {\n <p class=\"heading\">\n {{ onDragover() ? \"DROP FILES HERE\" : \"DRAG FILES HERE\" }}\n </p>\n } @else {\n <p class=\"heading\">\n {{ onDragover() ? \"DROP IMAGE HERE\" : \"DRAG IMAGE HERE\" }}\n </p>\n }\n </div>\n } @else {\n @let svgIcon = variant() | dropZoneAnimation: true;\n <svg-icon [name]=\"svgIcon\" class=\"illustration\"></svg-icon>\n @if (\n (countFiles <= this.docs().length || maxCountReached()) &&\n documentVariant\n ) {\n <div class=\"drop-zone-text\">\n <p class=\"heading\">\n <span class=\"line\">MAX COUNT</span>\n <span class=\"line\">REACHED</span>\n </p>\n <p class=\"subtext\">\n <span class=\"line\">{{ countFiles }} FILES </span>\n <span class=\"line\">IMPORTED</span>\n </p>\n </div>\n } @else {\n <div class=\"drop-zone-text\">\n <p class=\"heading\">\n @if (documentVariant || videoVariant) {\n DRAG FILES\n @if (docCount < 1 || isDocumentsMode()) {\n <span>HERE</span>\n }\n } @else if (profileVariant && roundedBorder) {\n DRAG IMAGE\n } @else {\n DRAG IMAGE HERE\n }\n </p>\n @if (!coverPreview && !profilePreview) {\n <p class=\"subtext\">OR CLICK TO ADD</p>\n }\n @if (coverPreview || profilePreview) {\n <p class=\"subtext\">OR CLICK TO REPLACE</p>\n }\n @if (videoVariant) {\n <p class=\"video-subtext\">max file size {{ maxFileSize() }}mb</p>\n }\n </div>\n @if (isDocumentsMode()) {\n <button\n class=\"cancel-button-documents\"\n ngbTooltip=\"Cancel\"\n [placement]=\"'bottom'\"\n container=\"body\"\n triggers=\"mouseenter:mouseleave\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n >\n <svg-icon\n name=\"cai-cancel\"\n class=\"cancel-icon\"\n (click)=\"onCancel($event)\"\n ></svg-icon>\n </button>\n }\n }\n }\n <input\n type=\"file\"\n aria-hidden=\"true\"\n multiple\n class=\"drop-zone-input\"\n #inputRef\n (input)=\"onInput($event)\"\n (change)=\"fileChangeEvent($event)\"\n />\n </div>\n\n <!-- Drop Zone Error -->\n <div class=\"drop-zone-error\">\n @if (invalidFileSize()) {\n <div class=\"drop-zone-text\">\n <p class=\"heading invalid\">INVALID FILE SIZE</p>\n <p class=\"subtext\">MAX {{ maxFileSize() }} MB</p>\n </div>\n } @else {\n <div class=\"drop-zone-text\">\n <p class=\"heading invalid\">INVALID FILE TYPE</p>\n <p class=\"subtext\">SUPPORTED FORMATS</p>\n </div>\n <div class=\"file-types\">\n @for (type of supportedFileTypes(); track $index) {\n <p\n class=\"badge\"\n [class]=\"{\n pdf: type === 'pdf',\n video: ['avi', 'mp4', 'mov'].includes(type),\n image: ['jpg', 'png', 'jpeg', 'gif'].includes(type),\n }\"\n >\n {{ type }}\n </p>\n }\n </div>\n }\n <button class=\"cancel-button\">\n <svg-icon\n name=\"cai-cancel\"\n class=\"cancel-icon\"\n (click)=\"cancel()\"\n ></svg-icon>\n </button>\n </div>\n </div>\n }\n @if (isLoadingSkeleton()) {\n <!-- Skeleton -->\n <ng-container *ngTemplateOutlet=\"skeletonTemplate\"></ng-container>\n } @else {\n <!-- Carousel -->\n @if (docCount > 0 && (documentVariant || videoVariant)) {\n <div #docsViewport class=\"docs\">\n <div\n class=\"doc-container\"\n [class.documents-container-grid]=\"isDocumentsMode()\"\n [style.transform]=\"isDocumentsMode() ? '' : carouselTransform()\"\n [style.--carousel-index]=\"isDocumentsMode() ? null : carouselIndex()\"\n >\n @for (doc of docs(); track doc.fileId) {\n <cai-document-preview\n [class.doc-visible]=\"\n isDetailsSlider() && $index === carouselIndex()\n \"\n [class.doc-hidden]=\"\n isDetailsSlider() && $index !== carouselIndex()\n \"\n class=\"doc\"\n [file]=\"doc\"\n [tags]=\"documentTags()\"\n [searchText]=\"searchText()\"\n [cdlDetailsMode]=\"isDetailsSlider()\"\n [multipleDetailsDocs]=\"isDetailsSlider() && docCount > 1\"\n [maxAspectRatio]=\"\n isDetailsSlider() && docCount > 1\n ? maxDetailsAspectRatio()\n : null\n \"\n [drawerMode]=\"isDrawerMode()\"\n [isCoverDetails]=\"isCoverDetails()\"\n [viewMode]=\"isDocumentsMode() ? 'large' : 'small'\"\n (onDelete)=\"handleDelete($event)\"\n (onDownload)=\"handleDownload($event)\"\n (onTagChange)=\"handleTagChange($event)\"\n (onFileNameChange)=\"handleFileNameChange($event)\"\n (onDocumentPreviewClick)=\"handleDocumentPreviewClick($event)\"\n (aspectRatioChange)=\"onDocAspectRatioChange($event)\"\n ></cai-document-preview>\n }\n </div>\n @if (docCount >= 3 || (isDetailsSlider() && docCount > 1)) {\n <button\n class=\"carousel-button carousel-left\"\n type=\"button\"\n (click)=\"carouselLeft()\"\n [disabled]=\"carouselIndex() === 0\"\n [style.opacity]=\"carouselIndex() === 0 ? '0' : '1'\"\n >\n <svg-icon name=\"cai-arrow-secondary-left\" class=\"arrow\"></svg-icon>\n </button>\n <button\n class=\"carousel-button carousel-right\"\n type=\"button\"\n (click)=\"carouselRight()\"\n [disabled]=\"isCarouselAtEnd()\"\n [style.opacity]=\"isCarouselAtEnd() ? '0' : '1'\"\n >\n <svg-icon name=\"cai-arrow-secondary-right\" class=\"arrow\"></svg-icon>\n </button>\n }\n @if (isDetailsSlider() && docCount > 1) {\n <div class=\"sliders\">\n @for (doc of docs(); track $index) {\n <div\n class=\"slider-item\"\n (click)=\"carouselIndex.set($index)\"\n [class.active]=\"$index === carouselIndex()\"\n ></div>\n }\n </div>\n }\n </div>\n }\n }\n</div>\n\n<!-- Skeleton Template -->\n\n<ng-template #skeletonTemplate>\n <div\n class=\"skeleton-container\"\n [ngClass]=\"{\n 'documents-container-grid': isDocumentsMode(),\n 'drawer-position': isDrawerMode(),\n }\"\n >\n @for (item of skeletonItems(); track $index) {\n <div class=\"skeleton-item\">\n <div class=\"skeleton-bar\"></div>\n </div>\n }\n </div>\n</ng-template>\n", styles: [".container.is-documents-mode{width:100%!important;max-width:100%!important}.container.is-documents-mode .drop-zone-container .drop-zone{width:100%!important}.documents-drag-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0003;z-index:10}.is-documents-mode{display:flex;flex-direction:column;gap:0!important;width:100%!important;height:100%!important}.is-documents-mode .drop-zone-container{display:flex;margin-bottom:4px;background-color:#f7f7f7;z-index:20}.is-documents-mode .drop-zone-container .drop-zone{width:100%;height:120px!important;background-color:transparent;outline-color:#dadada;transition:background-color .2s ease-in-out}.is-documents-mode .drop-zone-container .drop-zone:hover{background-color:#fff!important}.is-documents-mode .drop-zone-container .drop-zone .illustration{width:80px;height:80px}.is-documents-mode .drop-zone-container .drop-zone .drop-zone-text .heading{padding-bottom:0}.is-documents-mode .drop-zone-container .drop-zone .cancel-button-documents{z-index:1000;position:absolute;top:4px;right:4px;width:26px;height:26px;background-color:transparent;padding:4px}.is-documents-mode .drop-zone-container .drop-zone .cancel-button-documents .cancel-icon{width:18px;height:18px;color:#919191}.is-documents-mode .drop-zone-container .drop-zone .cancel-button-documents:hover .cancel-icon{color:#424242}.is-documents-mode .skeleton-container .skeleton-item{width:100%;height:auto;aspect-ratio:1/1;max-width:100%;min-width:302px;min-height:302px;position:relative;border-radius:3px;background-color:#fff}.is-documents-mode .skeleton-container .skeleton-item .skeleton-bar{position:absolute;bottom:8px;left:8px;right:8px;width:auto;height:26px;background-color:#91919133;animation:skeleton-pulse 1s ease-in-out infinite alternate;border-radius:2px}.is-documents-mode .docs{width:100%!important;position:static!important;overflow:visible!important}.is-documents-mode .docs .doc-container .doc{height:auto!important}.is-documents-mode .docs .carousel-button{display:none}.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{display:grid;width:100%;grid-template-columns:repeat(auto-fill,minmax(302px,1fr));gap:4px;justify-items:stretch;align-items:start}@media (min-width: 801px) and (max-width: 1001px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(2,minmax(302px,1fr))}}@media (min-width: 1002px) and (max-width: 1307px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(3,minmax(302px,1fr))}}@media (min-width: 1308px) and (max-width: 1613px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(4,minmax(302px,1fr))}}@media (min-width: 1614px) and (max-width: 1920px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(5,minmax(302px,1fr))}}@media (min-width: 1921px) and (max-width: 2227px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(6,minmax(302px,1fr))}}@media (min-width: 2228px){.is-documents-mode .doc-container.documents-container-grid,.is-documents-mode .skeleton-container.documents-container-grid{grid-template-columns:repeat(auto-fit,minmax(302px,1fr))}}@keyframes skeleton-pulse{0%{background-color:#91919133}to{background-color:#91919120}}.cropper-overlay{display:flex;justify-content:center;flex-direction:column;background-color:#fff;align-items:center;z-index:2000;gap:4px;opacity:1;top:0;left:0;position:absolute;width:100%;height:212px}.cropper-overlay .img-cropper{width:100%;height:178px;padding:0}.cropper-overlay .lower-part{display:flex;place-items:center;align-items:center;margin-left:3px;margin-right:3px;width:100%;gap:12px}.cropper-overlay .lower-part .range{width:100%;height:22px;display:flex;align-items:center}.cropper-overlay .lower-part .range input[type=range]{width:100%}.cropper-overlay .lower-part .range input[type=range]{-webkit-appearance:none;appearance:none;border-radius:2px;--range-active-color: #6692f1;--range-progress: 50%;background:transparent;cursor:pointer}.cropper-overlay .lower-part .cropper-buttons{display:flex;justify-content:start;gap:6px}.cropper-overlay .lower-part .cropper-buttons .cancel-button,.cropper-overlay .lower-part .cropper-buttons .submit-button{padding:4px;width:80px;font-size:14px;border-radius:2px;text-transform:uppercase;line-height:14px;font-weight:700;font-size:11px;cursor:pointer}.cropper-overlay .lower-part .cropper-buttons .cancel-button{background-color:#eee;color:#6c6c6c;transition:background-color .3s ease-in-out,color .3s ease-in-out}.cropper-overlay .lower-part .cropper-buttons .cancel-button:hover{background-color:#424242;color:#fff}.cropper-overlay .lower-part .cropper-buttons .cancel-button:active{background-color:#1d1d1d;color:#fff}.cropper-overlay .lower-part .cropper-buttons .submit-button{background-color:#3b73ed;color:#fff;transition:background-color .3s ease-in-out,color .3s ease-in-out}.cropper-overlay .lower-part .cropper-buttons .submit-button:hover{background-color:#0b49d1;color:#fff}.cropper-overlay .lower-part .cropper-buttons .submit-button:active{background-color:#00179e;color:#fff}.cropper-loader{position:absolute;z-index:1100;display:flex;justify-content:center;align-items:center;background-color:#fff;width:100%;height:100%}.cropper-loader .spinner{width:48px;height:48px;border:5px solid rgba(145,145,145,.2);border-top:5px solid #3b73ed;border-radius:50%;animation:spin 1s linear infinite}.hasCropper{height:204px!important;position:relative}input[type=range]:hover{--range-active-color: $color-blue-500}input[type=range]:active{--range-active-color: $color-blue-700}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-7px;background-color:#fff;height:20px;width:30px;box-shadow:0 0 4px #00000026;background-image:url(/assets/icons/interaction/cai-thumb.svg);background-repeat:no-repeat;background-position:center;background-size:14px 18px;border-radius:2px;transition:background-color .3s ease-in-out}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--range-active-color) 0%,var(--range-active-color) var(--range-progress),#eeeeee var(--range-progress),#eeeeee 100%);height:6px;transition:background .3s ease-in-out}input[type=range]:hover::-webkit-slider-runnable-track{background:linear-gradient(to right,#3b73ed 0%,#3b73ed var(--range-progress),#eeeeee var(--range-progress),#eeeeee 100%)}input[type=range]:active::-webkit-slider-runnable-track{background:linear-gradient(to right,#0b49d1 0%,#0b49d1 var(--range-progress),#eeeeee var(--range-progress),#eeeeee 100%)}input[type=range]:hover::-webkit-slider-thumb{cursor:grab}input[type=range]:active::-webkit-slider-thumb{background-image:url(/assets/icons/interaction/cai-thumb-active.svg);cursor:grabbing}@keyframes spin{to{transform:rotate(360deg)}}p{margin-bottom:0}svg-icon{display:flex;align-items:center;justify-content:center}button{border:none!important;outline:none!important}.illustration{width:100px;height:100px}.container{display:flex;gap:6px;position:relative;padding-left:0!important;padding-right:0!important;margin:0!important}.container.smallContainer{width:456px!important}.container.largeContainer{width:616px!important}.docs{flex-shrink:0;height:100%;overflow:hidden;position:relative;border-radius:2px}.smallContainer .docs{max-width:302px!important}.smallContainer .docs .doc-container{display:flex;gap:6px;transition:transform .2s ease-out}.largeContainer .docs{max-width:460px!important}.largeContainer .docs .doc-container{display:flex;gap:8px;transition:transform .2s ease-out}.carousel-button{position:absolute;top:50%;transform:translateY(-50%);border:none;outline:none;width:24px;height:32px;background-color:#ffffffb2;border-radius:2px;box-shadow:0 0 5px #0000004d;cursor:pointer;display:grid;place-items:center;padding:0}.drop-zone-input{display:none}.carousel-left{left:4px}.carousel-right{right:4px}.arrow{width:18px;height:18px;color:#0000004d}.doc{flex:0 0 148px;height:178px;display:flex;background-color:#eee;border-radius:2px}.drop-zone-container{position:relative;flex:1 0 auto}.drop-zone{display:flex;justify-content:center;align-items:center;flex-direction:row;outline:4px dashed #eeeeee;border-radius:2px;padding:35px 0;margin:4px;gap:10px;cursor:pointer;transition:background-color .2s ease-in-out}.drop-zone:hover{background-color:#eee}.drop-zone-text{-webkit-user-select:none;user-select:none;text-align:center}.drop-zone-text .heading{color:#424242;font-size:14px;line-height:18px;font-weight:700;padding-bottom:4px}.drop-zone-text .heading .line{display:block;width:fit-content;margin:0 auto}.drop-zone-text .invalid{color:#df3c3c}.drop-zone-text .subtext{color:#424242;font-size:11px;line-height:14px;font-weight:600}.drop-zone-text .subtext .line{display:block;width:fit-content;margin:0 auto}.drop-zone-text .video-subtext{margin-top:4px;color:#919191;font-size:11px;line-height:14px;font-weight:500}.smallView{width:173px!important}.smallView .drop-zone{flex-direction:column!important;padding:20px 0;width:173px;height:170px}.smallView .drop-zone .drop-zone-text .heading{line-height:18px;padding-bottom:0!important}.smallView .drop-zone .drop-zone-text .subtext{line-height:14px;margin-bottom:0!important}.smallView .illustration{width:80px;height:80px}.text-white-50{color:#fff}.text-white-100{color:#f7f7f7}.text-white-200{color:#eee}.text-white-300{color:#e5e5e5}.text-white-500{color:#dadada}.text-white-500\\/20{color:#dadada33}.text-white-500\\/40{color:#dadada66}.text-white-500\\/70{color:#dadadab3}.text-white-700{color:#ccc}.text-black-50{color:#aaa}.text-black-100{color:#919191}.text-black-200{color:#6c6c6c}.text-black-300{color:#424242}.text-black-500{color:#2f2f2f}.text-black-500\\/20{color:#2f2f2f33}.text-black-500\\/40{color:#2f2f2f66}.text-black-500\\/70{color:#2f2f2fb3}.text-black-700{color:#1d1d1d}.text-blue-50{color:#e9effd}.text-blue-100{color:#bed0f9}.text-blue-200{color:#92b1f5}.text-blue-300{color:#6692f1}.text-blue-500{color:#3b73ed}.text-blue-500\\/20{color:#3b73ed33}.text-blue-500\\/40{color:#3b73ed66}.text-blue-500\\/70{color:#3b73edb3}.text-blue-700{color:#0b49d1}.text-blue-900{color:#00179e}.text-red-50{color:#fbe9e9}.text-red-100{color:#f4bebe}.text-red-200{color:#ed9292}.text-red-300{color:#e66767}.text-red-500{color:#df3c3c}.text-red-500\\/20{color:#df3c3c33}.text-red-500\\/40{color:#df3c3c66}.text-red-500\\/70{color:#df3c3cb3}.text-red-700{color:#c20c0c}.text-green-50{color:#e7f4f3}.text-green-100{color:#b6dfdb}.text-green-200{color:#86c9c3}.text-green-300{color:#56b4ac}.text-green-500{color:#259f94}.text-green-500\\/20{color:#259f9433}.text-green-500\\/40{color:#259f9466}.text-green-500\\/70{color:#259f94b3}.text-green-700{color:#007a6e}.text-yellow-50{color:#fef4e8}.text-yellow-100{color:#fddeb9}.text-yellow-200{color:#fbc88b}.text-yellow-300{color:#fab15c}.text-yellow-500{color:#f89b2e}.text-yellow-500\\/20{color:#f89b2e33}.text-yellow-500\\/40{color:#f89b2e66}.text-yellow-500\\/70{color:#f89b2eb3}.text-yellow-700{color:#de7700}.text-purple-50{color:#f4ebfd}.text-purple-100{color:#dfc2f9}.text-purple-200{color:#c999f4}.text-purple-300{color:#b370f0}.text-purple-500{color:#9e47ec}.text-purple-500\\/20{color:#9e47ec33}.text-purple-500\\/40{color:#9e47ec66}.text-purple-500\\/70{color:#9e47ecb3}.text-purple-700{color:#7919d0}.text-orange-50{color:#ffefea}.text-orange-100{color:#ffcfc0}.text-orange-200{color:#ffb097}.text-orange-300{color:#ff906d}.text-orange-500{color:#ff7043}.text-orange-500\\/20{color:#ff704333}.text-orange-500\\/40{color:#ff704366}.text-orange-500\\/70{color:#ff7043b3}.text-orange-700{color:#e54715}.text-azure-50{color:#e5f7fc}.text-azure-100{color:#b2e6f7}.text-azure-200{color:#80d6f1}.text-azure-300{color:#4dc5eb}.text-azure-500{color:#1ab5e6}.text-azure-500\\/20{color:#1ab5e633}.text-azure-500\\/40{color:#1ab5e666}.text-azure-500\\/70{color:#1ab5e6b3}.text-azure-700{color:#0093c9}.text-gold-50{color:#faf3e6}.text-gold-100{color:#efdcb4}.text-gold-200{color:#e4c481}.text-gold-300{color:#daad4f}.text-gold-500{color:#cf961d}.text-gold-500\\/20{color:#cf961d33}.text-gold-500\\/40{color:#cf961d66}.text-gold-500\\/70{color:#cf961db3}.text-gold-700{color:#b07000}.text-brown-50{color:#f1ede9}.text-brown-100{color:#d6c9bd}.text-brown-200{color:#bca691}.text-brown-300{color:#a08266}.text-brown-500{color:#865e3a}.text-brown-500\\/20{color:#865e3a33}.text-brown-500\\/40{color:#865e3a66}.text-brown-500\\/70{color:#865e3ab3}.text-brown-700{color:#5f330a}.text-navy-50{color:#e7e7fa}.text-navy-100{color:#b7b6f1}.text-navy-200{color:#8785e8}.text-navy-300{color:#5755df}.text-navy-500{color:#2724d6}.text-navy-500\\/20{color:#2724d633}.text-navy-500\\/40{color:#2724d666}.text-navy-500\\/70{color:#2724d6b3}.text-navy-700{color:#0000b8}.text-lime-50{color:#ecf6e7}.text-lime-100{color:#c5e3b6}.text-lime-200{color:#9ed186}.text-lime-300{color:#77bf56}.text-lime-500{color:#50ac25}.text-lime-500\\/20{color:#50ac2533}.text-lime-500\\/40{color:#50ac2566}.text-lime-500\\/70{color:#50ac25b3}.text-lime-700{color:#238900}.text-magenta-50{color:#fbe9f1}.text-magenta-100{color:#f4bed6}.text-magenta-200{color:#ed93bb}.text-magenta-300{color:#e668a0}.text-magenta-500{color:#df3d85}.text-magenta-500\\/20{color:#df3d8533}.text-magenta-500\\/40{color:#df3d8566}.text-magenta-500\\/70{color:#df3d85b3}.text-magenta-700{color:#c10d5d}.bg-white-50{background-color:#fff}.bg-white-100{background-color:#f7f7f7}.bg-white-200{background-color:#eee}.bg-white-300{background-color:#e5e5e5}.bg-white-500{background-color:#dadada}.bg-white-500\\/20{background-color:#dadada33}.bg-white-500\\/40{background-color:#dadada66}.bg-white-500\\/70{background-color:#dadadab3}.bg-white-700{background-color:#ccc}.bg-black-50{background-color:#aaa}.bg-black-100{background-color:#919191}.bg-black-200{background-color:#6c6c6c}.bg-black-300{background-color:#424242}.bg-black-500{background-color:#2f2f2f}.bg-black-500\\/20{background-color:#2f2f2f33}.bg-black-500\\/40{background-color:#2f2f2f66}.bg-black-500\\/70{background-color:#2f2f2fb3}.bg-black-700{background-color:#1d1d1d}.bg-blue-50{background-color:#e9effd}.bg-blue-100{background-color:#bed0f9}.bg-blue-200{background-color:#92b1f5}.bg-blue-300{background-color:#6692f1}.bg-blue-500{background-color:#3b73ed}.bg-blue-500\\/20{background-color:#3b73ed33}.bg-blue-500\\/40{background-color:#3b73ed66}.bg-blue-500\\/70{background-color:#3b73edb3}.bg-blue-700{background-color:#0b49d1}.bg-blue-900{background-color:#00179e}.bg-red-50{background-color:#fbe9e9}.bg-red-100{background-color:#f4bebe}.bg-red-200{background-color:#ed9292}.bg-red-300{background-color:#e66767}.bg-red-500{background-color:#df3c3c}.bg-red-500\\/20{background-color:#df3c3c33}.bg-red-500\\/40{background-color:#df3c3c66}.bg-red-500\\/70{background-color:#df3c3cb3}.bg-red-700{background-color:#c20c0c}.bg-green-50{background-color:#e7f4f3}.bg-green-100{background-color:#b6dfdb}.bg-green-200{background-color:#86c9c3}.bg-green-300{background-color:#56b4ac}.bg-green-500{background-color:#259f94}.bg-green-500\\/20{background-color:#259f9433}.bg-green-500\\/40{background-color:#259f9466}.bg-green-500\\/70{background-color:#259f94b3}.bg-green-700{background-color:#007a6e}.bg-yellow-50{background-color:#fef4e8}.bg-yellow-100{background-color:#fddeb9}.bg-yellow-200{background-color:#fbc88b}.bg-yellow-300{background-color:#fab15c}.bg-yellow-500{background-color:#f89b2e}.bg-yellow-500\\/20{background-color:#f89b2e33}.bg-yellow-500\\/40{background-color:#f89b2e66}.bg-yellow-500\\/70{background-color:#f89b2eb3}.bg-yellow-700{background-color:#de7700}.bg-purple-50{background-color:#f4ebfd}.bg-purple-100{background-color:#dfc2f9}.bg-purple-200{background-color:#c999f4}.bg-purple-300{background-color:#b370f0}.bg-purple-500{background-color:#9e47ec}.bg-purple-500\\/20{background-color:#9e47ec33}.bg-purple-500\\/40{background-color:#9e47ec66}.bg-purple-500\\/70{background-color:#9e47ecb3}.bg-purple-700{background-color:#7919d0}.bg-orange-50{background-color:#ffefea}.bg-orange-100{background-color:#ffcfc0}.bg-orange-200{background-color:#ffb097}.bg-orange-300{background-color:#ff906d}.bg-orange-500{background-color:#ff7043}.bg-orange-500\\/20{background-color:#ff704333}.bg-orange-500\\/40{background-color:#ff704366}.bg-orange-500\\/70{background-color:#ff7043b3}.bg-orange-700{background-color:#e54715}.bg-azure-50{background-color:#e5f7fc}.bg-azure-100{background-color:#b2e6f7}.bg-azure-200{background-color:#80d6f1}.bg-azure-300{background-color:#4dc5eb}.bg-azure-500{background-color:#1ab5e6}.bg-azure-500\\/20{background-color:#1ab5e633}.bg-azure-500\\/40{background-color:#1ab5e666}.bg-azure-500\\/70{background-color:#1ab5e6b3}.bg-azure-700{background-color:#0093c9}.bg-gold-50{background-color:#faf3e6}.bg-gold-100{background-color:#efdcb4}.bg-gold-200{background-color:#e4c481}.bg-gold-300{background-color:#daad4f}.bg-gold-500{background-color:#cf961d}.bg-gold-500\\/20{background-color:#cf961d33}.bg-gold-500\\/40{background-color:#cf961d66}.bg-gold-500\\/70{background-color:#cf961db3}.bg-gold-700{background-color:#b07000}.bg-brown-50{background-color:#f1ede9}.bg-brown-100{background-color:#d6c9bd}.bg-brown-200{background-color:#bca691}.bg-brown-300{background-color:#a08266}.bg-brown-500{background-color:#865e3a}.bg-brown-500\\/20{background-color:#865e3a33}.bg-brown-500\\/40{background-color:#865e3a66}.bg-brown-500\\/70{background-color:#865e3ab3}.bg-brown-700{background-color:#5f330a}.bg-navy-50{background-color:#e7e7fa}.bg-navy-100{background-color:#b7b6f1}.bg-navy-200{background-color:#8785e8}.bg-navy-300{background-color:#5755df}.bg-navy-500{background-color:#2724d6}.bg-navy-500\\/20{background-color:#2724d633}.bg-navy-500\\/40{background-color:#2724d666}.bg-navy-500\\/70{background-color:#2724d6b3}.bg-navy-700{background-color:#0000b8}.bg-lime-50{background-color:#ecf6e7}.bg-lime-100{background-color:#c5e3b6}.bg-lime-200{background-color:#9ed186}.bg-lime-300{background-color:#77bf56}.bg-lime-500{background-color:#50ac25}.bg-lime-500\\/20{background-color:#50ac2533}.bg-lime-500\\/40{background-color:#50ac2566}.bg-lime-500\\/70{background-color:#50ac25b3}.bg-lime-700{background-color:#238900}.bg-magenta-50{background-color:#fbe9f1}.bg-magenta-100{background-color:#f4bed6}.bg-magenta-200{background-color:#ed93bb}.bg-magenta-300{background-color:#e668a0}.bg-magenta-500{background-color:#df3d85}.bg-magenta-500\\/20{background-color:#df3d8533}.bg-magenta-500\\/40{background-color:#df3d8566}.bg-magenta-500\\/70{background-color:#df3d85b3}.bg-magenta-700{background-color:#c10d5d}.border-white-50{border-color:#fff}.border-white-100{border-color:#f7f7f7}.border-white-200{border-color:#eee}.border-white-300{border-color:#e5e5e5}.border-white-500{border-color:#dadada}.border-white-500\\/20{border-color:#dadada33}.border-white-500\\/40{border-color:#dadada66}.border-white-500\\/70{border-color:#dadadab3}.border-white-700{border-color:#ccc}.border-black-50{border-color:#aaa}.border-black-100{border-color:#919191}.border-black-200{border-color:#6c6c6c}.border-black-300{border-color:#424242}.border-black-500{border-color:#2f2f2f}.border-black-500\\/20{border-color:#2f2f2f33}.border-black-500\\/40{border-color:#2f2f2f66}.border-black-500\\/70{border-color:#2f2f2fb3}.border-black-700{border-color:#1d1d1d}.border-blue-50{border-color:#e9effd}.border-blue-100{border-color:#bed0f9}.border-blue-200{border-color:#92b1f5}.border-blue-300{border-color:#6692f1}.border-blue-500{border-color:#3b73ed}.border-blue-500\\/20{border-color:#3b73ed33}.border-blue-500\\/40{border-color:#3b73ed66}.border-blue-500\\/70{border-color:#3b73edb3}.border-blue-700{border-color:#0b49d1}.border-blue-900{border-color:#00179e}.border-red-50{border-color:#fbe9e9}.border-red-100{border-color:#f4bebe}.border-red-200{border-color:#ed9292}.border-red-300{border-color:#e66767}.border-red-500{border-color:#df3c3c}.border-red-500\\/20{border-color:#df3c3c33}.border-red-500\\/40{border-color:#df3c3c66}.border-red-500\\/70{border-color:#df3c3cb3}.border-red-700{border-color:#c20c0c}.border-green-50{border-color:#e7f4f3}.border-green-100{border-color:#b6dfdb}.border-green-200{border-color:#86c9c3}.border-green-300{border-color:#56b4ac}.border-green-500{border-color:#259f94}.border-green-500\\/20{border-color:#259f9433}.border-green-500\\/40{border-color:#259f9466}.border-green-500\\/70{border-color:#259f94b3}.border-green-700{border-color:#007a6e}.border-yellow-50{border-color:#fef4e8}.border-yellow-100{border-color:#fddeb9}.border-yellow-200{border-color:#fbc88b}.border-yellow-300{border-color:#fab15c}.border-yellow-500{border-color:#f89b2e}.border-yellow-500\\/20{border-color:#f89b2e33}.border-yellow-500\\/40{border-color:#f89b2e66}.border-yellow-500\\/70{border-color:#f89b2eb3}.border-yellow-700{border-color:#de7700}.border-purple-50{border-color:#f4ebfd}.border-purple-100{border-color:#dfc2f9}.border-purple-200{border-color:#c999f4}.border-purple-300{border-color:#b370f0}.border-purple-500{border-color:#9e47ec}.border-purple-500\\/20{border-color:#9e47ec33}.border-purple-500\\/40{border-color:#9e47ec66}.border-purple-500\\/70{border-color:#9e47ecb3}.border-purple-700{border-color:#7919d0}.border-orange-50{border-color:#ffefea}.border-orange-100{border-color:#ffcfc0}.border-orange-200{border-color:#ffb097}.border-orange-300{border-color:#ff906d}.border-orange-500{border-color:#ff7043}.border-orange-500\\/20{border-color:#ff704333}.border-orange-500\\/40{border-color:#ff704366}.border-orange-500\\/70{border-color:#ff7043b3}.border-orange-700{border-color:#e54715}.border-azure-50{border-color:#e5f7fc}.border-azure-100{border-color:#b2e6f7}.border-azure-200{border-color:#80d6f1}.border-azure-300{border-color:#4dc5eb}.border-azure-500{border-color:#1ab5e6}.border-azure-500\\/20{border-color:#1ab5e633}.border-azure-500\\/40{border-color:#1ab5e666}.border-azure-500\\/70{border-color:#1ab5e6b3}.border-azure-700{border-color:#0093c9}.border-gold-50{border-color:#faf3e6}.border-gold-100{border-color:#efdcb4}.border-gold-200{border-color:#e4c481}.border-gold-300{border-color:#daad4f}.border-gold-500{border-color:#cf961d}.border-gold-500\\/20{border-color:#cf961d33}.border-gold-500\\/40{border-color:#cf961d66}.border-gold-500\\/70{border-color:#cf961db3}.border-gold-700{border-color:#b07000}.border-brown-50{border-color:#f1ede9}.border-brown-100{border-color:#d6c9bd}.border-brown-200{border-color:#bca691}.border-brown-300{border-color:#a08266}.border-brown-500{border-color:#865e3a}.border-brown-500\\/20{border-color:#865e3a33}.border-brown-500\\/40{border-color:#865e3a66}.border-brown-500\\/70{border-color:#865e3ab3}.border-brown-700{border-color:#5f330a}.border-navy-50{border-color:#e7e7fa}.border-navy-100{border-color:#b7b6f1}.border-navy-200{border-color:#8785e8}.border-navy-300{border-color:#5755df}.border-navy-500{border-color:#2724d6}.border-navy-500\\/20{border-color:#2724d633}.border-navy-500\\/40{border-color:#2724d666}.border-navy-500\\/70{border-color:#2724d6b3}.border-navy-700{border-color:#0000b8}.border-lime-50{border-color:#ecf6e7}.border-lime-100{border-color:#c5e3b6}.border-lime-200{border-color:#9ed186}.border-lime-300{border-color:#77bf56}.border-lime-500{border-color:#50ac25}.border-lime-500\\/20{border-color:#50ac2533}.border-lime-500\\/40{border-color:#50ac2566}.border-lime-500\\/70{border-color:#50ac25b3}.border-lime-700{border-color:#238900}.border-magenta-50{border-color:#fbe9f1}.border-magenta-100{border-color:#f4bed6}.border-magenta-200{border-color:#ed93bb}.border-magenta-300{border-color:#e668a0}.border-magenta-500{border-color:#df3d85}.border-magenta-500\\/20{border-color:#df3d8533}.border-magenta-500\\/40{border-color:#df3d8566}.border-magenta-500\\/70{border-color:#df3d85b3}.border-magenta-700{border-color:#c10d5d}.fill-white-50{fill:#fff}.fill-white-100{fill:#f7f7f7}.fill-white-200{fill:#eee}.fill-white-300{fill:#e5e5e5}.fill-white-500{fill:#dadada}.fill-white-500\\/20{fill:#dadada33}.fill-white-500\\/40{fill:#dadada66}.fill-white-500\\/70{fill:#dadadab3}.fill-white-700{fill:#ccc}.fill-black-50{fill:#aaa}.fill-black-100{fill:#919191}.fill-black-200{fill:#6c6c6c}.fill-black-300{fill:#424242}.fill-black-500{fill:#2f2f2f}.fill-black-500\\/20{fill:#2f2f2f33}.fill-black-500\\/40{fill:#2f2f2f66}.fill-black-500\\/70{fill:#2f2f2fb3}.fill-black-700{fill:#1d1d1d}.fill-blue-50{fill:#e9effd}.fill-blue-100{fill:#bed0f9}.fill-blue-200{fill:#92b1f5}.fill-blue-300{fill:#6692f1}.fill-blue-500{fill:#3b73ed}.fill-blue-500\\/20{fill:#3b73ed33}.fill-blue-500\\/40{fill:#3b73ed66}.fill-blue-500\\/70{fill:#3b73edb3}.fill-blue-700{fill:#0b49d1}.fill-blue-900{fill:#00179e}.fill-red-50{fill:#fbe9e9}.fill-red-100{fill:#f4bebe}.fill-red-200{fill:#ed9292}.fill-red-300{fill:#e66767}.fill-red-500{fill:#df3c3c}.fill-red-500\\/20{fill:#df3c3c33}.fill-red-500\\/40{fill:#df3c3c66}.fill-red-500\\/70{fill:#df3c3cb3}.fill-red-700{fill:#c20c0c}.fill-green-50{fill:#e7f4f3}.fill-green-100{fill:#b6dfdb}.fill-green-200{fill:#86c9c3}.fill-green-300{fill:#56b4ac}.fill-green-500{fill:#259f94}.fill-green-500\\/20{fill:#259f9433}.fill-green-500\\/40{fill:#259f9466}.fill-green-500\\/70{fill:#259f94b3}.fill-green-700{fill:#007a6e}.fill-yellow-50{fill:#fef4e8}.fill-yellow-100{fill:#fddeb9}.fill-yellow-200{fill:#fbc88b}.fill-yellow-300{fill:#fab15c}.fill-yellow-500{fill:#f89b2e}.fill-yellow-500\\/20{fill:#f89b2e33}.fill-yellow-500\\/40{fill:#f89b2e66}.fill-yellow-500\\/70{fill:#f89b2eb3}.fill-yellow-700{fill:#de7700}.fill-purple-50{fill:#f4ebfd}.fill-purple-100{fill:#dfc2f9}.fill-purple-200{fill:#c999f4}.fill-purple-300{fill:#b370f0}.fill-purple-500{fill:#9e47ec}.fill-purple-500\\/20{fill:#9e47ec33}.fill-purple-500\\/40{fill:#9e47ec66}.fill-purple-500\\/70{fill:#9e47ecb3}.fill-purple-700{fill:#7919d0}.fill-orange-50{fill:#ffefea}.fill-orange-100{fill:#ffcfc0}.fill-orange-200{fill:#ffb097}.fill-orange-300{fill:#ff906d}.fill-orange-500{fill:#ff7043}.fill-orange-500\\/20{fill:#ff704333}.fill-orange-500\\/40{fill:#ff704366}.fill-orange-500\\/70{fill:#ff7043b3}.fill-orange-700{fill:#e54715}.fill-azure-50{fill:#e5f7fc}.fill-azure-100{fill:#b2e6f7}.fill-azure-200{fill:#80d6f1}.fill-azure-300{fill:#4dc5eb}.fill-azure-500{fill:#1ab5e6}.fill-azure-500\\/20{fill:#1ab5e633}.fill-azure-500\\/40{fill:#1ab5e666}.fill-azure-500\\/70{fill:#1ab5e6b3}.fill-azure-700{fill:#0093c9}.fill-gold-50{fill:#faf3e6}.fill-gold-100{fill:#efdcb4}.fill-gold-200{fill:#e4c481}.fill-gold-300{fill:#daad4f}.fill-gold-500{fill:#cf961d}.fill-gold-500\\/20{fill:#cf961d33}.fill-gold-500\\/40{fill:#cf961d66}.fill-gold-500\\/70{fill:#cf961db3}.fill-gold-700{fill:#b07000}.fill-brown-50{fill:#f1ede9}.fill-brown-100{fill:#d6c9bd}.fill-brown-200{fill:#bca691}.fill-brown-300{fill:#a08266}.fill-brown-500{fill:#865e3a}.fill-brown-500\\/20{fill:#865e3a33}.fill-brown-500\\/40{fill:#865e3a66}.fill-brown-500\\/70{fill:#865e3ab3}.fill-brown-700{fill:#5f330a}.fill-navy-50{fill:#e7e7fa}.fill-navy-100{fill:#b7b6f1}.fill-navy-200{fill:#8785e8}.fill-navy-300{fill:#5755df}.fill-navy-500{fill:#2724d6}.fill-navy-500\\/20{fill:#2724d633}.fill-navy-500\\/40{fill:#2724d666}.fill-navy-500\\/70{fill:#2724d6b3}.fill-navy-700{fill:#0000b8}.fill-lime-50{fill:#ecf6e7}.fill-lime-100{fill:#c5e3b6}.fill-lime-200{fill:#9ed186}.fill-lime-300{fill:#77bf56}.fill-lime-500{fill:#50ac25}.fill-lime-500\\/20{fill:#50ac2533}.fill-lime-500\\/40{fill:#50ac2566}.fill-lime-500\\/70{fill:#50ac25b3}.fill-lime-700{fill:#238900}.fill-magenta-50{fill:#fbe9f1}.fill-magenta-100{fill:#f4bed6}.fill-magenta-200{fill:#ed93bb}.fill-magenta-300{fill:#e668a0}.fill-magenta-500{fill:#df3d85}.fill-magenta-500\\/20{fill:#df3d8533}.fill-magenta-500\\/40{fill:#df3d8566}.fill-magenta-500\\/70{fill:#df3d85b3}.fill-magenta-700{fill:#c10d5d}.stroke-white-50{stroke:#fff}.stroke-white-100{stroke:#f7f7f7}.stroke-white-200{stroke:#eee}.stroke-white-300{stroke:#e5e5e5}.stroke-white-500{stroke:#dadada}.stroke-white-500\\/20{stroke:#dadada33}.stroke-white-500\\/40{stroke:#dadada66}.stroke-white-500\\/70{stroke:#dadadab3}.stroke-white-700{stroke:#ccc}.stroke-black-50{stroke:#aaa}.stroke-black-100{stroke:#919191}.stroke-black-200{stroke:#6c6c6c}.stroke-black-300{stroke:#424242}.stroke-black-500{stroke:#2f2f2f}.stroke-black-500\\/20{stroke:#2f2f2f33}.stroke-black-500\\/40{stroke:#2f2f2f66}.stroke-black-500\\/70{stroke:#2f2f2fb3}.stroke-black-700{stroke:#1d1d1d}.stroke-blue-50{stroke:#e9effd}.stroke-blue-100{stroke:#bed0f9}.stroke-blue-200{stroke:#92b1f5}.stroke-blue-300{stroke:#6692f1}.stroke-blue-500{stroke:#3b73ed}.stroke-blue-500\\/20{stroke:#3b73ed33}.stroke-blue-500\\/40{stroke:#3b73ed66}.stroke-blue-500\\/70{stroke:#3b73edb3}.stroke-blue-700{stroke:#0b49d1}.stroke-blue-900{stroke:#00179e}.stroke-red-50{stroke:#fbe9e9}.stroke-red-100{stroke:#f4bebe}.stroke-red-200{stroke:#ed9292}.stroke-red-300{stroke:#e66767}.stroke-red-500{stroke:#df3c3c}.stroke-red-500\\/20{stroke:#df3c3c33}.stroke-red-500\\/40{stroke:#df3c3c66}.stroke-red-500\\/70{stroke:#df3c3cb3}.stroke-red-700{stroke:#c20c0c}.stroke-green-50{stroke:#e7f4f3}.stroke-green-100{stroke:#b6dfdb}.stroke-green-200{stroke:#86c9c3}.stroke-green-300{stroke:#56b4ac}.stroke-green-500{stroke:#259f94}.stroke-green-500\\/20{stroke:#259f9433}.stroke-green-500\\/40{stroke:#259f9466}.stroke-green-500\\/70{stroke:#259f94b3}.stroke-green-700{stroke:#007a6e}.stroke-yellow-50{stroke:#fef4e8}.stroke-yellow-100{stroke:#fddeb9}.stroke-yellow-200{stroke:#fbc88b}.stroke-yellow-300{stroke:#fab15c}.stroke-yellow-500{stroke:#f89b2e}.stroke-yellow-500\\/20{stroke:#f89b2e33}.stroke-yellow-500\\/40{stroke:#f89b2e66}.stroke-yellow-500\\/70{stroke:#f89b2eb3}.stroke-yellow-700{stroke:#de7700}.stroke-purple-50{stroke:#f4ebfd}.stroke-purple-100{stroke:#dfc2f9}.stroke-purple-200{stroke:#c999f4}.stroke-purple-300{stroke:#b370f0}.stroke-purple-500{stroke:#9e47ec}.stroke-purple-500\\/20{stroke:#9e47ec33}.stroke-purple-500\\/40{stroke:#9e47ec66}.stroke-purple-500\\/70{stroke:#9e47ecb3}.stroke-purple-700{stroke:#7919d0}.stroke-orange-50{stroke:#ffefea}.stroke-orange-100{stroke:#ffcfc0}.stroke-orange-200{stroke:#ffb097}.stroke-orange-300{stroke:#ff906d}.stroke-orange-500{stroke:#ff7043}.stroke-orange-500\\/20{stroke:#ff704333}.stroke-orange-500\\/40{stroke:#ff704366}.stroke-orange-500\\/70{stroke:#ff7043b3}.stroke-orange-700{stroke:#e54715}.stroke-azure-50{stroke:#e5f7fc}.stroke-azure-100{stroke:#b2e6f7}.stroke-azure-200{stroke:#80d6f1}.stroke-azure-300{stroke:#4dc5eb}.stroke-azure-500{stroke:#1ab5e6}.stroke-azure-500\\/20{stroke:#1ab5e633}.stroke-azure-500\\/40{stroke:#1ab5e666}.stroke-azure-500\\/70{stroke:#1ab5e6b3}.stroke-azure-700{stroke:#0093c9}.stroke-gold-50{stroke:#faf3e6}.stroke-gold-100{stroke:#efdcb4}.stroke-gold-200{stroke:#e4c481}.stroke-gold-300{stroke:#daad4f}.stroke-gold-500{stroke:#cf961d}.stroke-gold-500\\/20{stroke:#cf961d33}.stroke-gold-500\\/40{stroke:#cf961d66}.stroke-gold-500\\/70{stroke:#cf961db3}.stroke-gold-700{stroke:#b07000}.stroke-brown-50{stroke:#f1ede9}.stroke-brown-100{stroke:#d6c9bd}.stroke-brown-200{stroke:#bca691}.stroke-brown-300{stroke:#a08266}.stroke-brown-500{stroke:#865e3a}.stroke-brown-500\\/20{stroke:#865e3a33}.stroke-brown-500\\/40{stroke:#865e3a66}.stroke-brown-500\\/70{stroke:#865e3ab3}.stroke-brown-700{stroke:#5f330a}.stroke-navy-50{stroke:#e7e7fa}.stroke-navy-100{stroke:#b7b6f1}.stroke-navy-200{stroke:#8785e8}.stroke-navy-300{stroke:#5755df}.stroke-navy-500{stroke:#2724d6}.stroke-navy-500\\/20{stroke:#2724d633}.stroke-navy-500\\/40{stroke:#2724d666}.stroke-navy-500\\/70{stroke:#2724d6b3}.stroke-navy-700{stroke:#0000b8}.stroke-lime-50{stroke:#ecf6e7}.stroke-lime-100{stroke:#c5e3b6}.stroke-lime-200{stroke:#9ed186}.stroke-lime-300{stroke:#77bf56}.stroke-lime-500{stroke:#50ac25}.stroke-lime-500\\/20{stroke:#50ac2533}.stroke-lime-500\\/40{stroke:#50ac2566}.stroke-lime-500\\/70{stroke:#50ac25b3}.stroke-lime-700{stroke:#238900}.stroke-magenta-50{stroke:#fbe9f1}.stroke-magenta-100{stroke:#f4bed6}.stroke-magenta-200{stroke:#ed93bb}.stroke-magenta-300{stroke:#e668a0}.stroke-magenta-500{stroke:#df3d85}.stroke-magenta-500\\/20{stroke:#df3d8533}.stroke-magenta-500\\/40{stroke:#df3d8566}.stroke-magenta-500\\/70{stroke:#df3d85b3}.stroke-magenta-700{stroke:#c10d5d}.hover\\:text-white-50:hover{color:#fff}.hover\\:text-white-100:hover{color:#f7f7f7}.hover\\:text-white-200:hover{color:#eee}.hover\\:text-white-300:hover{color:#e5e5e5}.hover\\:text-white-500:hover{color:#dadada}.hover\\:text-white-500:hover\\/20{color:#dadada33}.hover\\:text-white-500:hover\\/40{color:#dadada66}.hover\\:text-white-500:hover\\/70{color:#dadadab3}.hover\\:text-white-700:hover{color:#ccc}.hover\\:text-black-50:hover{color:#aaa}.hover\\:text-black-100:hover{color:#919191}.hover\\:text-black-200:hover{color:#6c6c6c}.hover\\:text-black-300:hover{color:#424242}.hover\\:text-black-500:hover{color:#2f2f2f}.hover\\:text-black-500:hover\\/20{color:#2f2f2f33}.hover\\:text-black-500:hover\\/40{color:#2f2f2f66}.hover\\:text-black-500:hover\\/70{color:#2f2f2fb3}.hover\\:text-black-700:hover{color:#1d1d1d}.hover\\:text-blue-50:hover{color:#e9effd}.hover\\:text-blue-100:hover{color:#bed0f9}.hover\\:text-blue-200:hover{color:#92b1f5}.hover\\:text-blue-300:hover{color:#6692f1}.hover\\:text-blue-500:hover{color:#3b73ed}.hover\\:text-blue-500:hover\\/20{color:#3b73ed33}.hover\\:text-blue-500:hover\\/40{color:#3b73ed66}.hover\\:text-blue-500:hover\\/70{color:#3b73edb3}.hover\\:text-blue-700:hover{color:#0b49d1}.hover\\:text-blue-900:hover{color:#00179e}.hover\\:text-red-50:hover{color:#fbe9e9}.hover\\:text-red-100:hover{color:#f4bebe}.hover\\:text-red-200:hover{color:#ed9292}.hover\\:text-red-300:hover{color:#e66767}.hover\\:text-red-500:hover{color:#df3c3c}.hover\\:text-red-500:hover\\/20{color:#df3c3c33}.hover\\:text-red-500:hover\\/40{color:#df3c3c66}.hover\\:text-red-500:hover\\/70{color:#df3c3cb3}.hover\\:text-red-700:hover{color:#c20c0c}.hover\\:text-green-50:hover{color:#e7f4f3}.hover\\:text-green-100:hover{color:#b6dfdb}.hover\\:text-green-200:hover{color:#86c9c3}.hover\\:text-green-300:hover{color:#56b4ac}.hover\\:text-green-500:hover{color:#259f94}.hover\\:text-green-500:hover\\/20{color:#259f9433}.hover\\:text-green-500:hover\\/40{color:#259f9466}.hover\\:text-green-500:hover\\/70{color:#259f94b3}.hover\\:text-green-700:hover{color:#007a6e}.hover\\:text-yellow-50:hover{color:#fef4e8}.hover\\:text-yellow-100:hover{color:#fddeb9}.hover\\:text-yellow-200:hover{color:#fbc88b}.hover\\:text-yellow-300:hover{color:#fab15c}.hover\\:text-yellow-500:hover{color:#f89b2e}.hover\\:text-yellow-500:hover\\/20{color:#f89b2e33}.hover\\:text-yellow-500:hover\\/40{color:#f89b2e66}.hover\\:text-yellow-500:hover\\/70{color:#f89b2eb3}.hover\\:text-yellow-700:hover{color:#de7700}.hover\\:text-purple-50:hover{color:#f4ebfd}.hover\\:text-purple-100:hover{color:#dfc2f9}.hover\\:text-purple-200:hover{color:#c999f4}.hover\\:text-purple-300:hover{color:#b370f0}.hover\\:text-purple-500:hover{color:#9e47ec}.hover\\:text-purple-500:hover\\/20{color:#9e47ec33}.hover\\:text-purple-500:hover\\/40{color:#9e47ec66}.hover\\:text-purple-500:hover\\/70{color:#9e47ecb3}.hover\\:text-purple-700:hover{color:#7919d0}.hover\\:text-orange-50:hover{color:#ffefea}.hover\\:text-orange-100:hover{color:#ffcfc0}.hover\\:text-orange-200:hover{color:#ffb097}.hover\\:text-orange-300:hover{color:#ff906d}.hover\\:text-orange-500:hover{color:#ff7043}.hover\\:text-orange-500:hover\\/20{color:#ff704333}.hover\\:text-orange-500:hover\\/40{color:#ff704366}.hover\\:text-orange-500:hover\\/70{color:#ff7043b3}.hover\\:text-orange-700:hover{color:#e54715}.hover\\:text-azure-50:hover{color:#e5f7fc}.hover\\:text-azure-100:hover{color:#b2e6f7}.hover\\:text-azure-200:hover{color:#80d6f1}.hover\\:text-azure-300:hover{color:#4dc5eb}.hover\\:text-azure-500:hover{color:#1ab5e6}.hover\\:text-azure-500:hover\\/20{color:#1ab5e633}.hover\\:text-azure-500:hover\\/40{color:#1ab5e666}.hover\\:text-azure-500:hover\\/70{color:#1ab5e6b3}.hover\\:text-azure-700:hover{color:#0093c9}.hover\\:text-gold-50:hover{color:#faf3e6}.hover\\:text-gold-100:hover{color:#efdcb4}.hover\\:text-gold-200:hover{color:#e4c481}.hover\\:text-gold-300:hover{color:#daad4f}.hover\\:text-gold-500:hover{color:#cf961d}.hover\\:text-gold-500:hover\\/20{color:#cf961d33}.hover\\:text-gold-500:hover\\/40{color:#cf961d66}.hover\\:text-gold-500:hover\\/70{color:#cf961db3}.hover\\:text-gold-700:hover{color:#b07000}.hover\\:text-brown-50:hover{color:#f1ede9}.hover\\:text-brown-100:hover{color:#d6c9bd}.hover\\:text-brown-200:hover{color:#bca691}.hover\\:text-brown-300:hover{color:#a08266}.hover\\:text-brown-500:hover{color:#865e3a}.hover\\:text-brown-500:hover\\/20{color:#865e3a33}.hover\\:text-brown-500:hover\\/40{color:#865e3a66}.hover\\:text-brown-500:hover\\/70{color:#865e3ab3}.hover\\:text-brown-700:hover{color:#5f330a}.hover\\:text-navy-50:hover{color:#e7e7fa}.hover\\:text-navy-100:hover{color:#b7b6f1}.hover\\:text-navy-200:hover{color:#8785e8}.hover\\:text-navy-300:hover{color:#5755df}.hover\\:text-navy-500:hover{color:#2724d6}.hover\\:text-navy-500:hover\\/20{color:#2724d633}.hover\\:text-navy-500:hover\\/40{color:#2724d666}.hover\\:text-navy-500:hover\\/70{color:#2724d6b3}.hover\\:text-navy-700:hover{color:#0000b8}.hover\\:text-lime-50:hover{color:#ecf6e7}.hover\\:text-lime-100:hover{color:#c5e3b6}.hover\\:text-lime-200:hover{color:#9ed186}.hover\\:text-lime-300:hover{color:#77bf56}.hover\\:text-lime-500:hover{color:#50ac25}.hover\\:text-lime-500:hover\\/20{color:#50ac2533}.hover\\:text-lime-500:hover\\/40{color:#50ac2566}.hover\\:text-lime-500:hover\\/70{color:#50ac25b3}.hover\\:text-lime-700:hover{color:#238900}.hover\\:text-magenta-50:hover{color:#fbe9f1}.hover\\:text-magenta-100:hover{color:#f4bed6}.hover\\:text-magenta-200:hover{color:#ed93bb}.hover\\:text-magenta-300:hover{color:#e668a0}.hover\\:text-magenta-500:hover{color:#df3d85}.hover\\:text-magenta-500:hover\\/20{color:#df3d8533}.hover\\:text-magenta-500:hover\\/40{color:#df3d8566}.hover\\:text-magenta-500:hover\\/70{color:#df3d85b3}.hover\\:text-magenta-700:hover{color:#c10d5d}.hover\\:bg-white-50:hover{background-color:#fff}.hover\\:bg-white-100:hover{background-color:#f7f7f7}.hover\\:bg-white-200:hover{background-color:#eee}.hover\\:bg-white-300:hover{background-color:#e5e5e5}.hover\\:bg-white-500:hover{background-color:#dadada}.hover\\:bg-white-500:hover\\/20{background-color:#dadada33}.hover\\:bg-white-500:hover\\/40{background-color:#dadada66}.hover\\:bg-white-500:hover\\/70{background-color:#dadadab3}.hover\\:bg-white-700:hover{background-color:#ccc}.hover\\:bg-black-50:hover{background-color:#aaa}.hover\\:bg-black-100:hover{background-color:#919191}.hover\\:bg-black-200:hover{background-color:#6c6c6c}.hover\\:bg-black-300:hover{background-color:#424242}.hover\\:bg-black-500:hover{background-color:#2f2f2f}.hover\\:bg-black-500:hover\\/20{background-color:#2f2f2f33}.hover\\:bg-black-500:hover\\/40{background-color:#2f2f2f66}.hover\\:bg-black-500:hover\\/70{background-color:#2f2f2fb3}.hover\\:bg-black-700:hover{background-color:#1d1d1d}.hover\\:bg-blue-50:hover{background-color:#e9effd}.hover\\:bg-blue-100:hover{background-color:#bed0f9}.hover\\:bg-blue-200:hover{background-color:#92b1f5}.hover\\:bg-blue-300:hover{background-color:#6692f1}.hover\\:bg-blue-500:hover{background-color:#3b73ed}.hover\\:bg-blue-500:hover\\/20{background-color:#3b73ed33}.hover\\:bg-blue-500:hover\\/40{background-color:#3b73ed66}.hover\\:bg-blue-500:hover\\/70{background-color:#3b73edb3}.hover\\:bg-blue-700:hover{background-color:#0b49d1}.hover\\:bg-blue-900:hover{background-color:#00179e}.hover\\:bg-red-50:hover{background-color:#fbe9e9}.hover\\:bg-red-100:hover{background-color:#f4bebe}.hover\\:bg-red-200:hover{background-color:#ed9292}.hover\\:bg-red-300:hover{background-color:#e66767}.hover\\:bg-red-500:hover{background-color:#df3c3c}.hover\\:bg-red-500:hover\\/20{background-color:#df3c3c33}.hover\\:bg-red-500:hover\\/40{background-color:#df3c3c66}.hover\\:bg-red-500:hover\\/70{background-color:#df3c3cb3}.hover\\:bg-red-700:hover{background-color:#c20c0c}.hover\\:bg-green-50:hover{background-color:#e7f4f3}.hover\\:bg-green-100:hover{background-color:#b6dfdb}.hover\\:bg-green-200:hover{background-color:#86c9c3}.hover\\:bg-green-300:hover{background-color:#56b4ac}.hover\\:bg-green-500:hover{background-color:#259f94}.hover\\:bg-green-500:hover\\/20{background-color:#259f9433}.hover\\:bg-green-500:hover\\/40{background-color:#259f9466}.hover\\:bg-green-500:hover\\/70{background-color:#259f94b3}.hover\\:bg-green-700:hover{background-color:#007a6e}.hover\\:bg-yellow-50:hover{background-color:#fef4e8}.hover\\:bg-yellow-100:hover{background-color:#fddeb9}.hover\\:bg-yellow-200:hover{background-color:#fbc88b}.hover\\:bg-yellow-300:hover{background-color:#fab15c}.hover\\:bg-yellow-500:hover{background-color:#f89b2e}.hover\\:bg-yellow-500:hover\\/20{background-color:#f89b2e33}.hover\\:bg-yellow-500:hover\\/40{background-color:#f89b2e66}.hover\\:bg-yellow-500:hover\\/70{background-color:#f89b2eb3}.hover\\:bg-yellow-700:hover{background-color:#de7700}.hover\\:bg-purple-50:hover{background-color:#f4ebfd}.hover\\:bg-purple-100:hover{background-color:#dfc2f9}.hover\\:bg-purple-200:hover{background-color:#c999f4}.hover\\:bg-purple-300:hover{background-color:#b370f0}.hover\\:bg-purple-500:hover{background-color:#9e47ec}.hover\\:bg-purple-500:hover\\/20{background-color:#9e47ec33}.hover\\:bg-purple-500:hover\\/40{background-color:#9e47ec66}.hover\\:bg-purple-500:hover\\/70{background-color:#9e47ecb3}.hover\\:bg-purple-700:hover{background-color:#7919d0}.hover\\:bg-orange-50:hover{background-color:#ffefea}.hover\\:bg-orange-100:hover{background-color:#ffcfc0}.hover\\:bg-orange-200:hover{background-color:#ffb097}.hover\\:bg-orange-300:hover{background-color:#ff906d}.hover\\:bg-orange-500:hover{background-color:#ff7043}.hover\\:bg-orange-500:hover\\/20{background-color:#ff704333}.hover\\:bg-orange-500:hover\\/40{background-color:#ff704366}.hover\\:bg-orange-500:hover\\/70{background-color:#ff7043b3}.hover\\:bg-orange-700:hover{background-color:#e54715}.hover\\:bg-azure-50:hover{background-color:#e5f7fc}.hover\\:bg-azure-100:hover{background-color:#b2e6f7}.hover\\:bg-azure-200:hover{background-color:#80d6f1}.hover\\:bg-azure-300:hover{background-color:#4dc5eb}.hover\\:bg-azure-500:hover{background-color:#1ab5e6}.hover\\:bg-azure-500:hover\\/20{background-color:#1ab5e633}.hover\\:bg-azure-500:hover\\/40{background-color:#1ab5e666}.hover\\:bg-azure-500:hover\\/70{background-color:#1ab5e6b3}.hover\\:bg-azure-700:hover{background-color:#0093c9}.hover\\:bg-gold-50:hover{background-color:#faf3e6}.hover\\:bg-gold-100:hover{background-color:#efdcb4}.hover\\:bg-gold-200:hover{background-color:#e4c481}.hover\\:bg-gold-300:hover{background-color:#daad4f}.hover\\:bg-gold-500:hover{background-color:#cf961d}.hover\\:bg-gold-500:hover\\/20{background-color:#cf961d33}.hover\\:bg-gold-500:hover\\/40{background-color:#cf961d66}.hover\\:bg-gold-500:hover\\/70{background-color:#cf961db3}.hover\\:bg-gold-700:hover{background-color:#b07000}.hover\\:bg-brown-50:hover{background-color:#f1ede9}.hover\\:bg-brown-100:hover{background-color:#d6c9bd}.hover\\:bg-brown-200:hover{background-color:#bca691}.hover\\:bg-brown-300:hover{background-color:#a08266}.hover\\:bg-brown-500:hover{background-color:#865e3a}.hover\\:bg-brown-500:hover\\/20{background-color:#865e3a33}.hover\\:bg-brown-500:hover\\/40{background-color:#865e3a66}.hover\\:bg-brown-500:hover\\/70{background-color:#865e3ab3}.hover\\:bg-brown-700:hover{background-color:#5f330a}.hover\\:bg-navy-50:hover{background-color:#e7e7fa}.hover\\:bg-navy-100:hover{background-color:#b7b6f1}.hover\\:bg-navy-200:hover{background-color:#8785e8}.hover\\:bg-navy-300:hover{background-color:#5755df}.hover\\:bg-navy-500:hover{background-color:#2724d6}.hover\\:bg-navy-500:hover\\/20{background-color:#2724d633}.hover\\:bg-navy-500:hover\\/40{background-color:#2724d666}.hover\\:bg-navy-500:hover\\/70{background-color:#2724d6b3}.hover\\:bg-navy-700:hover{background-color:#0000b8}.hover\\:bg-lime-50:hover{background-color:#ecf6e7}.hover\\:bg-lime-100:hover{background-color:#c5e3b6}.hover\\:bg-lime-200:hover{background-color:#9ed186}.hover\\:bg-lime-300:hover{background-color:#77bf56}.hover\\:bg-lime-500:hover{background-color:#50ac25}.hover\\:bg-lime-500:hover\\/20{background-color:#50ac2533}.hover\\:bg-lime-500:hover\\/40{background-color:#50ac2566}.hover\\:bg-lime-500:hover\\/70{background-color:#50ac25b3}.hover\\:bg-lime-700:hover{background-color:#238900}.hover\\:bg-magenta-50:hover{background-color:#fbe9f1}.hover\\:bg-magenta-100:hover{background-color:#f4bed6}.hover\\:bg-magenta-200:hover{background-color:#ed93bb}.hover\\:bg-magenta-300:hover{background-color:#e668a0}.hover\\:bg-magenta-500:hover{background-color:#df3d85}.hover\\:bg-magenta-500:hover\\/20{background-color:#df3d8533}.hover\\:bg-magenta-500:hover\\/40{background-color:#df3d8566}.hover\\:bg-magenta-500:hover\\/70{background-color:#df3d85b3}.hover\\:bg-magenta-700:hover{background-color:#c10d5d}.focus\\:text-white-50:focus-visible{color:#fff}.focus\\:text-white-100:focus-visible{color:#f7f7f7}.focus\\:text-white-200:focus-visible{color:#eee}.focus\\:text-white-300:focus-visible{color:#e5e5e5}.focus\\:text-white-500:focus-visible{color:#dadada}.focus\\:text-white-500:focus-visible\\/20{color:#dadada33}.focus\\:text-white-500:focus-visible\\/40{color:#dadada66}.focus\\:text-white-500:focus-visible\\/70{color:#dadadab3}.focus\\:text-white-700:focus-visible{color:#ccc}.focus\\:text-black-50:focus-visible{color:#aaa}.focus\\:text-black-100:focus-visible{color:#919191}.focus\\:text-black-200:focus-visible{color:#6c6c6c}.focus\\:text-black-300:focus-visible{color:#424242}.focus\\:text-black-500:focus-visible{color:#2f2f2f}.focus\\:text-black-500:focus-visible\\/20{color:#2f2f2f33}.focus\\:text-black-500:focus-visible\\/40{color:#2f2f2f66}.focus\\:text-black-500:focus-visible\\/70{color:#2f2f2fb3}.focus\\:text-black-700:focus-visible{color:#1d1d1d}.focus\\:text-blue-50:focus-visible{color:#e9effd}.focus\\:text-blue-100:focus-visible{color:#bed0f9}.focus\\:text-blue-200:focus-visible{color:#92b1f5}.focus\\:text-blue-300:focus-visible{color:#6692f1}.focus\\:text-blue-500:focus-visible{color:#3b73ed}.focus\\:text-blue-500:focus-visible\\/20{color:#3b73ed33}.focus\\:text-blue-500:focus-visible\\/40{color:#3b73ed66}.focus\\:text-blue-500:focus-visible\\/70{color:#3b73edb3}.focus\\:text-blue-700:focus-visible{color:#0b49d1}.focus\\:text-blue-900:focus-visible{color:#00179e}.focus\\:text-red-50:focus-visible{color:#fbe9e9}.focus\\:text-red-100:focus-visible{color:#f4bebe}.focus\\:text-red-200:focus-visible{color:#ed9292}.focus\\:text-red-300:focus-visible{color:#e66767}.focus\\:text-red-500:focus-visible{color:#df3c3c}.focus\\:text-red-500:focus-visible\\/20{color:#df3c3c33}.focus\\:text-red-500:focus-visible\\/40{color:#df3c3c66}.focus\\:text-red-500:focus-visible\\/70{color:#df3c3cb3}.focus\\:text-red-700:focus-visible{color:#c20c0c}.focus\\:text-green-50:focus-visible{color:#e7f4f3}.focus\\:text-green-100:focus-visible{color:#b6dfdb}.focus\\:text-green-200:focus-visible{color:#86c9c3}.focus\\:text-green-300:focus-visible{color:#56b4ac}.focus\\:text-green-500:focus-visible{color:#259f94}.focus\\:text-green-500:focus-visible\\/20{color:#259f9433}.focus\\:text-green-500:focus-visible\\/40{color:#259f9466}.focus\\:text-green-500:focus-visible\\/70{color:#259f94b3}.focus\\:text-green-700:focus-visible{color:#007a6e}.focus\\:text-yellow-50:focus-visible{color:#fef4e8}.focus\\:text-yellow-100:focus-visible{color:#fddeb9}.focus\\:text-yellow-200:focus-visible{color:#fbc88b}.focus\\:text-yellow-300:focus-visible{color:#fab15c}.focus\\:text-yellow-500:focus-visible{color:#f89b2e}.focus\\:text-yellow-500:focus-visible\\/20{color:#f89b2e33}.focus\\:text-yellow-500:focus-visible\\/40{color:#f89b2e66}.focus\\:text-yellow-500:focus-visible\\/70{color:#f89b2eb3}.focus\\:text-yellow-700:focus-visible{color:#de7700}.focus\\:text-purple-50:focus-visible{color:#f4ebfd}.focus\\:text-purple-100:focus-visible{color:#dfc2f9}.focus\\:text-purple-200:focus-visible{color:#c999f4}.focus\\:text-purple-300:focus-visible{color:#b370f0}.focus\\:text-purple-500:focus-visible{color:#9e47ec}.focus\\:text-purple-500:focus-visible\\/20{color:#9e47ec33}.focus\\:text-purple-500:focus-visible\\/40{color:#9e47ec66}.focus\\:text-purple-500:focus-visible\\/70{color:#9e47ecb3}.focus\\:text-purple-700:focus-visible{color:#7919d0}.focus\\:text-orange-50:focus-visible{color:#ffefea}.focus\\:text-orange-100:focus-visible{color:#ffcfc0}.focus\\:text-orange-200:focus-visible{color:#ffb097}.focus\\:text-orange-300:focus-visible{color:#ff906d}.focus\\:text-orange-500:focus-visible{color:#ff7043}.focus\\:text-orange-500:focus-visible\\/20{color:#ff704333}.focus\\:text-orange-500:focus-visible\\/40{color:#ff704366}.focus\\:text-orange-500:focus-visible\\/70{color:#ff7043b3}.focus\\:text-orange-700:focus-visible{color:#e54715}.focus\\:text-azure-50:focus-visible{color:#e5f7fc}.focus\\:text-azure-100:focus-visible{color:#b2e6f7}.focus\\:text-azure-200:focus-visible{color:#80d6f1}.focus\\:text-azure-300:focus-visible{color:#4dc5eb}.focus\\:text-azure-500:focus-visible{color:#1ab5e6}.focus\\:text-azure-500:focus-visible\\/20{color:#1ab5e633}.focus\\:text-azure-500:focus-visible\\/40{color:#1ab5e666}.focus\\:text-azure-500:focus-visible\\/70{color:#1ab5e6b3}.focus\\:text-azure-700:focus-visible{color:#0093c9}.focus\\:text-gold-50:focus-visible{color:#faf3e6}.focus\\:text-gold-100:focus-visible{color:#efdcb4}.focus\\:text-gold-200:focus-visible{color:#e4c481}.focus\\:text-gold-300:focus-visible{color:#daad4f}.focus\\:text-gold-500:focus-visible{color:#cf961d}.focus\\:text-gold-500:focus-visible\\/20{color:#cf961d33}.focus\\:text-gold-500:focus-visible\\/40{color:#cf961d66}.focus\\:text-gold-500:focus-visible\\/70{color:#cf961db3}.focus\\:text-gold-700:focus-visible{color:#b07000}.focus\\:text-brown-50:focus-visible{color:#f1ede9}.focus\\:text-brown-100:focus-visible{color:#d6c9bd}.focus\\:text-brown-200:focus-visible{color:#bca691}.focus\\:text-brown-300:focus-visible{color:#a08266}.focus\\:text-brown-500:focus-visible{color:#865e3a}.focus\\:text-brown-500:focus-visible\\/20{color:#865e3a33}.focus\\:text-brown-500:focus-visible\\/40{color:#865e3a66}.focus\\:text-brown-500:focus-visible\\/70{color:#865e3ab3}.focus\\:text-brown-700:focus-visible{color:#5f330a}.focus\\:text-navy-50:focus-visible{color:#e7e7fa}.focus\\:text-navy-100:focus-visible{color:#b7b6f1}.focus\\:text-navy-200:focus-visible{color:#8785e8}.focus\\:text-navy-300:focus-visible{color:#5755df}.focus\\:text-navy-500:focus-visible{color:#2724d6}.focus\\:text-navy-500:focus-visible\\/20{color:#2724d633}.focus\\:text-navy-500:focus-visible\\/40{color:#2724d666}.focus\\:text-navy-500:focus-visible\\/70{color:#2724d6b3}.focus\\:text-navy-700:focus-visible{color:#0000b8}.focus\\:text-lime-50:focus-visible{color:#ecf6e7}.focus\\:text-lime-100:focus-visible{color:#c5e3b6}.focus\\:text-lime-200:focus-visible{color:#9ed186}.focus\\:text-lime-300:focus-visible{color:#77bf56}.focus\\:text-lime-500:focus-visible{color:#50ac25}.focus\\:text-lime-500:focus-visible\\/20{color:#50ac2533}.focus\\:text-lime-500:focus-visible\\/40{color:#50ac2566}.focus\\:text-lime-500:focus-visible\\/70{color:#50ac25b3}.focus\\:text-lime-700:focus-visible{color:#238900}.focus\\:text-magenta-50:focus-visible{color:#fbe9f1}.focus\\:text-magenta-100:focus-visible{color:#f4bed6}.focus\\:text-magenta-200:focus-visible{color:#ed93bb}.focus\\:text-magenta-300:focus-visible{color:#e668a0}.focus\\:text-magenta-500:focus-visible{color:#df3d85}.focus\\:text-magenta-500:focus-visible\\/20{color:#df3d8533}.focus\\:text-magenta-500:focus-visible\\/40{color:#df3d8566}.focus\\:text-magenta-500:focus-visible\\/70{color:#df3d85b3}.focus\\:text-magenta-700:focus-visible{color:#c10d5d}.focus\\:bg-white-50:focus-visible{background-color:#fff}.focus\\:bg-white-100:focus-visible{background-color:#f7f7f7}.focus\\:bg-white-200:focus-visible{background-color:#eee}.focus\\:bg-white-300:focus-visible{background-color:#e5e5e5}.focus\\:bg-white-500:focus-visible{background-color:#dadada}.focus\\:bg-white-500:focus-visible\\/20{background-color:#dadada33}.focus\\:bg-white-500:focus-visible\\/40{background-color:#dadada66}.focus\\:bg-white-500:focus-visible\\/70{background-color:#dadadab3}.focus\\:bg-white-700:focus-visible{background-color:#ccc}.focus\\:bg-black-50:focus-visible{background-color:#aaa}.focus\\:bg-black-100:focus-visible{background-color:#919191}.focus\\:bg-black-200:focus-visible{background-color:#6c6c6c}.focus\\:bg-black-300:focus-visible{background-color:#424242}.focus\\:bg-black-500:focus-visible{background-color:#2f2f2f}.focus\\:bg-black-500:focus-visible\\/20{background-color:#2f2f2f33}.focus\\:bg-black-500:focus-visible\\/40{background-color:#2f2f2f66}.focus\\:bg-black-500:focus-visible\\/70{background-color:#2f2f2fb3}.focus\\:bg-black-700:focus-visible{background-color:#1d1d1d}.focus\\:bg-blue-50:focus-visible{background-color:#e9effd}.focus\\:bg-blue-100:focus-visible{background-color:#bed0f9}.focus\\:bg-blue-200:focus-visible{background-color:#92b1f5}.focus\\:bg-blue-300:focus-visible{background-color:#6692f1}.focus\\:bg-blue-500:focus-visible{background-color:#3b73ed}.focus\\:bg-blue-500:focus-visible\\/20{background-color:#3b73ed33}.focus\\:bg-blue-500:focus-visible\\/40{background-color:#3b73ed66}.focus\\:bg-blue-500:focus-visible\\/70{background-color:#3b73edb3}.focus\\:bg-blue-700:focus-visible{background-color:#0b49d1}.focus\\:bg-blue-900:focus-visible{background-color:#00179e}.focus\\:bg-red-50:focus-visible{background-color:#fbe9e9}.focus\\:bg-red-100:focus-visible{background-color:#f4bebe}.focus\\:bg-red-200:focus-visible{background-color:#ed9292}.focus\\:bg-red-300:focus-visible{background-color:#e66767}.focus\\:bg-red-500:focus-visible{background-color:#df3c3c}.focus\\:bg-red-500:focus-visible\\/20{background-color:#df3c3c33}.focus\\:bg-red-500:focus-visible\\/40{background-color:#df3c3c66}.focus\\:bg-red-500:focus-visible\\/70{background-color:#df3c3cb3}.focus\\:bg-red-700:focus-visible{background-color:#c20c0c}.focus\\:bg-green-50:focus-visible{background-color:#e7f4f3}.focus\\:bg-green-100:focus-visible{background-color:#b6dfdb}.focus\\:bg-green-200:focus-visible{background-color:#86c9c3}.focus\\:bg-green-300:focus-visible{background-color:#56b4ac}.focus\\:bg-green-500:focus-visible{background-color:#259f94}.focus\\:bg-green-500:focus-visible\\/20{background-color:#259f9433}.focus\\:bg-green-500:focus-visible\\/40{background-color:#259f9466}.focus\\:bg-green-500:focus-visible\\/70{background-color:#259f94b3}.focus\\:bg-green-700:focus-visible{background-color:#007a6e}.focus\\:bg-yellow-50:focus-visible{background-color:#fef4e8}.focus\\:bg-yellow-100:focus-visible{background-color:#fddeb9}.focus\\:bg-yellow-200:focus-visible{background-color:#fbc88b}.focus\\:bg-yellow-300:focus-visible{background-color:#fab15c}.focus\\:bg-yellow-500:focus-visible{background-color:#f89b2e}.focus\\:bg-yellow-500:focus-visible\\/20{background-color:#f89b2e33}.focus\\:bg-yellow-500:focus-visible\\/40{background-color:#f89b2e66}.focus\\:bg-yellow-500:focus-visible\\/70{background-color:#f89b2eb3}.focus\\:bg-yellow-700:focus-visible{background-color:#de7700}.focus\\:bg-purple-50:focus-visible{background-color:#f4ebfd}.focus\\:bg-purple-100:focus-visible{background-color:#dfc2f9}.focus\\:bg-purple-200:focus-visible{background-color:#c999f4}.focus\\:bg-purple-300:focus-visible{background-color:#b370f0}.focus\\:bg-purple-500:focus-visible{background-color:#9e47ec}.focus\\:bg-purple-500:focus-visible\\/20{background-color:#9e47ec33}.focus\\:bg-purple-500:focus-visible\\/40{background-color:#9e47ec66}.focus\\:bg-purple-500:focus-visible\\/70{background-color:#9e47ecb3}.focus\\:bg-purple-700:focus-visible{background-color:#7919d0}.focus\\:bg-orange-50:focus-visible{background-color:#ffefea}.focus\\:bg-orange-100:focus-visible{background-color:#ffcfc0}.focus\\:bg-orange-200:focus-visible{background-color:#ffb097}.focus\\:bg-orange-300:focus-visible{background-color:#ff906d}.focus\\:bg-orange-500:focus-visible{background-color:#ff7043}.focus\\:bg-orange-500:focus-visible\\/20{background-color:#ff704333}.focus\\:bg-orange-500:focus-visible\\/40{background-color:#ff704366}.focus\\:bg-orange-500:focus-visible\\/70{background-color:#ff7043b3}.focus\\:bg-orange-700:focus-visible{background-color:#e54715}.focus\\:bg-azure-50:focus-visible{background-color:#e5f7fc}.focus\\:bg-azure-100:focus-visible{background-color:#b2e6f7}.focus\\:bg-azure-200:focus-visible{background-color:#80d6f1}.focus\\:bg-azure-300:focus-visible{background-color:#4dc5eb}.focus\\:bg-azure-500:focus-visible{background-color:#1ab5e6}.focus\\:bg-azure-500:focus-visible\\/20{background-color:#1ab5e633}.focus\\:bg-azure-500:focus-visible\\/40{background-color:#1ab5e666}.focus\\:bg-azure-500:focus-visible\\/70{background-color:#1ab5e6b3}.focus\\:bg-azure-700:focus-visible{background-color:#0093c9}.focus\\:bg-gold-50:focus-visible{background-color:#faf3e6}.focus\\:bg-gold-100:focus-visible{background-color:#efdcb4}.focus\\:bg-gold-200:focus-visible{background-color:#e4c481}.focus\\:bg-gold-300:focus-visible{background-color:#daad4f}.focus\\:bg-gold-500:focus-visible{background-color:#cf961d}.focus\\:bg-gold-500:focus-visible\\/20{background-color:#cf961d33}.focus\\:bg-gold-500:focus-visible\\/40{background-color:#cf961d66}.focus\\:bg-gold-500:focus-visible\\/70{background-color:#cf961db3}.focus\\:bg-gold-700:focus-visible{background-color:#b07000}.focus\\:bg-brown-50:focus-visible{background-color:#f1ede9}.focus\\:bg-brown-100:focus-visible{background-color:#d6c9bd}.focus\\:bg-brown-200:focus-visible{background-color:#bca691}.focus\\:bg-brown-300:focus-visible{background-color:#a08266}.focus\\:bg-brown-500:focus-visible{background-color:#865e3a}.focus\\:bg-brown-500:focus-visible\\/20{background-color:#865e3a33}.focus\\:bg-brown-500:focus-visible\\/40{background-color:#865e3a66}.focus\\:bg-brown-500:focus-visible\\/70{background-color:#865e3ab3}.focus\\:bg-brown-700:focus-visible{background-color:#5f330a}.focus\\:bg-navy-50:focus-visible{background-color:#e7e7fa}.focus\\:bg-navy-100:focus-visible{background-color:#b7b6f1}.focus\\:bg-navy-200:focus-visible{background-color:#8785e8}.focus\\:bg-navy-300:focus-visible{background-color:#5755df}.focus\\:bg-navy-500:focus-visible{background-color:#2724d6}.focus\\:bg-navy-500:focus-visible\\/20{background-color:#2724d633}.focus\\:bg-navy-500:focus-visible\\/40{background-color:#2724d666}.focus\\:bg-navy-500:focus-visible\\/70{background-color:#2724d6b3}.focus\\:bg-navy-700:focus-visible{background-color:#0000b8}.focus\\:bg-lime-50:focus-visible{background-color:#ecf6e7}.focus\\:bg-lime-100:focus-visible{background-color:#c5e3b6}.focus\\:bg-lime-200:focus-visible{background-color:#9ed186}.focus\\:bg-lime-300:focus-visible{background-color:#77bf56}.focus\\:bg-lime-500:focus-visible{background-color:#50ac25}.focus\\:bg-lime-500:focus-visible\\/20{background-color:#50ac2533}.focus\\:bg-lime-500:focus-visible\\/40{background-color:#50ac2566}.focus\\:bg-lime-500:focus-visible\\/70{background-color:#50ac25b3}.focus\\:bg-lime-700:focus-visible{background-color:#238900}.focus\\:bg-magenta-50:focus-visible{background-color:#fbe9f1}.focus\\:bg-magenta-100:focus-visible{background-color:#f4bed6}.focus\\:bg-magenta-200:focus-visible{background-color:#ed93bb}.focus\\:bg-magenta-300:focus-visible{background-color:#e668a0}.focus\\:bg-magenta-500:focus-visible{background-color:#df3d85}.focus\\:bg-magenta-500:focus-visible\\/20{background-color:#df3d8533}.focus\\:bg-magenta-500:focus-visible\\/40{background-color:#df3d8566}.focus\\:bg-magenta-500:focus-visible\\/70{background-color:#df3d85b3}.focus\\:bg-magenta-700:focus-visible{background-color:#c10d5d}.active\\:text-white-50:active{color:#fff}.active\\:text-white-100:active{color:#f7f7f7}.active\\:text-white-200:active{color:#eee}.active\\:text-white-300:active{color:#e5e5e5}.active\\:text-white-500:active{color:#dadada}.active\\:text-white-500:active\\/20{color:#dadada33}.active\\:text-white-500:active\\/40{color:#dadada66}.active\\:text-white-500:active\\/70{color:#dadadab3}.active\\:text-white-700:active{color:#ccc}.active\\:text-black-50:active{color:#aaa}.active\\:text-black-100:active{color:#919191}.active\\:text-black-200:active{color:#6c6c6c}.active\\:text-black-300:active{color:#424242}.active\\:text-black-500:active{color:#2f2f2f}.active\\:text-black-500:active\\/20{color:#2f2f2f33}.active\\:text-black-500:active\\/40{color:#2f2f2f66}.active\\:text-black-500:active\\/70{color:#2f2f2fb3}.active\\:text-black-700:active{color:#1d1d1d}.active\\:text-blue-50:active{color:#e9effd}.active\\:text-blue-100:active{color:#bed0f9}.active\\:text-blue-200:active{color:#92b1f5}.active\\:text-blue-300:active{color:#6692f1}.active\\:text-blue-500:active{color:#3b73ed}.active\\:text-blue-500:active\\/20{color:#3b73ed33}.active\\:text-blue-500:active\\/40{color:#3b73ed66}.active\\:text-blue-500:active\\/70{color:#3b73edb3}.active\\:text-blue-700:active{color:#0b49d1}.active\\:text-blue-900:active{color:#00179e}.active\\:text-red-50:active{color:#fbe9e9}.active\\:text-red-100:active{color:#f4bebe}.active\\:text-red-200:active{color:#ed9292}.active\\:text-red-300:active{color:#e66767}.active\\:text-red-500:active{color:#df3c3c}.active\\:text-red-500:active\\/20{color:#df3c3c33}.active\\:text-red-500:active\\/40{color:#df3c3c66}.active\\:text-red-500:active\\/70{color:#df3c3cb3}.active\\:text-red-700:active{color:#c20c0c}.active\\:text-green-50:active{color:#e7f4f3}.active\\:text-green-100:active{color:#b6dfdb}.active\\:text-green-200:active{color:#86c9c3}.active\\:text-green-300:active{color:#56b4ac}.active\\:text-green-500:active{color:#259f94}.active\\:text-green-500:active\\/20{color:#259f9433}.active\\:text-green-500:active\\/40{color:#259f9466}.active\\:text-green-500:active\\/70{color:#259f94b3}.active\\:text-green-700:active{color:#007a6e}.active\\:text-yellow-50:active{color:#fef4e8}.active\\:text-yellow-100:active{color:#fddeb9}.active\\:text-yellow-200:active{color:#fbc88b}.active\\:text-yellow-300:active{color:#fab15c}.active\\:text-yellow-500:active{color:#f89b2e}.active\\:text-yellow-500:active\\/20{color:#f89b2e33}.active\\:text-yellow-500:active\\/40{color:#f89b2e66}.active\\:text-yellow-500:active\\/70{color:#f89b2eb3}.active\\:text-yellow-700:active{color:#de7700}.active\\:text-purple-50:active{color:#f4ebfd}.active\\:text-purple-100:active{color:#dfc2f9}.active\\:text-purple-200:active{color:#c999f4}.active\\:text-purple-300:active{color:#b370f0}.active\\:text-purple-500:active{color:#9e47ec}.active\\:text-purple-500:active\\/20{color:#9e47ec33}.active\\:text-purple-500:active\\/40{color:#9e47ec66}.active\\:text-purple-500:active\\/70{color:#9e47ecb3}.active\\:text-purple-700:active{color:#7919d0}.active\\:text-orange-50:active{color:#ffefea}.active\\:text-orange-100:active{color:#ffcfc0}.active\\:text-orange-200:active{color:#ffb097}.active\\:text-orange-300:active{color:#ff906d}.active\\:text-orange-500:active{color:#ff7043}.active\\:text-orange-500:active\\/20{color:#ff704333}.active\\:text-orange-500:active\\/40{color:#ff704366}.active\\:text-orange-500:active\\/70{color:#ff7043b3}.active\\:text-orange-700:active{color:#e54715}.active\\:text-azure-50:active{color:#e5f7fc}.active\\:text-azure-100:active{color:#b2e6f7}.active\\:text-azure-200:active{color:#80d6f1}.active\\:text-azure-300:active{color:#4dc5eb}.active\\:text-azure-500:active{color:#1ab5e6}.active\\:text-azure-500:active\\/20{color:#1ab5e633}.active\\:text-azure-500:active\\/40{color:#1ab5e666}.active\\:text-azure-500:active\\/70{color:#1ab5e6b3}.active\\:text-azure-700:active{color:#0093c9}.active\\:text-gold-50:active{color:#faf3e6}.active\\:text-gold-100:active{color:#efdcb4}.active\\:text-gold-200:active{color:#e4c481}.active\\:text-gold-300:active{color:#daad4f}.active\\:text-gold-500:active{color:#cf961d}.active\\:text-gold-500:active\\/20{color:#cf961d33}.active\\:text-gold-500:active\\/40{color:#cf961d66}.active\\:text-gold-500:active\\/70{color:#cf961db3}.active\\:text-gold-700:active{color:#b07000}.active\\:text-brown-50:active{color:#f1ede9}.active\\:text-brown-100:active{color:#d6c9bd}.active\\:text-brown-200:active{color:#bca691}.active\\:text-brown-300:active{color:#a08266}.active\\:text-brown-500:active{color:#865e3a}.active\\:text-brown-500:active\\/20{color:#865e3a33}.active\\:text-brown-500:active\\/40{color:#865e3a66}.active\\:text-brown-500:active\\/70{color:#865e3ab3}.active\\:text-brown-700:active{color:#5f330a}.active\\:text-navy-50:active{color:#e7e7fa}.active\\:text-navy-100:active{color:#b7b6f1}.active\\:text-navy-200:active{color:#8785e8}.active\\:text-navy-300:active{color:#5755df}.active\\:text-navy-500:active{color:#2724d6}.active\\:text-navy-500:active\\/20{color:#2724d633}.active\\:text-navy-500:active\\/40{color:#2724d666}.active\\:text-navy-500:active\\/70{color:#2724d6b3}.active\\:text-navy-700:active{color:#0000b8}.active\\:text-lime-50:active{color:#ecf6e7}.active\\:text-lime-100:active{color:#c5e3b6}.active\\:text-lime-200:active{color:#9ed186}.active\\:text-lime-300:active{color:#77bf56}.active\\:text-lime-500:active{color:#50ac25}.active\\:text-lime-500:active\\/20{color:#50ac2533}.active\\:text-lime-500:active\\/40{color:#50ac2566}.active\\:text-lime-500:active\\/70{color:#50ac25b3}.active\\:text-lime-700:active{color:#238900}.active\\:text-magenta-50:active{color:#fbe9f1}.active\\:text-magenta-100:active{color:#f4bed6}.active\\:text-magenta-200:active{color:#ed93bb}.active\\:text-magenta-300:active{color:#e668a0}.active\\:text-magenta-500:active{color:#df3d85}.active\\:text-magenta-500:active\\/20{color:#df3d8533}.active\\:text-magenta-500:active\\/40{color:#df3d8566}.active\\:text-magenta-500:active\\/70{color:#df3d85b3}.active\\:text-magenta-700:active{color:#c10d5d}.active\\:bg-white-50:active{background-color:#fff}.active\\:bg-white-100:active{background-color:#f7f7f7}.active\\:bg-white-200:active{background-color:#eee}.active\\:bg-white-300:active{background-color:#e5e5e5}.active\\:bg-white-500:active{background-color:#dadada}.active\\:bg-white-500:active\\/20{background-color:#dadada33}.active\\:bg-white-500:active\\/40{background-color:#dadada66}.active\\:bg-white-500:active\\/70{background-color:#dadadab3}.active\\:bg-white-700:active{background-color:#ccc}.active\\:bg-black-50:active{background-color:#aaa}.active\\:bg-black-100:active{background-color:#919191}.active\\:bg-black-200:active{background-color:#6c6c6c}.active\\:bg-black-300:active{background-color:#424242}.active\\:bg-black-500:active{background-color:#2f2f2f}.active\\:bg-black-500:active\\/20{background-color:#2f2f2f33}.active\\:bg-black-500:active\\/40{background-color:#2f2f2f66}.active\\:bg-black-500:active\\/70{background-color:#2f2f2fb3}.active\\:bg-black-700:active{background-color:#1d1d1d}.active\\:bg-blue-50:active{background-color:#e9effd}.active\\:bg-blue-100:active{background-color:#bed0f9}.active\\:bg-blue-200:active{background-color:#92b1f5}.active\\:bg-blue-300:active{background-color:#6692f1}.active\\:bg-blue-500:active{background-color:#3b73ed}.active\\:bg-blue-500:active\\/20{background-color:#3b73ed33}.active\\:bg-blue-500:active\\/40{background-color:#3b73ed66}.active\\:bg-blue-500:active\\/70{background-color:#3b73edb3}.active\\:bg-blue-700:active{background-color:#0b49d1}.active\\:bg-blue-900:active{background-color:#00179e}.active\\:bg-red-50:active{background-color:#fbe9e9}.active\\:bg-red-100:active{background-color:#f4bebe}.active\\:bg-red-200:active{background-color:#ed9292}.active\\:bg-red-300:active{background-color:#e66767}.active\\:bg-red-500:active{background-color:#df3c3c}.active\\:bg-red-500:active\\/20{background-color:#df3c3c33}.active\\:bg-red-500:active\\/40{background-color:#df3c3c66}.active\\:bg-red-500:active\\/70{background-color:#df3c3cb3}.active\\:bg-red-700:active{background-color:#c20c0c}.active\\:bg-green-50:active{background-color:#e7f4f3}.active\\:bg-green-100:active{background-color:#b6dfdb}.active\\:bg-green-200:active{background-color:#86c9c3}.active\\:bg-green-300:active{background-color:#56b4ac}.active\\:bg-green-500:active{background-color:#259f94}.active\\:bg-green-500:active\\/20{background-color:#259f9433}.active\\:bg-green-500:active\\/40{background-color:#259f9466}.active\\:bg-green-500:active\\/70{background-color:#259f94b3}.active\\:bg-green-700:active{background-color:#007a6e}.active\\:bg-yellow-50:active{background-color:#fef4e8}.active\\:bg-yellow-100:active{background-color:#fddeb9}.active\\:bg-yellow-200:active{background-color:#fbc88b}.active\\:bg-yellow-300:active{background-color:#fab15c}.active\\:bg-yellow-500:active{background-color:#f89b2e}.active\\:bg-yellow-500:active\\/20{background-color:#f89b2e33}.active\\:bg-yellow-500:active\\/40{background-color:#f89b2e66}.active\\:bg-yellow-500:active\\/70{background-color:#f89b2eb3}.active\\:bg-yellow-700:active{background-color:#de7700}.active\\:bg-purple-50:active{background-color:#f4ebfd}.active\\:bg-purple-100:active{background-color:#dfc2f9}.active\\:bg-purple-200:active{background-color:#c999f4}.active\\:bg-purple-300:active{background-color:#b370f0}.active\\:bg-purple-500:active{background-color:#9e47ec}.active\\:bg-purple-500:active\\/20{background-color:#9e47ec33}.active\\:bg-purple-500:active\\/40{background-color:#9e47ec66}.active\\:bg-purple-500:active\\/70{background-color:#9e47ecb3}.active\\:bg-purple-700:active{background-color:#7919d0}.active\\:bg-orange-50:active{background-color:#ffefea}.active\\:bg-orange-100:active{background-color:#ffcfc0}.active\\:bg-orange-200:active{background-color:#ffb097}.active\\:bg-orange-300:active{background-color:#ff906d}.active\\:bg-orange-500:active{background-color:#ff7043}.active\\:bg-orange-500:active\\/20{background-color:#ff704333}.active\\:bg-orange-500:active\\/40{background-color:#ff704366}.active\\:bg-orange-500:active\\/70{background-color:#ff7043b3}.active\\:bg-orange-700:active{background-color:#e54715}.active\\:bg-azure-50:active{background-color:#e5f7fc}.active\\:bg-azure-100:active{background-color:#b2e6f7}.active\\:bg-azure-200:active{background-color:#80d6f1}.active\\:bg-azure-300:active{background-color:#4dc5eb}.active\\:bg-azure-500:active{background-color:#1ab5e6}.active\\:bg-azure-500:active\\/20{background-color:#1ab5e633}.active\\:bg-azure-500:active\\/40{background-color:#1ab5e666}.active\\:bg-azure-500:active\\/70{background-color:#1ab5e6b3}.active\\:bg-azure-700:active{background-color:#0093c9}.active\\:bg-gold-50:active{background-color:#faf3e6}.active\\:bg-gold-100:active{background-color:#efdcb4}.active\\:bg-gold-200:active{background-color:#e4c481}.active\\:bg-gold-300:active{background-color:#daad4f}.active\\:bg-gold-500:active{background-color:#cf961d}.active\\:bg-gold-500:active\\/20{background-color:#cf961d33}.active\\:bg-gold-500:active\\/40{background-color:#cf961d66}.active\\:bg-gold-500:active\\/70{background-color:#cf961db3}.active\\:bg-gold-700:active{background-color:#b07000}.active\\:bg-brown-50:active{background-color:#f1ede9}.active\\:bg-brown-100:active{background-color:#d6c9bd}.active\\:bg-brown-200:active{background-color:#bca691}.active\\:bg-brown-300:active{background-color:#a08266}.active\\:bg-brown-500:active{background-color:#865e3a}.active\\:bg-brown-500:active\\/20{background-color:#865e3a33}.active\\:bg-brown-500:active\\/40{background-color:#865e3a66}.active\\:bg-brown-500:active\\/70{background-color:#865e3ab3}.active\\:bg-brown-700:active{background-color:#5f330a}.active\\:bg-navy-50:active{background-color:#e7e7fa}.active\\:bg-navy-100:active{background-color:#b7b6f1}.active\\:bg-navy-200:active{background-color:#8785e8}.active\\:bg-navy-300:active{background-color:#5755df}.active\\:bg-navy-500:active{background-color:#2724d6}.active\\:bg-navy-500:active\\/20{background-color:#2724d633}.active\\:bg-navy-500:active\\/40{background-color:#2724d666}.active\\:bg-navy-500:active\\/70{background-color:#2724d6b3}.active\\:bg-navy-700:active{background-color:#0000b8}.active\\:bg-lime-50:active{background-color:#ecf6e7}.active\\:bg-lime-100:active{background-color:#c5e3b6}.active\\:bg-lime-200:active{background-color:#9ed186}.active\\:bg-lime-300:active{background-color:#77bf56}.active\\:bg-lime-500:active{background-color:#50ac25}.active\\:bg-lime-500:active\\/20{background-color:#50ac2533}.active\\:bg-lime-500:active\\/40{background-color:#50ac2566}.active\\:bg-lime-500:active\\/70{background-color:#50ac25b3}.active\\:bg-lime-700:active{background-color:#238900}.active\\:bg-magenta-50:active{background-color:#fbe9f1}.active\\:bg-magenta-100:active{background-color:#f4bed6}.active\\:bg-magenta-200:active{background-color:#ed93bb}.active\\:bg-magenta-300:active{background-color:#e668a0}.active\\:bg-magenta-500:active{background-color:#df3d85}.active\\:bg-magenta-500:active\\/20{background-color:#df3d8533}.active\\:bg-magenta-500:active\\/40{background-color:#df3d8566}.active\\:bg-magenta-500:active\\/70{background-color:#df3d85b3}.active\\:bg-magenta-700:active{background-color:#c10d5d}.transition{transition:all .2s ease-in-out}.disable-selection,.logo-container .logo-image,.cover-container .cover-image,.profile-rounded-image,.profile-square-image{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none}.drop-zone-container.has-logo{display:none}.largeContainer{position:relative;min-height:178px}.largeContainer .cropper-overlay{width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:1050;gap:4px;opacity:1;position:absolute}.largeContainer .cropper-overlay .img-cropper{height:178px!important}.largeContainer.hasCropper{min-height:212px;position:relative}.logo-container{position:absolute;top:0;left:0;width:616px;height:214px;overflow:hidden}.logo-container .logo-image{width:100%;height:100%;z-index:1000}.logoVar{height:214px}.logoVar.hasCropper{height:240px!important}.logoVar.hasCropper .drop-zone-container{display:none!important}.logoVar .drop-zone-container .drop-zone,.logoVar .drop-zone-container .drop-zone-error{height:204px}.logoVar .cropper-overlay{height:240px!important}.logoVar .cropper-overlay .img-cropper{height:206px!important}.cover-container{width:267px;height:178px}.cover-container .cover-image{width:100%;height:100%;object-fit:cover;display:block}.profile-rounded-image{width:178px;height:178px;object-fit:cover;display:block;border-radius:50%}.profile-square-image{width:160px;height:178px;object-fit:cover;display:block;border-radius:2px}.container.dragMode{position:fixed;position-anchor:--modal-body;left:anchor(left);top:anchor(top);height:anchor-size(--modal-body height)!important;width:anchor-size(--modal-body width)!important;display:flex;justify-content:center;align-items:center;gap:0;background-color:#fff!important}.container.dragMode .avatar,.container.dragMode .profile-container,.container.dragMode .logo-container,.container.dragMode .cover-container,.container.dragMode .docs{display:none}.container.dragMode .drop-zone-container{position:relative;width:100%;height:100%;flex:1 1 100%}.container.dragMode .drop-zone-container .drop-zone{flex-direction:column;height:100%;outline:none!important;margin:0!important;border:4px dashed #cccccc;border-color:#ccc}.container.dragMode .drop-zone-container .drop-zone .illustration,.container.dragMode .drop-zone-container .drop-zone svg{width:200px!important;height:200px!important;pointer-events:none!important}.container.dragMode .drop-zone-container .drop-zone .drag-icons-container{position:relative}.container.dragMode .drop-zone-container .drop-zone .drag-icons-container .drag-icon-document{width:80px!important;height:80px!important}.container.dragMode .drop-zone-container .drop-zone .drag-icons-container .drag-icon-document svg{width:80px!important;height:80px!important}.container.dragMode .drop-zone-container .drop-zone .drag-icons-container ng-lottie{width:200px;height:200px;display:block}.container.dragMode .drop-zone-container .drop-zone .drop-zone-focus-text{margin-top:32px}.container.dragMode .drop-zone-container .drop-zone .drop-zone-focus-text .heading{font-weight:700;font-size:14px;line-height:18px}.container.dragMode:hover .drop-zone{background-color:#fff!important}.container.dragMode.onDragover .drop-zone-container .drop-zone{border-color:#ccc}.is-documents-mode .dragMode{height:120px!important}.dragModeDocuments .drop-zone-container .drop-zone{background-color:#fff!important}.dragModeDocuments .drop-zone-container .drop-zone .drop-zone-focus-text .heading{font-weight:700;font-size:14px;line-height:18px}.is-details-slider{width:100%!important;height:100%!important;overflow:hidden}.is-details-slider .sliders{display:flex;align-items:center;justify-content:center;gap:4px;min-height:6px!important;height:auto!important;width:100%!important;margin-bottom:6px!important;margin-top:12px!important;opacity:0;pointer-events:none;transition:opacity .3s ease-in-out}.is-details-slider .sliders .slider-item{width:12px;height:6px;border-radius:2px;background-color:#e5e5e5;transform-origin:center;cursor:pointer!important;transition:width .2s ease-in-out,background-color .2s ease-in-out}.is-details-slider .sliders .slider-item.active{width:20px;background-color:#919191}.is-details-slider .drop-zone-container{display:none!important}.is-details-slider .docs{width:100%!important;position:relative!important;overflow:hidden!important}.is-details-slider .docs .carousel-button{opacity:0!important;pointer-events:none!important;transition:opacity .3s ease-in-out!important}.is-details-slider .docs:hover .carousel-button{opacity:1!important;pointer-events:auto!important}.is-details-slider .docs:hover .carousel-button[disabled]{opacity:0!important;pointer-events:none!important}.is-details-slider .doc-container{display:flex!important;align-items:flex-start!important;height:auto!important;flex-shrink:0!important;gap:0!important;position:relative!important;transition:transform .3s ease-out}.is-details-slider .doc{flex:0 0 100%!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;display:flex!important;justify-content:center!important;background-color:transparent!important;flex-shrink:0!important;position:relative!important}.is-details-slider .doc.doc-hidden{height:0!important;max-height:0!important;min-height:0!important;overflow:hidden!important;opacity:0;pointer-events:none;visibility:hidden;margin:0!important;padding:0!important}.is-details-slider .doc.doc-visible{height:auto!important;opacity:1;visibility:visible}.is-details-slider .carousel-button{position:absolute!important;top:45%!important}.is-details-slider:hover .sliders{opacity:1;pointer-events:auto}.is-drawer-mode{width:100%!important;padding:4px!important;position:absolute!important;max-width:100%!important}.is-drawer-mode .drop-zone-container{display:none!important}.is-drawer-mode .skeleton-container.drawer-position{width:100%!important;position:relative!important;overflow:hidden!important;display:flex;align-items:center;gap:4px}.is-drawer-mode .skeleton-container.drawer-position .skeleton-item{width:194px;height:194px;flex:0 0 194px;border-radius:2px;padding:4px}.is-drawer-mode .skeleton-container.drawer-position .skeleton-item .skeleton-bar{width:100%;height:100%;background-color:#fff}.is-drawer-mode .docs{width:100%!important;position:relative!important;overflow:hidden!important}.is-drawer-mode .docs .doc-container{display:flex;width:auto!important;height:auto!important;gap:4px!important;transition:transform .3s ease-out}.is-drawer-mode .docs .doc-container .doc{width:194px!important;height:194px!important;flex:0 0 194px!important;background-color:transparent!important}.is-drawer-mode .carousel-button.carousel-right{right:4px!important;position:absolute!important}.is-drawer-mode .carousel-button.carousel-left{left:4px!important;position:absolute!important}.isCoverDetails{width:100%!important;height:100%!important}.isCoverDetails .drop-zone-container{display:none!important}.isCoverDetails .docs{width:100%!important}.isCoverDetails .docs .doc{flex:0 0 100%!important;width:100%!important;height:auto!important;display:block!important;background-color:transparent!important}.more-docs{width:148px;flex:0 0 148px}.more-docs .illustration{width:80px;height:80px}.more-docs .drop-zone{padding:22px 0;flex-direction:column}.more-docs .drop-zone-error,.more-docs .drop-zone-error .drop-zone-text{padding:0 12px}.small-more-docs{width:148px!important}.small-more-docs .illustration,.small-more-docs svg{width:80px!important;height:80px!important}.small-more-docs .drop-zone{padding:22px 0!important;flex-direction:column}.unsupported .drop-zone-error{display:flex}.unsupported .drop-zone-text{padding:0 12px}.unsupported .drop-zone-text .heading.invalid{line-height:18px}.unsupported .drop-zone-text .subtext{line-height:14px;margin-bottom:0}.unsupported .cancel-button .cancel-icon{width:18px!important;height:18px!important}.unsupported .cancel-button-documents{display:none}.max-reached,.max-reached-more-doc{opacity:.4;pointer-events:none;cursor:none}.max-reached-more-doc .drop-zone{padding:6px 0!important;height:170px}.max-reached-more-doc .drop-zone-text{padding-left:20px;padding-right:20px}.max-reached-more-video .drop-zone{padding:13px 0!important;flex-direction:column}.invalid-file-size .drop-zone .illustration{display:none!important}.invalid-file-size .drop-zone .drop-zone-text{padding-left:20px;padding-right:20px}.drop-zone-error{position:absolute;inset:0;background-color:#fff;display:none;justify-content:center;align-items:center;flex-direction:column;margin:4px;outline:4px dashed #ed9292;border-radius:2px;padding:52px 12px;gap:12px}.drop-zone-error .cancel-button{cursor:pointer;background-color:transparent;position:absolute;top:2px;right:2px;height:26px;width:26px;padding:0;display:grid;place-items:center;transition:color .2s ease-in-out;color:#919191}.drop-zone-error .cancel-button:hover{color:#424242}.drop-zone-error .file-types{display:flex;align-items:center;gap:2px;text-transform:uppercase;max-width:100%;flex-wrap:wrap;justify-content:center}.drop-zone-error .badge{font-size:11px;font-weight:900;color:#fff;line-height:14px;padding:2px 4px;width:35px;border-radius:1px;margin-bottom:0;text-align:center;background-color:#919191}.drop-zone-error .pdf{background-color:#e66767}.drop-zone-error .video{background-color:#b370f0}.drop-zone-error .image{background-color:#fab15c}\n"] }]
|
|
5683
5684
|
}], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { crop: [{ type: i0.Input, args: [{ isSignal: true, alias: "crop", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], deletedFileIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "deletedFileIds", required: false }] }], maxCountFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxCountFiles", required: false }] }], isDetailsSlider: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDetailsSlider", required: false }] }], isDrawerMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDrawerMode", required: false }] }], isCoverDetails: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCoverDetails", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], isDocumentsMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDocumentsMode", required: false }] }], documentsDropZoneOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "documentsDropZoneOpen", required: false }] }], searchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchText", required: false }] }], avatarColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarColor", required: false }] }], files: [{
|
|
5684
5685
|
type: Input
|
|
5685
5686
|
}], onDeletedFileIds: [{
|
|
@@ -6615,7 +6616,7 @@ class CaCustomDatetimePickersComponent {
|
|
|
6615
6616
|
this.outputType[2] = this.timeMinutes[this.scrollTypes.minutesScroll];
|
|
6616
6617
|
this.outputType[4] = this.timeOfDay[this.scrollTypes.pmAmScroll];
|
|
6617
6618
|
this.selectedDateTime = this.createStringFromOutput();
|
|
6618
|
-
let currentDate = moment().format('MM/DD/
|
|
6619
|
+
let currentDate = moment().format('MM/DD/YY');
|
|
6619
6620
|
// this.calendarService.dateChanged.next(
|
|
6620
6621
|
// new Date(currentDate + ' ' + this.selectedDateTime)
|
|
6621
6622
|
// );
|
|
@@ -6623,7 +6624,7 @@ class CaCustomDatetimePickersComponent {
|
|
|
6623
6624
|
}
|
|
6624
6625
|
setDefaultTime(event) {
|
|
6625
6626
|
event?.stopPropagation();
|
|
6626
|
-
let currentDate = moment().format('MM/DD/
|
|
6627
|
+
let currentDate = moment().format('MM/DD/YY');
|
|
6627
6628
|
//this.calendarService.dateChanged.next(new Date(currentDate + ' 08:00'));
|
|
6628
6629
|
this.closePopover.emit(new Date(currentDate + ' 08:00'));
|
|
6629
6630
|
}
|
|
@@ -6738,1341 +6739,1025 @@ var InputConfigNameStringEnum;
|
|
|
6738
6739
|
InputConfigNameStringEnum["ADDRESS"] = "Address";
|
|
6739
6740
|
})(InputConfigNameStringEnum || (InputConfigNameStringEnum = {}));
|
|
6740
6741
|
|
|
6741
|
-
|
|
6742
|
-
|
|
6743
|
-
|
|
6744
|
-
|
|
6745
|
-
|
|
6746
|
-
|
|
6747
|
-
|
|
6748
|
-
|
|
6749
|
-
|
|
6750
|
-
|
|
6751
|
-
|
|
6752
|
-
|
|
6753
|
-
|
|
6754
|
-
|
|
6755
|
-
|
|
6756
|
-
|
|
6757
|
-
|
|
6758
|
-
|
|
6759
|
-
|
|
6760
|
-
|
|
6761
|
-
|
|
6762
|
-
|
|
6763
|
-
|
|
6764
|
-
|
|
6765
|
-
eGeneralActions["SELECT"] = "Select";
|
|
6766
|
-
eGeneralActions["SELECT_LOWERCASE"] = "select";
|
|
6767
|
-
eGeneralActions["SEARCH"] = "Search";
|
|
6768
|
-
eGeneralActions["SEARCH_LOWERCASE"] = "search";
|
|
6769
|
-
eGeneralActions["SELECT_ALL"] = "Select All";
|
|
6770
|
-
eGeneralActions["SELECT_REMAINING"] = "Select Remaining";
|
|
6771
|
-
eGeneralActions["CLEAR_SELECTED"] = "Clear Selected";
|
|
6772
|
-
eGeneralActions["ACTIVATE"] = "Activate";
|
|
6773
|
-
eGeneralActions["ACTIVATE_LOWERCASE"] = "activate";
|
|
6774
|
-
eGeneralActions["DEACTIVATE"] = "deactivate";
|
|
6775
|
-
eGeneralActions["DEACTIVATE_LOWERCASE"] = "deactivate";
|
|
6776
|
-
eGeneralActions["CLOSE"] = "Close";
|
|
6777
|
-
eGeneralActions["CLOSE_LOWERCASE"] = "close";
|
|
6778
|
-
eGeneralActions["CLOSE_UPPERCASE"] = "CLOSE";
|
|
6779
|
-
eGeneralActions["OPEN"] = "Open";
|
|
6780
|
-
eGeneralActions["OPEN_LOWERCASE"] = "open";
|
|
6781
|
-
eGeneralActions["NEXT"] = "Next";
|
|
6782
|
-
eGeneralActions["NEXT_LOWERCASE"] = "next";
|
|
6783
|
-
eGeneralActions["PREVIOUS"] = "Previous";
|
|
6784
|
-
eGeneralActions["PREVIOUS_LOWERCASE"] = "previous";
|
|
6785
|
-
eGeneralActions["CLEAR"] = "Clear";
|
|
6786
|
-
eGeneralActions["CLEAR_LOWERCASE"] = "clear";
|
|
6787
|
-
eGeneralActions["CLEAR_ALL"] = "Clear All";
|
|
6788
|
-
eGeneralActions["SHOW_MORE"] = "show more";
|
|
6789
|
-
eGeneralActions["OPEN_MODAL"] = "open-modal";
|
|
6790
|
-
eGeneralActions["EXPAND"] = "Expand";
|
|
6791
|
-
eGeneralActions["EXPAND_LOWERCASE"] = "expand";
|
|
6792
|
-
eGeneralActions["EXPAND_UPPERCASE"] = "EXPAND";
|
|
6793
|
-
eGeneralActions["COLLAPSE"] = "Collapse";
|
|
6794
|
-
eGeneralActions["COLLAPSE_LOWERCASE"] = "collapse";
|
|
6795
|
-
eGeneralActions["COLLAPSE_UPPERCASE"] = "COLLAPSE";
|
|
6796
|
-
eGeneralActions["SORT_BY"] = "Sort By";
|
|
6797
|
-
eGeneralActions["COPY"] = "Copy";
|
|
6798
|
-
eGeneralActions["COPIED"] = "Copied";
|
|
6799
|
-
})(eGeneralActions || (eGeneralActions = {}));
|
|
6800
|
-
|
|
6801
|
-
class CaiInputDatetimePickerComponent {
|
|
6802
|
-
superControl;
|
|
6803
|
-
calendarService;
|
|
6804
|
-
id = '';
|
|
6805
|
-
inputConfig;
|
|
6806
|
-
formFormat;
|
|
6807
|
-
forceInvalidStyling = false;
|
|
6808
|
-
clearInputEvent = new EventEmitter();
|
|
6809
|
-
blurInputEvent = new EventEmitter();
|
|
6810
|
-
dateTimePopover;
|
|
6811
|
-
t2;
|
|
6812
|
-
showDateInput = false;
|
|
6813
|
-
dateTimeInputDate = new Date();
|
|
6814
|
-
dateTimeIntDate = new Date();
|
|
6815
|
-
selectionInput = -1;
|
|
6816
|
-
// Timers
|
|
6817
|
-
dateTimeMainTimer;
|
|
6818
|
-
focusBlur;
|
|
6819
|
-
timeoutCleaner;
|
|
6820
|
-
justEnteredDatePicker = false;
|
|
6821
|
-
// Component properties
|
|
6822
|
-
eGeneralActions = eGeneralActions;
|
|
6823
|
-
isTouchedInput = false;
|
|
6824
|
-
isFocusInput = false;
|
|
6825
|
-
preventBlur = false;
|
|
6826
|
-
valueAfterWriteValue;
|
|
6827
|
-
// Date
|
|
6828
|
-
newInputChanged = false;
|
|
6829
|
-
isDisabled = computed(() => this.inputConfig.isDisabled || this.getSuperControl?.disabled, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
|
|
6830
|
-
// Outputs
|
|
6831
|
-
selectLastOneForSelectionEmitter = new EventEmitter();
|
|
6832
|
-
selectLastOneAfterMouseUpEmitter = new EventEmitter();
|
|
6833
|
-
onDatePasteEmitter = new EventEmitter();
|
|
6834
|
-
onFocusEmitter = new EventEmitter();
|
|
6835
|
-
changeSelectionEmmiter = new EventEmitter();
|
|
6836
|
-
setSelectionEmmiter = new EventEmitter();
|
|
6837
|
-
// View Children
|
|
6838
|
-
span1;
|
|
6839
|
-
span2;
|
|
6840
|
-
span3;
|
|
6841
|
-
holder1;
|
|
6842
|
-
closeTooltip;
|
|
6843
|
-
// Private
|
|
6844
|
-
destroy$ = new Subject();
|
|
6845
|
-
constructor(superControl, calendarService) {
|
|
6846
|
-
this.superControl = superControl;
|
|
6847
|
-
this.calendarService = calendarService;
|
|
6848
|
-
this.superControl.valueAccessor = this;
|
|
6849
|
-
}
|
|
6850
|
-
ngOnInit() { }
|
|
6851
|
-
// Control Value Accessor
|
|
6852
|
-
registerOnChange(fn) {
|
|
6853
|
-
this.onChange = fn;
|
|
6854
|
-
}
|
|
6855
|
-
isPopoverShown = false;
|
|
6856
|
-
onChange(_) { }
|
|
6857
|
-
onTouched = () => { };
|
|
6858
|
-
writeValue(obj) {
|
|
6859
|
-
if (obj)
|
|
6860
|
-
this.setTimeDateInput(obj, true);
|
|
6742
|
+
class InputDatetimeDateInputHelper {
|
|
6743
|
+
static DATE_PLACEHOLDERS = ['MM', 'DD', 'YY'];
|
|
6744
|
+
static DATE_PART_LENGTHS = [2, 2, 2];
|
|
6745
|
+
static isValidDatePartIndex(highlightedPart) {
|
|
6746
|
+
return (highlightedPart === 0 || highlightedPart === 1 || highlightedPart === 2);
|
|
6747
|
+
}
|
|
6748
|
+
static getNormalizedDatePart(part, index) {
|
|
6749
|
+
const placeholder = this.DATE_PLACEHOLDERS[index];
|
|
6750
|
+
const maxLength = this.DATE_PART_LENGTHS[index];
|
|
6751
|
+
if (!part)
|
|
6752
|
+
return placeholder;
|
|
6753
|
+
const trimmed = part.slice(0, maxLength);
|
|
6754
|
+
return trimmed + placeholder.slice(trimmed.length);
|
|
6755
|
+
}
|
|
6756
|
+
static parseDateParts(currentValue) {
|
|
6757
|
+
if (!currentValue) {
|
|
6758
|
+
return [...this.DATE_PLACEHOLDERS];
|
|
6759
|
+
}
|
|
6760
|
+
const [month, day, year] = currentValue.split('/');
|
|
6761
|
+
return [
|
|
6762
|
+
this.getNormalizedDatePart(month, 0),
|
|
6763
|
+
this.getNormalizedDatePart(day, 1),
|
|
6764
|
+
this.getNormalizedDatePart(year, 2),
|
|
6765
|
+
];
|
|
6861
6766
|
}
|
|
6862
|
-
|
|
6863
|
-
|
|
6767
|
+
static composeDateValue(parts) {
|
|
6768
|
+
return `${parts[0]}/${parts[1]}/${parts[2]}`;
|
|
6769
|
+
}
|
|
6770
|
+
static normalizeEmptyDateValue(parts) {
|
|
6771
|
+
const isCompletelyEmpty = parts[0] === this.DATE_PLACEHOLDERS[0] &&
|
|
6772
|
+
parts[1] === this.DATE_PLACEHOLDERS[1] &&
|
|
6773
|
+
parts[2] === this.DATE_PLACEHOLDERS[2];
|
|
6774
|
+
return isCompletelyEmpty ? null : this.composeDateValue(parts);
|
|
6775
|
+
}
|
|
6776
|
+
static buildDatePartFromDigits(digits, partIndex) {
|
|
6777
|
+
const maxLength = this.DATE_PART_LENGTHS[partIndex];
|
|
6778
|
+
const placeholder = this.DATE_PLACEHOLDERS[partIndex];
|
|
6779
|
+
const slicedDigits = digits.slice(0, maxLength);
|
|
6780
|
+
if (slicedDigits.length === maxLength) {
|
|
6781
|
+
if (partIndex === 0) {
|
|
6782
|
+
const clampedMonth = Math.min(Number(slicedDigits), 12);
|
|
6783
|
+
return String(clampedMonth).padStart(2, '0');
|
|
6784
|
+
}
|
|
6785
|
+
if (partIndex === 1) {
|
|
6786
|
+
const clampedDay = Math.min(Number(slicedDigits), 31);
|
|
6787
|
+
return String(clampedDay).padStart(2, '0');
|
|
6788
|
+
}
|
|
6789
|
+
}
|
|
6790
|
+
return slicedDigits + placeholder.slice(slicedDigits.length);
|
|
6791
|
+
}
|
|
6792
|
+
static isDatePartFull(part, partIndex) {
|
|
6793
|
+
return (part.length === this.DATE_PART_LENGTHS[partIndex] && /^\d+$/.test(part));
|
|
6794
|
+
}
|
|
6795
|
+
static getDatePartEnteredLength(part, partIndex) {
|
|
6796
|
+
const placeholder = this.DATE_PLACEHOLDERS[partIndex];
|
|
6797
|
+
const maxLength = this.DATE_PART_LENGTHS[partIndex];
|
|
6798
|
+
const normalizedPart = this.getNormalizedDatePart(part, partIndex);
|
|
6799
|
+
let enteredLength = 0;
|
|
6800
|
+
for (let i = 0; i < maxLength; i += 1) {
|
|
6801
|
+
if (normalizedPart[i] === placeholder[i])
|
|
6802
|
+
break;
|
|
6803
|
+
enteredLength += 1;
|
|
6804
|
+
}
|
|
6805
|
+
return enteredLength;
|
|
6864
6806
|
}
|
|
6865
|
-
|
|
6866
|
-
|
|
6867
|
-
|
|
6868
|
-
|
|
6869
|
-
|
|
6870
|
-
|
|
6871
|
-
// Datepicker
|
|
6872
|
-
this.focusBlur = setTimeout(() => {
|
|
6873
|
-
this.blurOnDateTime();
|
|
6874
|
-
}, 0);
|
|
6807
|
+
static isLeapYear(year) {
|
|
6808
|
+
if (year % 400 === 0)
|
|
6809
|
+
return true;
|
|
6810
|
+
if (year % 100 === 0)
|
|
6811
|
+
return false;
|
|
6812
|
+
return year % 4 === 0;
|
|
6875
6813
|
}
|
|
6876
|
-
|
|
6877
|
-
|
|
6878
|
-
|
|
6879
|
-
|
|
6880
|
-
|
|
6881
|
-
|
|
6814
|
+
static getMonthMaxDay(month, year) {
|
|
6815
|
+
switch (month) {
|
|
6816
|
+
case 2:
|
|
6817
|
+
if (year === undefined)
|
|
6818
|
+
return 29;
|
|
6819
|
+
return this.isLeapYear(year) ? 29 : 28;
|
|
6820
|
+
case 4:
|
|
6821
|
+
case 6:
|
|
6822
|
+
case 9:
|
|
6823
|
+
case 11:
|
|
6824
|
+
return 30;
|
|
6825
|
+
default:
|
|
6826
|
+
return 31;
|
|
6882
6827
|
}
|
|
6883
6828
|
}
|
|
6884
|
-
|
|
6885
|
-
|
|
6886
|
-
|
|
6829
|
+
static enforceDayLimitByMonth(parts) {
|
|
6830
|
+
const monthPart = parts[0];
|
|
6831
|
+
const dayPart = parts[1];
|
|
6832
|
+
const yearPart = parts[2];
|
|
6833
|
+
if (!this.isDatePartFull(monthPart, 0) ||
|
|
6834
|
+
!this.isDatePartFull(dayPart, 1)) {
|
|
6835
|
+
return;
|
|
6887
6836
|
}
|
|
6888
|
-
|
|
6889
|
-
|
|
6837
|
+
const month = Number(monthPart);
|
|
6838
|
+
const day = Number(dayPart);
|
|
6839
|
+
const resolvedYear = this.isDatePartFull(yearPart, 2)
|
|
6840
|
+
? 2000 + Number(yearPart)
|
|
6841
|
+
: undefined;
|
|
6842
|
+
const monthMaxDay = this.getMonthMaxDay(month, resolvedYear);
|
|
6843
|
+
if (day > monthMaxDay) {
|
|
6844
|
+
parts[1] = String(monthMaxDay).padStart(2, '0');
|
|
6890
6845
|
}
|
|
6891
|
-
this.calendarService.dateChanged
|
|
6892
|
-
.pipe(takeUntil(this.destroy$))
|
|
6893
|
-
.subscribe((date) => {
|
|
6894
|
-
if (!this.inputConfig.isDisabled) {
|
|
6895
|
-
this.setTimeDateInput(date);
|
|
6896
|
-
this.t2.close();
|
|
6897
|
-
}
|
|
6898
|
-
});
|
|
6899
6846
|
}
|
|
6900
|
-
|
|
6901
|
-
|
|
6902
|
-
|
|
6903
|
-
|
|
6904
|
-
|
|
6905
|
-
|
|
6906
|
-
|
|
6907
|
-
onDatePaste(event) {
|
|
6908
|
-
event.preventDefault();
|
|
6909
|
-
const pasteText = event.clipboardData?.getData('text')?.trim();
|
|
6910
|
-
this.processPastedDate(pasteText);
|
|
6911
|
-
}
|
|
6912
|
-
processPastedDate(pasteText) {
|
|
6913
|
-
// Only process if it's a date picker (not time picker)
|
|
6914
|
-
if (this.inputConfig.name !== InputConfigNameStringEnum.DATE_PICKER &&
|
|
6915
|
-
this.inputConfig.name !==
|
|
6916
|
-
InputConfigNameStringEnum.DATE_PICKER_BANK_CARD &&
|
|
6917
|
-
this.isFocusInput) {
|
|
6918
|
-
return;
|
|
6847
|
+
static handleDateDigitInput(currentValue, nextValueParts, highlightedPart, insertedCharacter) {
|
|
6848
|
+
const isSingleDigit = /^\d$/.test(insertedCharacter);
|
|
6849
|
+
if (!isSingleDigit) {
|
|
6850
|
+
return {
|
|
6851
|
+
nextValue: currentValue,
|
|
6852
|
+
nextHighlightedPart: highlightedPart,
|
|
6853
|
+
};
|
|
6919
6854
|
}
|
|
6920
|
-
|
|
6921
|
-
|
|
6922
|
-
|
|
6923
|
-
|
|
6924
|
-
|
|
6925
|
-
|
|
6926
|
-
|
|
6927
|
-
|
|
6928
|
-
// Years 00-31 are 2000-2031, years 32-99 are 1932-1999
|
|
6929
|
-
fullYear =
|
|
6930
|
-
parseInt(year) > 31 ? 1900 + parseInt(year) : 2000 + parseInt(year);
|
|
6931
|
-
}
|
|
6932
|
-
// Create date object (month is 0-indexed in JS)
|
|
6933
|
-
const pastedDate = new Date(fullYear, parseInt(month) - 1, parseInt(day));
|
|
6934
|
-
// Validate the date is valid
|
|
6935
|
-
if (!isNaN(pastedDate.getTime()) &&
|
|
6936
|
-
pastedDate.getMonth() === parseInt(month) - 1 &&
|
|
6937
|
-
pastedDate.getDate() === parseInt(day)) {
|
|
6938
|
-
this.setTimeDateInput(pastedDate);
|
|
6939
|
-
this.selectSpanByTabIndex(this.selectionInput);
|
|
6940
|
-
this.t2.close();
|
|
6941
|
-
this.blurInputEvent.emit(true);
|
|
6942
|
-
}
|
|
6943
|
-
}
|
|
6944
|
-
}
|
|
6945
|
-
changeSelection(e, noPreventDefault = false) {
|
|
6946
|
-
const isPasting = (e.ctrlKey || e.metaKey) && e.key?.toLowerCase() === 'v';
|
|
6947
|
-
if (e.key === 'Escape') {
|
|
6948
|
-
this.justEnteredDatePicker = false;
|
|
6949
|
-
this.holder1.nativeElement.blur();
|
|
6950
|
-
return;
|
|
6855
|
+
const isPartAlreadyFull = this.isDatePartFull(nextValueParts[highlightedPart], highlightedPart);
|
|
6856
|
+
if (isPartAlreadyFull) {
|
|
6857
|
+
nextValueParts[highlightedPart] = this.buildDatePartFromDigits(insertedCharacter, highlightedPart);
|
|
6858
|
+
this.enforceDayLimitByMonth(nextValueParts);
|
|
6859
|
+
return {
|
|
6860
|
+
nextValue: this.normalizeEmptyDateValue(nextValueParts),
|
|
6861
|
+
nextHighlightedPart: highlightedPart,
|
|
6862
|
+
};
|
|
6951
6863
|
}
|
|
6952
|
-
|
|
6953
|
-
|
|
6864
|
+
const existingDigits = nextValueParts[highlightedPart].replace(/\D/g, '');
|
|
6865
|
+
const nextDigits = `${existingDigits}${insertedCharacter}`;
|
|
6866
|
+
nextValueParts[highlightedPart] = this.buildDatePartFromDigits(nextDigits, highlightedPart);
|
|
6867
|
+
this.enforceDayLimitByMonth(nextValueParts);
|
|
6868
|
+
const didFillCurrentPart = nextDigits.length >= this.DATE_PART_LENGTHS[highlightedPart];
|
|
6869
|
+
const nextHighlightedPart = didFillCurrentPart
|
|
6870
|
+
? highlightedPart === 2
|
|
6871
|
+
? null
|
|
6872
|
+
: highlightedPart + 1
|
|
6873
|
+
: highlightedPart;
|
|
6874
|
+
return {
|
|
6875
|
+
nextValue: this.normalizeEmptyDateValue(nextValueParts),
|
|
6876
|
+
nextHighlightedPart,
|
|
6877
|
+
};
|
|
6878
|
+
}
|
|
6879
|
+
static handleDateInput(currentValue, event, highlightedPart) {
|
|
6880
|
+
const inputEvent = event;
|
|
6881
|
+
const inputType = inputEvent.inputType ?? '';
|
|
6882
|
+
const insertedCharacter = inputEvent.data ?? '';
|
|
6883
|
+
const isSingleDigit = /^\d$/.test(insertedCharacter);
|
|
6884
|
+
if (highlightedPart === null && isSingleDigit) {
|
|
6885
|
+
return {
|
|
6886
|
+
nextValue: currentValue,
|
|
6887
|
+
nextHighlightedPart: 0,
|
|
6888
|
+
};
|
|
6954
6889
|
}
|
|
6955
|
-
|
|
6956
|
-
if (
|
|
6957
|
-
|
|
6958
|
-
|
|
6959
|
-
|
|
6960
|
-
|
|
6961
|
-
e.keyCode == 9 ||
|
|
6962
|
-
e.keyCode == 46 ||
|
|
6963
|
-
(this.selectionInput == 3 && this.inputConfig.name === 'timepicker')) {
|
|
6964
|
-
// Determine the last selectable segment index based on input type
|
|
6965
|
-
const lastSegmentIndex = this.inputConfig.name === 'datepickerBankCard' ? 1 : 2;
|
|
6966
|
-
// Check if Tab/Shift+Tab should be allowed to navigate away
|
|
6967
|
-
const isTabAtEnd = e.keyCode == 9 &&
|
|
6968
|
-
!e.shiftKey &&
|
|
6969
|
-
this.selectionInput == lastSegmentIndex;
|
|
6970
|
-
const isShiftTabAtStart = e.keyCode == 9 && e.shiftKey && this.selectionInput == 0;
|
|
6971
|
-
const shouldAllowTabNavigation = isTabAtEnd || isShiftTabAtStart;
|
|
6972
|
-
// Prevent default and stop propagation unless we're allowing tab navigation
|
|
6973
|
-
if (!shouldAllowTabNavigation) {
|
|
6974
|
-
!e.noPrevent && e.preventDefault();
|
|
6975
|
-
e.stopPropagation();
|
|
6976
|
-
}
|
|
6977
|
-
if (e.keyCode == 37) {
|
|
6978
|
-
this.selectionInput =
|
|
6979
|
-
this.selectionInput <= 0 ? 0 : this.selectionInput - 1;
|
|
6980
|
-
this.selectSpanByTabIndex(this.selectionInput, true);
|
|
6981
|
-
}
|
|
6982
|
-
else if (e.keyCode == 39 || e.keyCode == 9) {
|
|
6983
|
-
if (((this.inputConfig.name === 'datepickerBankCard' &&
|
|
6984
|
-
this.selectionInput != 1) ||
|
|
6985
|
-
(this.inputConfig.name !== 'datepickerBankCard' &&
|
|
6986
|
-
this.selectionInput != 2)) &&
|
|
6987
|
-
!e.shiftKey) {
|
|
6988
|
-
this.selectionInput = this.selectionInput + 1;
|
|
6989
|
-
this.selectSpanByTabIndex(this.selectionInput, true);
|
|
6990
|
-
}
|
|
6991
|
-
else if (e.keyCode == 9 && !e.shiftKey) {
|
|
6992
|
-
// Tab at the end - reset selection and allow default navigation
|
|
6993
|
-
this.selectionInput = -1;
|
|
6994
|
-
}
|
|
6995
|
-
else if (e.shiftKey && e.keyCode == 9 && this.selectionInput != 0) {
|
|
6996
|
-
if (this.selectionInput == -1) {
|
|
6997
|
-
this.selectionInput = 3;
|
|
6998
|
-
}
|
|
6999
|
-
this.selectionInput = this.selectionInput - 1;
|
|
7000
|
-
this.selectSpanByTabIndex(this.selectionInput);
|
|
7001
|
-
}
|
|
7002
|
-
else if (e.shiftKey && e.keyCode == 9 && this.selectionInput == 0) {
|
|
7003
|
-
// Shift+Tab at the start - reset selection and allow default navigation
|
|
7004
|
-
this.selectionInput = -1;
|
|
7005
|
-
}
|
|
7006
|
-
}
|
|
7007
|
-
else if (e.keyCode == 38) {
|
|
7008
|
-
this.setDateTimeModel('up');
|
|
7009
|
-
}
|
|
7010
|
-
else if (e.keyCode == 40) {
|
|
7011
|
-
this.setDateTimeModel('down');
|
|
7012
|
-
}
|
|
7013
|
-
else if (e.keyCode == 8 || e.keyCode == 46) {
|
|
7014
|
-
this.handleKeyboardInputs(e, true);
|
|
7015
|
-
}
|
|
6890
|
+
const effectiveHighlightedPart = highlightedPart;
|
|
6891
|
+
if (inputType === 'deleteSoftLineBackward') {
|
|
6892
|
+
return {
|
|
6893
|
+
nextValue: null,
|
|
6894
|
+
nextHighlightedPart: 0,
|
|
6895
|
+
};
|
|
7016
6896
|
}
|
|
7017
|
-
|
|
7018
|
-
|
|
7019
|
-
|
|
7020
|
-
|
|
7021
|
-
|
|
6897
|
+
const isBackwardContentDelete = inputType === 'deleteContentBackward';
|
|
6898
|
+
const isWordBackwardDelete = inputType === 'deleteWordLineBackward' ||
|
|
6899
|
+
inputType === 'deleteWordBackward';
|
|
6900
|
+
if (isBackwardContentDelete && effectiveHighlightedPart === null) {
|
|
6901
|
+
return {
|
|
6902
|
+
nextValue: currentValue,
|
|
6903
|
+
nextHighlightedPart: 2,
|
|
6904
|
+
};
|
|
7022
6905
|
}
|
|
7023
|
-
|
|
7024
|
-
|
|
7025
|
-
|
|
7026
|
-
|
|
7027
|
-
}
|
|
7028
|
-
if (this.selectionInput == -1) {
|
|
7029
|
-
this.selectionInput = 0;
|
|
7030
|
-
}
|
|
7031
|
-
this.handleKeyboardInputs(e);
|
|
6906
|
+
if (isWordBackwardDelete && effectiveHighlightedPart === null) {
|
|
6907
|
+
return {
|
|
6908
|
+
nextValue: currentValue,
|
|
6909
|
+
nextHighlightedPart: 2,
|
|
6910
|
+
};
|
|
7032
6911
|
}
|
|
7033
|
-
|
|
7034
|
-
|
|
7035
|
-
|
|
7036
|
-
|
|
7037
|
-
|
|
6912
|
+
if (!this.isValidDatePartIndex(effectiveHighlightedPart)) {
|
|
6913
|
+
return {
|
|
6914
|
+
nextValue: currentValue,
|
|
6915
|
+
nextHighlightedPart: effectiveHighlightedPart,
|
|
6916
|
+
};
|
|
7038
6917
|
}
|
|
7039
|
-
const
|
|
7040
|
-
|
|
7041
|
-
this.
|
|
7042
|
-
|
|
7043
|
-
|
|
7044
|
-
|
|
6918
|
+
const nextValueParts = this.parseDateParts(currentValue);
|
|
6919
|
+
if (isWordBackwardDelete) {
|
|
6920
|
+
const currentEnteredLength = this.getDatePartEnteredLength(nextValueParts[effectiveHighlightedPart], effectiveHighlightedPart);
|
|
6921
|
+
const targetPart = currentEnteredLength === 0 && effectiveHighlightedPart > 0
|
|
6922
|
+
? (effectiveHighlightedPart - 1)
|
|
6923
|
+
: effectiveHighlightedPart;
|
|
6924
|
+
nextValueParts[targetPart] = this.DATE_PLACEHOLDERS[targetPart];
|
|
6925
|
+
return {
|
|
6926
|
+
nextValue: this.normalizeEmptyDateValue(nextValueParts),
|
|
6927
|
+
nextHighlightedPart: targetPart,
|
|
6928
|
+
};
|
|
7045
6929
|
}
|
|
7046
|
-
|
|
7047
|
-
|
|
7048
|
-
|
|
7049
|
-
|
|
7050
|
-
|
|
7051
|
-
|
|
7052
|
-
|
|
7053
|
-
this.
|
|
7054
|
-
|
|
6930
|
+
if (isBackwardContentDelete) {
|
|
6931
|
+
const currentPart = nextValueParts[effectiveHighlightedPart];
|
|
6932
|
+
const enteredLength = this.getDatePartEnteredLength(currentPart, effectiveHighlightedPart);
|
|
6933
|
+
if (enteredLength > 0) {
|
|
6934
|
+
const nextDigits = currentPart.slice(0, enteredLength - 1);
|
|
6935
|
+
nextValueParts[effectiveHighlightedPart] = this.buildDatePartFromDigits(nextDigits, effectiveHighlightedPart);
|
|
6936
|
+
return {
|
|
6937
|
+
nextValue: this.normalizeEmptyDateValue(nextValueParts),
|
|
6938
|
+
// Keep focus on current part even when deleting its final digit.
|
|
6939
|
+
// A second backspace (when empty) will move focus backward.
|
|
6940
|
+
nextHighlightedPart: effectiveHighlightedPart,
|
|
6941
|
+
};
|
|
7055
6942
|
}
|
|
6943
|
+
return {
|
|
6944
|
+
nextValue: this.normalizeEmptyDateValue(nextValueParts),
|
|
6945
|
+
nextHighlightedPart: effectiveHighlightedPart > 0
|
|
6946
|
+
? (effectiveHighlightedPart - 1)
|
|
6947
|
+
: 0,
|
|
6948
|
+
};
|
|
7056
6949
|
}
|
|
6950
|
+
return this.handleDateDigitInput(currentValue, nextValueParts, effectiveHighlightedPart, insertedCharacter);
|
|
6951
|
+
}
|
|
6952
|
+
}
|
|
6953
|
+
|
|
6954
|
+
class InputDatetimeTimeInputHelper {
|
|
6955
|
+
static TIME_PLACEHOLDERS = ['HH', 'MM', 'AM'];
|
|
6956
|
+
static TIME_PART_LENGTHS = [2, 2, 2];
|
|
6957
|
+
static isValidTimePartIndex(highlightedPart) {
|
|
6958
|
+
return (highlightedPart === 0 || highlightedPart === 1 || highlightedPart === 2);
|
|
6959
|
+
}
|
|
6960
|
+
static getNormalizedTimePart(part, index) {
|
|
6961
|
+
const placeholder = this.TIME_PLACEHOLDERS[index];
|
|
6962
|
+
const maxLength = this.TIME_PART_LENGTHS[index];
|
|
6963
|
+
if (!part)
|
|
6964
|
+
return placeholder;
|
|
6965
|
+
const trimmed = part.slice(0, maxLength).toUpperCase();
|
|
6966
|
+
return trimmed + placeholder.slice(trimmed.length);
|
|
6967
|
+
}
|
|
6968
|
+
static parseTimeParts(currentValue) {
|
|
6969
|
+
if (!currentValue) {
|
|
6970
|
+
return [...this.TIME_PLACEHOLDERS];
|
|
6971
|
+
}
|
|
6972
|
+
const [timePart, ampmPart] = currentValue.split(' ');
|
|
6973
|
+
const [hour, minute] = (timePart ?? '').split(':');
|
|
6974
|
+
return [
|
|
6975
|
+
this.getNormalizedTimePart(hour, 0),
|
|
6976
|
+
this.getNormalizedTimePart(minute, 1),
|
|
6977
|
+
this.getNormalizedTimePart(ampmPart, 2),
|
|
6978
|
+
];
|
|
7057
6979
|
}
|
|
7058
|
-
|
|
7059
|
-
|
|
7060
|
-
|
|
7061
|
-
|
|
6980
|
+
static composeTimeValue(parts) {
|
|
6981
|
+
return `${parts[0]}:${parts[1]} ${parts[2]}`;
|
|
6982
|
+
}
|
|
6983
|
+
static normalizeEmptyTimeValue(parts) {
|
|
6984
|
+
const isCompletelyEmpty = parts[0] === this.TIME_PLACEHOLDERS[0] &&
|
|
6985
|
+
parts[1] === this.TIME_PLACEHOLDERS[1] &&
|
|
6986
|
+
parts[2] === this.TIME_PLACEHOLDERS[2];
|
|
6987
|
+
return isCompletelyEmpty ? null : this.composeTimeValue(parts);
|
|
6988
|
+
}
|
|
6989
|
+
static buildTimePartFromInput(input, partIndex) {
|
|
6990
|
+
const maxLength = this.TIME_PART_LENGTHS[partIndex];
|
|
6991
|
+
const placeholder = this.TIME_PLACEHOLDERS[partIndex];
|
|
6992
|
+
const slicedInput = input.slice(0, maxLength).toUpperCase();
|
|
6993
|
+
return slicedInput + placeholder.slice(slicedInput.length);
|
|
6994
|
+
}
|
|
6995
|
+
static getTimePartEnteredLength(part, partIndex) {
|
|
6996
|
+
const placeholder = this.TIME_PLACEHOLDERS[partIndex];
|
|
6997
|
+
const maxLength = this.TIME_PART_LENGTHS[partIndex];
|
|
6998
|
+
const normalizedPart = this.getNormalizedTimePart(part, partIndex);
|
|
6999
|
+
let enteredLength = 0;
|
|
7000
|
+
for (let i = 0; i < maxLength; i += 1) {
|
|
7001
|
+
if (normalizedPart[i] === placeholder[i])
|
|
7002
|
+
break;
|
|
7003
|
+
enteredLength += 1;
|
|
7004
|
+
}
|
|
7005
|
+
return enteredLength;
|
|
7062
7006
|
}
|
|
7063
|
-
|
|
7064
|
-
|
|
7065
|
-
return navigationKeys.includes(e.keyCode);
|
|
7007
|
+
static clamp(value, min, max) {
|
|
7008
|
+
return Math.min(Math.max(value, min), max);
|
|
7066
7009
|
}
|
|
7067
|
-
|
|
7068
|
-
this.
|
|
7069
|
-
|
|
7070
|
-
|
|
7071
|
-
|
|
7072
|
-
this.setTimeDateInput(date);
|
|
7073
|
-
}
|
|
7074
|
-
this.t2?.close();
|
|
7075
|
-
this.blurInputEvent.emit(true);
|
|
7076
|
-
}
|
|
7077
|
-
handleFocusInput(e) {
|
|
7078
|
-
const event = e;
|
|
7079
|
-
if (!this.isDisabled()) {
|
|
7080
|
-
clearTimeout(this.dateTimeMainTimer);
|
|
7081
|
-
clearTimeout(this.focusBlur);
|
|
7082
|
-
this.showDateInput = true;
|
|
7083
|
-
if ((this.selectionInput === -1 &&
|
|
7084
|
-
event?.target?.nodeName === 'INPUT') ||
|
|
7085
|
-
event?.relatedTarget?.nodeName === 'INPUT' ||
|
|
7086
|
-
event?.relatedTarget === null) {
|
|
7087
|
-
this.preventBlur = true;
|
|
7088
|
-
this.holder1.nativeElement.focus();
|
|
7089
|
-
this.setSpanSelection(this.holder1.nativeElement);
|
|
7090
|
-
this.selectionInput = -1;
|
|
7091
|
-
}
|
|
7092
|
-
this.t2.toggle();
|
|
7093
|
-
}
|
|
7094
|
-
}
|
|
7095
|
-
setSpanSelection(element) {
|
|
7096
|
-
let range;
|
|
7097
|
-
let selection;
|
|
7098
|
-
if (window.getSelection && document.createRange) {
|
|
7099
|
-
selection = window.getSelection();
|
|
7100
|
-
range = document.createRange();
|
|
7101
|
-
range.selectNodeContents(element);
|
|
7102
|
-
selection?.removeAllRanges();
|
|
7103
|
-
selection?.addRange(range);
|
|
7104
|
-
}
|
|
7105
|
-
}
|
|
7106
|
-
setSelection(event) {
|
|
7107
|
-
const element = event.target;
|
|
7108
|
-
const selectionInput = parseInt(element.getAttribute('tabindex'));
|
|
7109
|
-
const currentSelection = window.getSelection();
|
|
7110
|
-
if (currentSelection && currentSelection.toString().length > 10) {
|
|
7111
|
-
this.holder1.nativeElement.focus();
|
|
7112
|
-
this.selectionInput = 0;
|
|
7113
|
-
this.setSpanSelection(this.holder1.nativeElement);
|
|
7114
|
-
clearTimeout(this.dateTimeMainTimer);
|
|
7115
|
-
clearTimeout(this.focusBlur);
|
|
7116
|
-
return;
|
|
7010
|
+
static to12HourAndMeridiem(hour24, currentMeridiem) {
|
|
7011
|
+
const normalizedHour = this.clamp(hour24, 0, 23);
|
|
7012
|
+
const safeMeridiem = currentMeridiem === 'PM' ? 'PM' : 'AM';
|
|
7013
|
+
if (normalizedHour === 0) {
|
|
7014
|
+
return { hour12: '12', meridiem: 'AM' };
|
|
7117
7015
|
}
|
|
7118
|
-
|
|
7119
|
-
|
|
7120
|
-
this.selectionInput = selectionInput;
|
|
7121
|
-
this.setSpanSelection(element);
|
|
7016
|
+
if (normalizedHour === 12) {
|
|
7017
|
+
return { hour12: '12', meridiem: safeMeridiem };
|
|
7122
7018
|
}
|
|
7123
|
-
|
|
7124
|
-
|
|
7125
|
-
|
|
7126
|
-
|
|
7127
|
-
|
|
7128
|
-
}
|
|
7129
|
-
else {
|
|
7130
|
-
event.preventDefault();
|
|
7131
|
-
this.selectSpanByTabIndex(this.selectionInput);
|
|
7132
|
-
}
|
|
7133
|
-
}
|
|
7134
|
-
}
|
|
7135
|
-
// BLUR ON INPUT
|
|
7136
|
-
blurOnDateTime() {
|
|
7137
|
-
clearTimeout(this.dateTimeMainTimer);
|
|
7138
|
-
this.dateTimeMainTimer = setTimeout(() => {
|
|
7139
|
-
if (this.inputConfig.name === InputConfigNameStringEnum.DATE_PICKER) {
|
|
7140
|
-
if (!isNaN(this.span1?.nativeElement.innerHTML) &&
|
|
7141
|
-
!isNaN(this.span2?.nativeElement.innerHTML) &&
|
|
7142
|
-
!isNaN(this.span3?.nativeElement.innerHTML)) {
|
|
7143
|
-
this.calendarService.dateChanged.next(this.dateTimeInputDate);
|
|
7144
|
-
if (this.justEnteredDatePicker) {
|
|
7145
|
-
requestAnimationFrame(() => {
|
|
7146
|
-
KeyboardNavigationHelper.focusNextInput(this.holder1);
|
|
7147
|
-
});
|
|
7148
|
-
}
|
|
7149
|
-
this.justEnteredDatePicker = false;
|
|
7150
|
-
}
|
|
7151
|
-
else {
|
|
7152
|
-
this.span1.nativeElement.innerHTML = 'mm';
|
|
7153
|
-
this.span2.nativeElement.innerHTML = 'dd';
|
|
7154
|
-
this.span3.nativeElement.innerHTML = 'yy';
|
|
7155
|
-
this.dateTimeInputDate = new Date();
|
|
7156
|
-
this.showDateInput = false;
|
|
7157
|
-
this.clearInput();
|
|
7158
|
-
this.justEnteredDatePicker = false;
|
|
7159
|
-
}
|
|
7160
|
-
}
|
|
7161
|
-
else if (this.inputConfig.name ===
|
|
7162
|
-
InputConfigNameStringEnum.DATE_PICKER_BANK_CARD) {
|
|
7163
|
-
if (!isNaN(this.span1.nativeElement.innerHTML) &&
|
|
7164
|
-
!isNaN(this.span2.nativeElement.innerHTML)) {
|
|
7165
|
-
this.calendarService.dateChanged.next(this.dateTimeInputDate);
|
|
7166
|
-
if (this.justEnteredDatePicker) {
|
|
7167
|
-
requestAnimationFrame(() => {
|
|
7168
|
-
KeyboardNavigationHelper.focusNextInput(this.holder1);
|
|
7169
|
-
});
|
|
7170
|
-
}
|
|
7171
|
-
this.justEnteredDatePicker = false;
|
|
7172
|
-
}
|
|
7173
|
-
else {
|
|
7174
|
-
this.span1.nativeElement.innerHTML = 'mm';
|
|
7175
|
-
this.span2.nativeElement.innerHTML = 'yy';
|
|
7176
|
-
this.dateTimeInputDate = new Date();
|
|
7177
|
-
this.showDateInput = false;
|
|
7178
|
-
this.clearInput();
|
|
7179
|
-
this.justEnteredDatePicker = false;
|
|
7180
|
-
}
|
|
7181
|
-
}
|
|
7182
|
-
else {
|
|
7183
|
-
if (!isNaN(this.span1.nativeElement.innerHTML) &&
|
|
7184
|
-
!isNaN(this.span2.nativeElement.innerHTML)) {
|
|
7185
|
-
this.calendarService.dateChanged.next(this.dateTimeInputDate);
|
|
7186
|
-
if (this.justEnteredDatePicker) {
|
|
7187
|
-
requestAnimationFrame(() => {
|
|
7188
|
-
KeyboardNavigationHelper.focusNextInput(this.holder1);
|
|
7189
|
-
});
|
|
7190
|
-
}
|
|
7191
|
-
this.justEnteredDatePicker = false;
|
|
7192
|
-
}
|
|
7193
|
-
else {
|
|
7194
|
-
this.span1.nativeElement.innerHTML = 'HH';
|
|
7195
|
-
this.span2.nativeElement.innerHTML = 'MM';
|
|
7196
|
-
this.setTimePickerTime();
|
|
7197
|
-
this.showDateInput = false;
|
|
7198
|
-
this.clearInput();
|
|
7199
|
-
this.justEnteredDatePicker = false;
|
|
7200
|
-
}
|
|
7201
|
-
}
|
|
7202
|
-
// Clear the timer reference after it's executed
|
|
7203
|
-
this.dateTimeMainTimer = 0;
|
|
7204
|
-
this.selectionInput = -1;
|
|
7205
|
-
this.newInputChanged = true;
|
|
7206
|
-
}, 0);
|
|
7207
|
-
}
|
|
7208
|
-
onEditableFocus(event) {
|
|
7209
|
-
if (this.isDisabled()) {
|
|
7210
|
-
event.preventDefault();
|
|
7211
|
-
event.stopPropagation();
|
|
7212
|
-
this.holder1.nativeElement.blur();
|
|
7213
|
-
return;
|
|
7019
|
+
if (normalizedHour > 12) {
|
|
7020
|
+
return {
|
|
7021
|
+
hour12: String(normalizedHour - 12).padStart(2, '0'),
|
|
7022
|
+
meridiem: 'PM',
|
|
7023
|
+
};
|
|
7214
7024
|
}
|
|
7215
|
-
|
|
7216
|
-
event.stopPropagation();
|
|
7217
|
-
if (this.isFocusInput)
|
|
7218
|
-
return;
|
|
7219
|
-
this.onPopoverClick();
|
|
7025
|
+
return { hour12: String(normalizedHour).padStart(2, '0'), meridiem: 'AM' };
|
|
7220
7026
|
}
|
|
7221
|
-
|
|
7222
|
-
|
|
7223
|
-
|
|
7224
|
-
|
|
7225
|
-
|
|
7226
|
-
|
|
7027
|
+
static handleTimeDigitInput(currentValue, nextValueParts, highlightedPart, insertedCharacter) {
|
|
7028
|
+
const isSingleDigit = /^\d$/.test(insertedCharacter);
|
|
7029
|
+
if (!isSingleDigit) {
|
|
7030
|
+
return {
|
|
7031
|
+
nextValue: currentValue,
|
|
7032
|
+
nextHighlightedPart: highlightedPart,
|
|
7033
|
+
};
|
|
7227
7034
|
}
|
|
7228
|
-
|
|
7229
|
-
|
|
7230
|
-
|
|
7231
|
-
|
|
7232
|
-
|
|
7233
|
-
|
|
7234
|
-
|
|
7235
|
-
|
|
7236
|
-
|
|
7237
|
-
|
|
7238
|
-
|
|
7239
|
-
|
|
7035
|
+
if (highlightedPart === 2) {
|
|
7036
|
+
return {
|
|
7037
|
+
nextValue: currentValue,
|
|
7038
|
+
nextHighlightedPart: highlightedPart,
|
|
7039
|
+
};
|
|
7040
|
+
}
|
|
7041
|
+
const currentPart = nextValueParts[highlightedPart];
|
|
7042
|
+
const isPartAlreadyFull = currentPart.length === this.TIME_PART_LENGTHS[highlightedPart] &&
|
|
7043
|
+
/^\d+$/.test(currentPart);
|
|
7044
|
+
const existingDigits = currentPart.replace(/\D/g, '');
|
|
7045
|
+
const nextDigits = isPartAlreadyFull
|
|
7046
|
+
? insertedCharacter
|
|
7047
|
+
: `${existingDigits}${insertedCharacter}`;
|
|
7048
|
+
if (highlightedPart === 0) {
|
|
7049
|
+
if (nextDigits.length < this.TIME_PART_LENGTHS[0]) {
|
|
7050
|
+
nextValueParts[0] = this.buildTimePartFromInput(nextDigits, 0);
|
|
7051
|
+
return {
|
|
7052
|
+
nextValue: this.normalizeEmptyTimeValue(nextValueParts),
|
|
7053
|
+
nextHighlightedPart: 0,
|
|
7054
|
+
};
|
|
7055
|
+
}
|
|
7056
|
+
const clampedHour = this.clamp(Number(nextDigits), 0, 23);
|
|
7057
|
+
const { hour12, meridiem } = this.to12HourAndMeridiem(clampedHour, nextValueParts[2]);
|
|
7058
|
+
nextValueParts[0] = hour12;
|
|
7059
|
+
nextValueParts[2] = meridiem;
|
|
7060
|
+
return {
|
|
7061
|
+
nextValue: this.normalizeEmptyTimeValue(nextValueParts),
|
|
7062
|
+
nextHighlightedPart: 1,
|
|
7063
|
+
};
|
|
7064
|
+
}
|
|
7065
|
+
if (nextDigits.length < this.TIME_PART_LENGTHS[1]) {
|
|
7066
|
+
nextValueParts[1] = this.buildTimePartFromInput(nextDigits, 1);
|
|
7067
|
+
return {
|
|
7068
|
+
nextValue: this.normalizeEmptyTimeValue(nextValueParts),
|
|
7069
|
+
nextHighlightedPart: 1,
|
|
7070
|
+
};
|
|
7071
|
+
}
|
|
7072
|
+
const clampedMinute = this.clamp(Number(nextDigits), 0, 59);
|
|
7073
|
+
nextValueParts[1] = String(clampedMinute).padStart(2, '0');
|
|
7074
|
+
return {
|
|
7075
|
+
nextValue: this.normalizeEmptyTimeValue(nextValueParts),
|
|
7076
|
+
nextHighlightedPart: 2,
|
|
7077
|
+
};
|
|
7240
7078
|
}
|
|
7241
|
-
|
|
7242
|
-
|
|
7243
|
-
|
|
7244
|
-
|
|
7245
|
-
|
|
7079
|
+
static handleTimeInput(currentValue, event, highlightedPart) {
|
|
7080
|
+
const inputEvent = event;
|
|
7081
|
+
const inputType = inputEvent.inputType ?? '';
|
|
7082
|
+
const insertedCharacter = inputEvent.data ?? '';
|
|
7083
|
+
const isSingleDigit = /^\d$/.test(insertedCharacter);
|
|
7084
|
+
if (highlightedPart === null && isSingleDigit) {
|
|
7085
|
+
return {
|
|
7086
|
+
nextValue: currentValue,
|
|
7087
|
+
nextHighlightedPart: 0,
|
|
7088
|
+
};
|
|
7246
7089
|
}
|
|
7247
|
-
|
|
7248
|
-
|
|
7249
|
-
|
|
7090
|
+
const effectiveHighlightedPart = highlightedPart;
|
|
7091
|
+
if (inputType === 'deleteSoftLineBackward') {
|
|
7092
|
+
return {
|
|
7093
|
+
nextValue: null,
|
|
7094
|
+
nextHighlightedPart: 0,
|
|
7095
|
+
};
|
|
7250
7096
|
}
|
|
7251
|
-
|
|
7252
|
-
|
|
7253
|
-
|
|
7254
|
-
|
|
7255
|
-
|
|
7256
|
-
|
|
7257
|
-
|
|
7258
|
-
|
|
7259
|
-
|
|
7260
|
-
if (this.formFormat) {
|
|
7261
|
-
const newFormFormat = moment(new Date(date)).format(this.formFormat);
|
|
7262
|
-
this.valueAfterWriteValue = newFormFormat;
|
|
7263
|
-
text = newFormFormat;
|
|
7264
|
-
}
|
|
7265
|
-
// When called from writeValue, always store the value to prevent reset in ngAfterViewInit
|
|
7266
|
-
if (hasValue && !this.valueAfterWriteValue) {
|
|
7267
|
-
this.valueAfterWriteValue = text;
|
|
7268
|
-
}
|
|
7269
|
-
if (!hasValue) {
|
|
7270
|
-
this.onChange(text);
|
|
7271
|
-
// Mark as touched when user changes the value
|
|
7272
|
-
this.markAsTouched();
|
|
7097
|
+
const isBackwardContentDelete = inputType === 'deleteContentBackward';
|
|
7098
|
+
const isWordBackwardDelete = inputType === 'deleteWordLineBackward' ||
|
|
7099
|
+
inputType === 'deleteWordBackward';
|
|
7100
|
+
if ((isBackwardContentDelete || isWordBackwardDelete) &&
|
|
7101
|
+
effectiveHighlightedPart === null) {
|
|
7102
|
+
return {
|
|
7103
|
+
nextValue: currentValue,
|
|
7104
|
+
nextHighlightedPart: 2,
|
|
7105
|
+
};
|
|
7273
7106
|
}
|
|
7274
|
-
this.
|
|
7275
|
-
|
|
7276
|
-
|
|
7277
|
-
|
|
7278
|
-
|
|
7279
|
-
if (this.span2)
|
|
7280
|
-
if (this.inputConfig.name !==
|
|
7281
|
-
InputConfigNameStringEnum.DATE_PICKER_BANK_CARD) {
|
|
7282
|
-
this.span2.nativeElement.innerHTML = dateFormat[1];
|
|
7283
|
-
this.span3.nativeElement.innerHTML = dateFormat[2];
|
|
7284
|
-
}
|
|
7285
|
-
else {
|
|
7286
|
-
this.span2.nativeElement.innerHTML = dateFormat[2];
|
|
7287
|
-
}
|
|
7288
|
-
}, 0);
|
|
7289
|
-
if (date) {
|
|
7290
|
-
this.dateTimeInputDate = new Date(date);
|
|
7107
|
+
if (!this.isValidTimePartIndex(effectiveHighlightedPart)) {
|
|
7108
|
+
return {
|
|
7109
|
+
nextValue: currentValue,
|
|
7110
|
+
nextHighlightedPart: effectiveHighlightedPart,
|
|
7111
|
+
};
|
|
7291
7112
|
}
|
|
7292
|
-
|
|
7293
|
-
|
|
7294
|
-
|
|
7295
|
-
|
|
7296
|
-
|
|
7113
|
+
const nextValueParts = this.parseTimeParts(currentValue);
|
|
7114
|
+
if (isWordBackwardDelete) {
|
|
7115
|
+
const currentEnteredLength = this.getTimePartEnteredLength(nextValueParts[effectiveHighlightedPart], effectiveHighlightedPart);
|
|
7116
|
+
const targetPart = currentEnteredLength === 0 && effectiveHighlightedPart > 0
|
|
7117
|
+
? (effectiveHighlightedPart - 1)
|
|
7118
|
+
: effectiveHighlightedPart;
|
|
7119
|
+
nextValueParts[targetPart] = this.TIME_PLACEHOLDERS[targetPart];
|
|
7120
|
+
return {
|
|
7121
|
+
nextValue: this.normalizeEmptyTimeValue(nextValueParts),
|
|
7122
|
+
nextHighlightedPart: targetPart,
|
|
7123
|
+
};
|
|
7297
7124
|
}
|
|
7298
|
-
|
|
7299
|
-
|
|
7300
|
-
|
|
7301
|
-
|
|
7302
|
-
|
|
7303
|
-
|
|
7304
|
-
|
|
7305
|
-
|
|
7306
|
-
|
|
7307
|
-
|
|
7308
|
-
|
|
7309
|
-
|
|
7310
|
-
? ''
|
|
7311
|
-
: parseInt(this.span3.nativeElement.innerHTML);
|
|
7312
|
-
}
|
|
7313
|
-
this.newInputChanged = false;
|
|
7314
|
-
if (this.inputConfig.name === InputConfigNameStringEnum.DATE_PICKER) {
|
|
7315
|
-
if (this.selectionInput === 0) {
|
|
7316
|
-
if (isRestart) {
|
|
7317
|
-
this.span1.nativeElement.innerHTML = 'mm';
|
|
7318
|
-
this.selectionInput = 0;
|
|
7319
|
-
this.selectSpanByTabIndex(0);
|
|
7320
|
-
}
|
|
7321
|
-
else {
|
|
7322
|
-
const currentValue = this.span1.nativeElement.innerHTML;
|
|
7323
|
-
const isPlaceholder = currentValue === 'mm';
|
|
7324
|
-
const hasOneDigit = !isPlaceholder &&
|
|
7325
|
-
currentValue.length === 2 &&
|
|
7326
|
-
currentValue[1] === 'm';
|
|
7327
|
-
if (isPlaceholder) {
|
|
7328
|
-
// First digit: show as "Xm"
|
|
7329
|
-
const keyValue = e.key;
|
|
7330
|
-
if (keyValue >= '0' && keyValue <= '9') {
|
|
7331
|
-
this.span1.nativeElement.innerHTML = keyValue + 'm';
|
|
7332
|
-
if (parseInt(keyValue) > 1) {
|
|
7333
|
-
// Auto-advance for 2-9 since they can only be single digit months
|
|
7334
|
-
this.dateTimeInputDate = new Date(this.dateTimeInputDate.setMonth(parseInt(keyValue) - 1));
|
|
7335
|
-
this.selectionInput = 1;
|
|
7336
|
-
this.selectSpanByTabIndex(1, true);
|
|
7337
|
-
}
|
|
7338
|
-
else {
|
|
7339
|
-
this.selectionInput = 0;
|
|
7340
|
-
this.selectSpanByTabIndex(0);
|
|
7341
|
-
}
|
|
7342
|
-
this.markAsTouched();
|
|
7343
|
-
}
|
|
7344
|
-
}
|
|
7345
|
-
else if (hasOneDigit) {
|
|
7346
|
-
// Second digit: combine with first digit
|
|
7347
|
-
const firstDigit = currentValue[0];
|
|
7348
|
-
const final_value = parseInt(firstDigit + e.key);
|
|
7349
|
-
if (final_value > 12 || final_value === 0) {
|
|
7350
|
-
// Invalid, restart with new digit
|
|
7351
|
-
this.span1.nativeElement.innerHTML = e.key + 'm';
|
|
7352
|
-
if (parseInt(e.key) > 1) {
|
|
7353
|
-
this.dateTimeInputDate = new Date(this.dateTimeInputDate.setMonth(parseInt(e.key) - 1));
|
|
7354
|
-
this.selectionInput = 1;
|
|
7355
|
-
this.selectSpanByTabIndex(1, true);
|
|
7356
|
-
}
|
|
7357
|
-
else {
|
|
7358
|
-
this.selectionInput = 0;
|
|
7359
|
-
this.selectSpanByTabIndex(0);
|
|
7360
|
-
}
|
|
7361
|
-
}
|
|
7362
|
-
else {
|
|
7363
|
-
this.dateTimeInputDate = new Date(this.dateTimeInputDate.setMonth(final_value - 1));
|
|
7364
|
-
this.span1.nativeElement.innerHTML = ('0' + final_value).slice(-2);
|
|
7365
|
-
this.selectionInput = 1;
|
|
7366
|
-
this.selectSpanByTabIndex(1, true);
|
|
7367
|
-
this.markAsTouched();
|
|
7368
|
-
}
|
|
7369
|
-
}
|
|
7370
|
-
else {
|
|
7371
|
-
// Complete value exists, restart
|
|
7372
|
-
const keyValue = e.key;
|
|
7373
|
-
this.span1.nativeElement.innerHTML = keyValue + 'm';
|
|
7374
|
-
if (parseInt(keyValue) > 1) {
|
|
7375
|
-
this.dateTimeInputDate = new Date(this.dateTimeInputDate.setMonth(parseInt(keyValue) - 1));
|
|
7376
|
-
this.selectionInput = 1;
|
|
7377
|
-
this.selectSpanByTabIndex(1, true);
|
|
7378
|
-
}
|
|
7379
|
-
else {
|
|
7380
|
-
this.selectionInput = 0;
|
|
7381
|
-
this.selectSpanByTabIndex(0);
|
|
7382
|
-
}
|
|
7383
|
-
this.markAsTouched();
|
|
7384
|
-
}
|
|
7385
|
-
}
|
|
7386
|
-
}
|
|
7387
|
-
else if (this.selectionInput === 1) {
|
|
7388
|
-
if (isRestart) {
|
|
7389
|
-
this.span2.nativeElement.innerHTML = 'dd';
|
|
7390
|
-
this.selectionInput = 0;
|
|
7391
|
-
this.selectSpanByTabIndex(0, true);
|
|
7392
|
-
}
|
|
7393
|
-
else {
|
|
7394
|
-
const currentValue = this.span2.nativeElement.innerHTML;
|
|
7395
|
-
const isPlaceholder = currentValue === 'dd';
|
|
7396
|
-
const hasOneDigit = !isPlaceholder &&
|
|
7397
|
-
currentValue.length === 2 &&
|
|
7398
|
-
currentValue[1] === 'd';
|
|
7399
|
-
if (isPlaceholder) {
|
|
7400
|
-
// First digit: show as "Xd"
|
|
7401
|
-
const keyValue = e.key;
|
|
7402
|
-
if (keyValue >= '0' && keyValue <= '9') {
|
|
7403
|
-
this.span2.nativeElement.innerHTML = keyValue + 'd';
|
|
7404
|
-
if (parseInt(keyValue) > 3) {
|
|
7405
|
-
// Auto-advance for 4-9 since they can only be single digit days
|
|
7406
|
-
this.dateTimeInputDate = new Date(this.dateTimeInputDate.setDate(parseInt(keyValue)));
|
|
7407
|
-
this.selectionInput = 2;
|
|
7408
|
-
this.selectSpanByTabIndex(2, true);
|
|
7409
|
-
}
|
|
7410
|
-
else {
|
|
7411
|
-
this.selectSpanByTabIndex(1);
|
|
7412
|
-
}
|
|
7413
|
-
this.markAsTouched();
|
|
7414
|
-
}
|
|
7415
|
-
}
|
|
7416
|
-
else if (hasOneDigit) {
|
|
7417
|
-
// Second digit: combine with first digit
|
|
7418
|
-
const firstDigit = currentValue[0];
|
|
7419
|
-
const final_value = parseInt(firstDigit + e.key);
|
|
7420
|
-
if (final_value > 31 || final_value === 0) {
|
|
7421
|
-
// Invalid, restart with new digit
|
|
7422
|
-
this.span2.nativeElement.innerHTML = e.key + 'd';
|
|
7423
|
-
if (parseInt(e.key) > 3) {
|
|
7424
|
-
this.dateTimeInputDate = new Date(this.dateTimeInputDate.setDate(parseInt(e.key)));
|
|
7425
|
-
this.selectionInput = 2;
|
|
7426
|
-
this.selectSpanByTabIndex(2, true);
|
|
7427
|
-
}
|
|
7428
|
-
else {
|
|
7429
|
-
this.selectSpanByTabIndex(1);
|
|
7430
|
-
}
|
|
7431
|
-
this.markAsTouched();
|
|
7432
|
-
}
|
|
7433
|
-
else {
|
|
7434
|
-
this.dateTimeInputDate = new Date(this.dateTimeInputDate.setDate(final_value));
|
|
7435
|
-
this.span2.nativeElement.innerHTML = ('0' + final_value).slice(-2);
|
|
7436
|
-
this.selectionInput = 2;
|
|
7437
|
-
this.selectSpanByTabIndex(2, true);
|
|
7438
|
-
}
|
|
7439
|
-
}
|
|
7440
|
-
else {
|
|
7441
|
-
// Complete value exists, restart
|
|
7442
|
-
const keyValue = e.key;
|
|
7443
|
-
this.span2.nativeElement.innerHTML = keyValue + 'd';
|
|
7444
|
-
if (parseInt(keyValue) > 3) {
|
|
7445
|
-
this.dateTimeInputDate = new Date(this.dateTimeInputDate.setDate(parseInt(keyValue)));
|
|
7446
|
-
this.selectionInput = 2;
|
|
7447
|
-
this.selectSpanByTabIndex(2, true);
|
|
7448
|
-
}
|
|
7449
|
-
else {
|
|
7450
|
-
this.selectSpanByTabIndex(1);
|
|
7451
|
-
}
|
|
7452
|
-
this.markAsTouched();
|
|
7453
|
-
}
|
|
7454
|
-
}
|
|
7455
|
-
}
|
|
7456
|
-
else {
|
|
7457
|
-
if (isRestart) {
|
|
7458
|
-
this.span3.nativeElement.innerHTML = 'yy';
|
|
7459
|
-
this.selectionInput = 1;
|
|
7460
|
-
this.selectSpanByTabIndex(1, true);
|
|
7461
|
-
}
|
|
7462
|
-
else {
|
|
7463
|
-
const currentValue = this.span3.nativeElement.innerHTML;
|
|
7464
|
-
const isPlaceholder = currentValue === 'yy';
|
|
7465
|
-
const hasOneDigit = !isPlaceholder &&
|
|
7466
|
-
currentValue.length === 2 &&
|
|
7467
|
-
currentValue[1] === 'y';
|
|
7468
|
-
if (isPlaceholder) {
|
|
7469
|
-
// First digit: show as "Xy"
|
|
7470
|
-
const keyValue = e.key;
|
|
7471
|
-
this.span3.nativeElement.innerHTML = keyValue + 'y';
|
|
7472
|
-
this.selectSpanByTabIndex(2);
|
|
7473
|
-
}
|
|
7474
|
-
else if (hasOneDigit) {
|
|
7475
|
-
// Second digit: combine with first digit
|
|
7476
|
-
const firstDigit = currentValue[0];
|
|
7477
|
-
const finalYear = parseInt(firstDigit + e.key);
|
|
7478
|
-
const finalShowYear = finalYear > 31
|
|
7479
|
-
? parseInt(`19${finalYear}`)
|
|
7480
|
-
: parseInt(`20${finalYear}`);
|
|
7481
|
-
this.dateTimeInputDate = new Date(this.dateTimeInputDate.setFullYear(finalShowYear));
|
|
7482
|
-
this.span3.nativeElement.innerHTML = ('0' + finalYear).slice(-2);
|
|
7483
|
-
this.selectSpanByTabIndex(2);
|
|
7484
|
-
this.markAsTouched();
|
|
7485
|
-
this.justEnteredDatePicker = true;
|
|
7486
|
-
this.blurOnDateTime();
|
|
7487
|
-
}
|
|
7488
|
-
else {
|
|
7489
|
-
// Complete value exists, restart
|
|
7490
|
-
const keyValue = e.key;
|
|
7491
|
-
this.span3.nativeElement.innerHTML = keyValue + 'y';
|
|
7492
|
-
this.selectSpanByTabIndex(2);
|
|
7493
|
-
}
|
|
7494
|
-
}
|
|
7125
|
+
if (isBackwardContentDelete) {
|
|
7126
|
+
const currentPart = nextValueParts[effectiveHighlightedPart];
|
|
7127
|
+
const enteredLength = this.getTimePartEnteredLength(currentPart, effectiveHighlightedPart);
|
|
7128
|
+
if (enteredLength > 0) {
|
|
7129
|
+
const nextInput = currentPart.slice(0, enteredLength - 1);
|
|
7130
|
+
nextValueParts[effectiveHighlightedPart] = this.buildTimePartFromInput(nextInput, effectiveHighlightedPart);
|
|
7131
|
+
return {
|
|
7132
|
+
nextValue: this.normalizeEmptyTimeValue(nextValueParts),
|
|
7133
|
+
// Keep focus on current part when deleting its final character.
|
|
7134
|
+
// A second backspace (while empty) then moves focus backward.
|
|
7135
|
+
nextHighlightedPart: effectiveHighlightedPart,
|
|
7136
|
+
};
|
|
7495
7137
|
}
|
|
7138
|
+
return {
|
|
7139
|
+
nextValue: this.normalizeEmptyTimeValue(nextValueParts),
|
|
7140
|
+
nextHighlightedPart: effectiveHighlightedPart > 0
|
|
7141
|
+
? (effectiveHighlightedPart - 1)
|
|
7142
|
+
: 0,
|
|
7143
|
+
};
|
|
7496
7144
|
}
|
|
7497
|
-
|
|
7498
|
-
|
|
7499
|
-
|
|
7500
|
-
|
|
7501
|
-
|
|
7502
|
-
|
|
7503
|
-
|
|
7504
|
-
|
|
7505
|
-
this.selectSpanByTabIndex(0);
|
|
7506
|
-
}
|
|
7507
|
-
else {
|
|
7508
|
-
const currentValue = this.span1.nativeElement.innerHTML;
|
|
7509
|
-
const isPlaceholder = currentValue === 'HH';
|
|
7510
|
-
const hasOneDigit = !isPlaceholder &&
|
|
7511
|
-
currentValue.length === 2 &&
|
|
7512
|
-
currentValue[1] === 'H';
|
|
7513
|
-
if (isPlaceholder) {
|
|
7514
|
-
// First digit: show as "XH"
|
|
7515
|
-
const keyValue = e.key;
|
|
7516
|
-
if (keyValue >= '0' && keyValue <= '9') {
|
|
7517
|
-
this.span1.nativeElement.innerHTML = keyValue + 'H';
|
|
7518
|
-
if (parseInt(`1${keyValue}`) > 12) {
|
|
7519
|
-
this.selectionInput = 1;
|
|
7520
|
-
this.selectSpanByTabIndex(1, true);
|
|
7521
|
-
}
|
|
7522
|
-
else {
|
|
7523
|
-
this.selectionInput = 0;
|
|
7524
|
-
this.selectSpanByTabIndex(0);
|
|
7525
|
-
}
|
|
7526
|
-
this.markAsTouched();
|
|
7527
|
-
}
|
|
7528
|
-
}
|
|
7529
|
-
else if (hasOneDigit) {
|
|
7530
|
-
// Second digit: combine with first digit
|
|
7531
|
-
const firstDigit = currentValue[0];
|
|
7532
|
-
const final_value = parseInt(firstDigit + e.key);
|
|
7533
|
-
if (final_value > 12 || final_value === 0) {
|
|
7534
|
-
this.span1.nativeElement.innerHTML = e.key + 'H';
|
|
7535
|
-
this.selectionInput = 1;
|
|
7536
|
-
this.selectSpanByTabIndex(1, true);
|
|
7537
|
-
}
|
|
7538
|
-
else {
|
|
7539
|
-
const currentHour = this.dateTimeInputDate.getHours();
|
|
7540
|
-
const isPM = currentHour >= 12;
|
|
7541
|
-
const newHour = isPM ? final_value + 12 : final_value;
|
|
7542
|
-
this.dateTimeInputDate = new Date(this.dateTimeInputDate.setHours(newHour));
|
|
7543
|
-
this.span1.nativeElement.innerHTML = ('0' + final_value).slice(-2);
|
|
7544
|
-
this.selectionInput = 1;
|
|
7545
|
-
this.selectSpanByTabIndex(1, true);
|
|
7546
|
-
this.markAsTouched();
|
|
7547
|
-
}
|
|
7548
|
-
}
|
|
7549
|
-
else {
|
|
7550
|
-
// Complete value exists, restart
|
|
7551
|
-
const keyValue = e.key;
|
|
7552
|
-
this.span1.nativeElement.innerHTML = keyValue + 'H';
|
|
7553
|
-
if (parseInt(`1${keyValue}`) > 12) {
|
|
7554
|
-
this.selectionInput = 1;
|
|
7555
|
-
this.selectSpanByTabIndex(1, true);
|
|
7556
|
-
}
|
|
7557
|
-
else {
|
|
7558
|
-
this.selectionInput = 0;
|
|
7559
|
-
this.selectSpanByTabIndex(0);
|
|
7560
|
-
}
|
|
7561
|
-
this.markAsTouched();
|
|
7562
|
-
}
|
|
7563
|
-
}
|
|
7564
|
-
}
|
|
7565
|
-
else if (this.selectionInput === 1) {
|
|
7566
|
-
// Minutes input
|
|
7567
|
-
if (isRestart) {
|
|
7568
|
-
this.span2.nativeElement.innerHTML = 'MM';
|
|
7569
|
-
this.selectionInput = 0;
|
|
7570
|
-
this.selectSpanByTabIndex(0, true);
|
|
7571
|
-
}
|
|
7572
|
-
else {
|
|
7573
|
-
const currentValue = this.span2.nativeElement.innerHTML;
|
|
7574
|
-
const isPlaceholder = currentValue === 'MM';
|
|
7575
|
-
const hasOneDigit = !isPlaceholder &&
|
|
7576
|
-
currentValue.length === 2 &&
|
|
7577
|
-
currentValue[1] === 'M';
|
|
7578
|
-
if (isPlaceholder) {
|
|
7579
|
-
// First digit: show as "XM"
|
|
7580
|
-
const keyValue = e.key;
|
|
7581
|
-
if (keyValue >= '0' && keyValue <= '9') {
|
|
7582
|
-
this.span2.nativeElement.innerHTML = keyValue + 'M';
|
|
7583
|
-
if (parseInt(keyValue) > 5) {
|
|
7584
|
-
this.selectionInput = 2;
|
|
7585
|
-
this.selectSpanByTabIndex(2, true);
|
|
7586
|
-
}
|
|
7587
|
-
else {
|
|
7588
|
-
this.selectSpanByTabIndex(1);
|
|
7589
|
-
}
|
|
7590
|
-
this.markAsTouched();
|
|
7591
|
-
}
|
|
7592
|
-
}
|
|
7593
|
-
else if (hasOneDigit) {
|
|
7594
|
-
// Second digit: combine with first digit
|
|
7595
|
-
const firstDigit = currentValue[0];
|
|
7596
|
-
const final_value = parseInt(firstDigit + e.key);
|
|
7597
|
-
if (final_value > 59) {
|
|
7598
|
-
this.span2.nativeElement.innerHTML = e.key + 'M';
|
|
7599
|
-
this.selectionInput = 2;
|
|
7600
|
-
this.selectSpanByTabIndex(2, true);
|
|
7601
|
-
}
|
|
7602
|
-
else {
|
|
7603
|
-
this.dateTimeInputDate = new Date(this.dateTimeInputDate.setMinutes(final_value));
|
|
7604
|
-
this.span2.nativeElement.innerHTML = ('0' + final_value).slice(-2);
|
|
7605
|
-
this.selectionInput = 2;
|
|
7606
|
-
this.selectSpanByTabIndex(2, true);
|
|
7607
|
-
this.markAsTouched();
|
|
7608
|
-
}
|
|
7609
|
-
}
|
|
7610
|
-
else {
|
|
7611
|
-
// Complete value exists, restart
|
|
7612
|
-
const keyValue = e.key;
|
|
7613
|
-
this.span2.nativeElement.innerHTML = keyValue + 'M';
|
|
7614
|
-
if (parseInt(keyValue) > 5) {
|
|
7615
|
-
this.selectionInput = 2;
|
|
7616
|
-
this.selectSpanByTabIndex(2, true);
|
|
7617
|
-
}
|
|
7618
|
-
else {
|
|
7619
|
-
this.selectSpanByTabIndex(1);
|
|
7620
|
-
}
|
|
7621
|
-
this.markAsTouched();
|
|
7622
|
-
}
|
|
7623
|
-
}
|
|
7624
|
-
}
|
|
7625
|
-
else if (this.selectionInput === 2) {
|
|
7626
|
-
// AM/PM input
|
|
7627
|
-
if (isRestart) {
|
|
7628
|
-
this.span3.nativeElement.innerHTML = 'AM';
|
|
7629
|
-
this.selectionInput = 0;
|
|
7630
|
-
this.selectSpanByTabIndex(0, true);
|
|
7631
|
-
}
|
|
7632
|
-
else {
|
|
7633
|
-
const currentHour = this.dateTimeInputDate.getHours();
|
|
7634
|
-
const isPM = e.key.toLowerCase() === 'p';
|
|
7635
|
-
if (isPM && currentHour < 12) {
|
|
7636
|
-
this.dateTimeInputDate = new Date(this.dateTimeInputDate.setHours(currentHour + 12));
|
|
7637
|
-
this.span3.nativeElement.innerHTML = 'PM';
|
|
7638
|
-
}
|
|
7639
|
-
else if (!isPM && currentHour >= 12) {
|
|
7640
|
-
this.dateTimeInputDate = new Date(this.dateTimeInputDate.setHours(currentHour - 12));
|
|
7641
|
-
this.span3.nativeElement.innerHTML = 'AM';
|
|
7642
|
-
}
|
|
7643
|
-
this.selectionInput = 0;
|
|
7644
|
-
this.selectSpanByTabIndex(0, true);
|
|
7645
|
-
this.markAsTouched();
|
|
7646
|
-
this.justEnteredDatePicker = true;
|
|
7647
|
-
this.blurOnDateTime();
|
|
7648
|
-
}
|
|
7145
|
+
if (effectiveHighlightedPart === 2) {
|
|
7146
|
+
const uppercaseCharacter = insertedCharacter.toUpperCase();
|
|
7147
|
+
if (uppercaseCharacter === 'A' || uppercaseCharacter === 'P') {
|
|
7148
|
+
nextValueParts[2] = uppercaseCharacter === 'A' ? 'AM' : 'PM';
|
|
7149
|
+
return {
|
|
7150
|
+
nextValue: this.normalizeEmptyTimeValue(nextValueParts),
|
|
7151
|
+
nextHighlightedPart: null,
|
|
7152
|
+
};
|
|
7649
7153
|
}
|
|
7154
|
+
return {
|
|
7155
|
+
nextValue: currentValue,
|
|
7156
|
+
nextHighlightedPart: effectiveHighlightedPart,
|
|
7157
|
+
};
|
|
7650
7158
|
}
|
|
7651
|
-
|
|
7652
|
-
|
|
7653
|
-
|
|
7654
|
-
|
|
7655
|
-
|
|
7656
|
-
|
|
7657
|
-
|
|
7658
|
-
|
|
7659
|
-
|
|
7660
|
-
|
|
7661
|
-
|
|
7662
|
-
|
|
7663
|
-
|
|
7664
|
-
|
|
7665
|
-
|
|
7666
|
-
|
|
7667
|
-
|
|
7668
|
-
|
|
7669
|
-
|
|
7670
|
-
|
|
7671
|
-
|
|
7672
|
-
|
|
7673
|
-
|
|
7674
|
-
|
|
7675
|
-
|
|
7676
|
-
|
|
7677
|
-
|
|
7678
|
-
|
|
7679
|
-
|
|
7680
|
-
|
|
7681
|
-
|
|
7682
|
-
|
|
7683
|
-
|
|
7684
|
-
|
|
7685
|
-
|
|
7686
|
-
|
|
7687
|
-
|
|
7688
|
-
|
|
7689
|
-
|
|
7690
|
-
|
|
7691
|
-
|
|
7692
|
-
|
|
7693
|
-
|
|
7694
|
-
|
|
7695
|
-
|
|
7696
|
-
|
|
7697
|
-
|
|
7698
|
-
|
|
7699
|
-
|
|
7700
|
-
|
|
7701
|
-
|
|
7702
|
-
|
|
7703
|
-
|
|
7704
|
-
|
|
7705
|
-
const keyValue = e.key;
|
|
7706
|
-
this.span1.nativeElement.innerHTML = keyValue + 'm';
|
|
7707
|
-
if (parseInt(keyValue) > 1) {
|
|
7708
|
-
this.dateTimeInputDate = new Date(this.dateTimeInputDate.setMonth(parseInt(keyValue) - 1));
|
|
7709
|
-
this.selectionInput = 1;
|
|
7710
|
-
this.selectSpanByTabIndex(1, true);
|
|
7711
|
-
}
|
|
7712
|
-
else {
|
|
7713
|
-
this.selectSpanByTabIndex(0);
|
|
7714
|
-
}
|
|
7715
|
-
}
|
|
7716
|
-
}
|
|
7717
|
-
}
|
|
7718
|
-
else {
|
|
7719
|
-
if (isRestart) {
|
|
7720
|
-
this.span2.nativeElement.innerHTML = 'yy';
|
|
7721
|
-
this.selectionInput = 2;
|
|
7722
|
-
this.selectSpanByTabIndex(2, true);
|
|
7723
|
-
}
|
|
7724
|
-
else {
|
|
7725
|
-
const currentValue = this.span2.nativeElement.innerHTML;
|
|
7726
|
-
const isPlaceholder = currentValue === 'yy';
|
|
7727
|
-
const hasOneDigit = !isPlaceholder &&
|
|
7728
|
-
currentValue.length === 2 &&
|
|
7729
|
-
currentValue[1] === 'y';
|
|
7730
|
-
if (isPlaceholder) {
|
|
7731
|
-
// First digit: show as "Xy"
|
|
7732
|
-
const keyValue = e.key;
|
|
7733
|
-
this.span2.nativeElement.innerHTML = keyValue + 'y';
|
|
7734
|
-
this.selectSpanByTabIndex(1);
|
|
7735
|
-
}
|
|
7736
|
-
else if (hasOneDigit) {
|
|
7737
|
-
// Second digit: combine with first digit
|
|
7738
|
-
const firstDigit = currentValue[0];
|
|
7739
|
-
const finalYear = parseInt(firstDigit + e.key);
|
|
7740
|
-
const finalShowYear = finalYear > 31
|
|
7741
|
-
? parseInt(`19${finalYear}`)
|
|
7742
|
-
: parseInt(`20${finalYear}`);
|
|
7743
|
-
this.dateTimeInputDate = new Date(this.dateTimeInputDate.setFullYear(finalShowYear));
|
|
7744
|
-
this.span2.nativeElement.innerHTML = ('0' + finalYear).slice(-2);
|
|
7745
|
-
this.selectSpanByTabIndex(1);
|
|
7746
|
-
// Validate and update immediately when last field (YY) is completed
|
|
7747
|
-
this.justEnteredDatePicker = true;
|
|
7748
|
-
this.blurOnDateTime();
|
|
7749
|
-
}
|
|
7750
|
-
else {
|
|
7751
|
-
// Complete value exists, restart
|
|
7752
|
-
const keyValue = e.key;
|
|
7753
|
-
this.span2.nativeElement.innerHTML = keyValue + 'y';
|
|
7754
|
-
this.selectSpanByTabIndex(1);
|
|
7755
|
-
}
|
|
7756
|
-
}
|
|
7757
|
-
}
|
|
7159
|
+
return this.handleTimeDigitInput(currentValue, nextValueParts, effectiveHighlightedPart, insertedCharacter);
|
|
7160
|
+
}
|
|
7161
|
+
}
|
|
7162
|
+
|
|
7163
|
+
class InputDatetimeFormatHelper {
|
|
7164
|
+
static MIN_VALID_YEAR = 1900;
|
|
7165
|
+
static isDateControlValueValid(value) {
|
|
7166
|
+
const parsedDate = this.toDate(value, true);
|
|
7167
|
+
return !!parsedDate && parsedDate.getFullYear() >= this.MIN_VALID_YEAR;
|
|
7168
|
+
}
|
|
7169
|
+
static isTimeControlValueValid(value) {
|
|
7170
|
+
if (typeof value !== 'string') {
|
|
7171
|
+
return false;
|
|
7172
|
+
}
|
|
7173
|
+
return this.parseTimeControlValue(value) !== null;
|
|
7174
|
+
}
|
|
7175
|
+
static parseDateControlValue(value) {
|
|
7176
|
+
const dateFormats = [
|
|
7177
|
+
'MM/DD/YY',
|
|
7178
|
+
'M/D/YY',
|
|
7179
|
+
'MM/DD/YYYY',
|
|
7180
|
+
'M/D/YYYY',
|
|
7181
|
+
'YYYY-MM-DD',
|
|
7182
|
+
];
|
|
7183
|
+
const canonicalDate = value.trim().split('T')[0];
|
|
7184
|
+
const parsedDate = moment(canonicalDate, dateFormats, true);
|
|
7185
|
+
if (parsedDate.isValid() && parsedDate.year() >= this.MIN_VALID_YEAR) {
|
|
7186
|
+
return this.buildLocalDate(parsedDate);
|
|
7187
|
+
}
|
|
7188
|
+
const fallback = moment(value, moment.ISO_8601, true);
|
|
7189
|
+
return fallback.isValid() && fallback.year() >= this.MIN_VALID_YEAR
|
|
7190
|
+
? this.buildLocalDate(fallback)
|
|
7191
|
+
: null;
|
|
7192
|
+
}
|
|
7193
|
+
static parseTimeControlValue(value) {
|
|
7194
|
+
const parsedTime = moment(value.trim(), ['HH:mm', 'H:mm', 'hh:mm A', 'h:mm A', 'HH:mm A'], true);
|
|
7195
|
+
if (!parsedTime.isValid())
|
|
7196
|
+
return null;
|
|
7197
|
+
const now = new Date();
|
|
7198
|
+
return new Date(now.getFullYear(), now.getMonth(), now.getDate(), parsedTime.hour(), parsedTime.minute(), 0, 0);
|
|
7199
|
+
}
|
|
7200
|
+
static buildLocalDate(value) {
|
|
7201
|
+
// setFullYear avoids JS Date's 1900 offset for years 00-99.
|
|
7202
|
+
const normalizedDate = new Date(0);
|
|
7203
|
+
normalizedDate.setFullYear(value.year(), value.month(), value.date());
|
|
7204
|
+
normalizedDate.setHours(12, 0, 0, 0);
|
|
7205
|
+
return normalizedDate;
|
|
7206
|
+
}
|
|
7207
|
+
static handleInput(currentValue, event, highlightedPart, isDatePicker) {
|
|
7208
|
+
if (isDatePicker) {
|
|
7209
|
+
return InputDatetimeDateInputHelper.handleDateInput(currentValue, event, highlightedPart);
|
|
7210
|
+
}
|
|
7211
|
+
else {
|
|
7212
|
+
return InputDatetimeTimeInputHelper.handleTimeInput(currentValue, event, highlightedPart);
|
|
7758
7213
|
}
|
|
7759
7214
|
}
|
|
7760
|
-
|
|
7761
|
-
|
|
7762
|
-
|
|
7763
|
-
|
|
7764
|
-
|
|
7765
|
-
|
|
7766
|
-
|
|
7767
|
-
|
|
7768
|
-
|
|
7769
|
-
|
|
7770
|
-
|
|
7771
|
-
|
|
7772
|
-
this.
|
|
7215
|
+
static toDate(value, isDatePicker) {
|
|
7216
|
+
if (value instanceof Date && !Number.isNaN(value.getTime())) {
|
|
7217
|
+
return value;
|
|
7218
|
+
}
|
|
7219
|
+
if (typeof value === 'number') {
|
|
7220
|
+
const parsedDate = new Date(value);
|
|
7221
|
+
if (!Number.isNaN(parsedDate.getTime()))
|
|
7222
|
+
return parsedDate;
|
|
7223
|
+
}
|
|
7224
|
+
if (typeof value === 'string') {
|
|
7225
|
+
const parsedDate = isDatePicker
|
|
7226
|
+
? this.parseDateControlValue(value)
|
|
7227
|
+
: this.parseTimeControlValue(value);
|
|
7228
|
+
if (parsedDate)
|
|
7229
|
+
return parsedDate;
|
|
7230
|
+
}
|
|
7231
|
+
return null;
|
|
7232
|
+
}
|
|
7233
|
+
static isControlValueValid(value, isDatePicker) {
|
|
7234
|
+
if (value === null || value === undefined || value === '') {
|
|
7235
|
+
return true;
|
|
7236
|
+
}
|
|
7237
|
+
return isDatePicker
|
|
7238
|
+
? this.isDateControlValueValid(value)
|
|
7239
|
+
: this.isTimeControlValueValid(value);
|
|
7240
|
+
}
|
|
7241
|
+
static toControlValue(date, isDatePicker) {
|
|
7242
|
+
return isDatePicker
|
|
7243
|
+
? moment(date).format('MM/DD/YY')
|
|
7244
|
+
: moment(date).format('hh:mm A');
|
|
7245
|
+
}
|
|
7246
|
+
static toFormValue(date, isDatePicker) {
|
|
7247
|
+
return isDatePicker
|
|
7248
|
+
? moment(date).format('MM/DD/YY')
|
|
7249
|
+
: moment(date).format('HH:mm');
|
|
7250
|
+
}
|
|
7251
|
+
static toCurrentValue(value, isDatePicker) {
|
|
7252
|
+
const dateValue = this.toDate(value, isDatePicker);
|
|
7253
|
+
if (!dateValue)
|
|
7254
|
+
return null;
|
|
7255
|
+
return this.toControlValue(dateValue, isDatePicker);
|
|
7256
|
+
}
|
|
7257
|
+
static getDisplayedValues(value, isDatePicker) {
|
|
7258
|
+
let displayedValues = {
|
|
7259
|
+
month: 'MM',
|
|
7260
|
+
day: 'DD',
|
|
7261
|
+
year: 'YY',
|
|
7262
|
+
minute: 'MM',
|
|
7263
|
+
hour: 'HH',
|
|
7264
|
+
ampm: 'AM',
|
|
7265
|
+
};
|
|
7266
|
+
if (!value)
|
|
7267
|
+
return displayedValues;
|
|
7268
|
+
if (isDatePicker) {
|
|
7269
|
+
displayedValues.month = value?.slice(0, 2) ?? 'MM';
|
|
7270
|
+
displayedValues.day = value?.slice(3, 5) ?? 'DD';
|
|
7271
|
+
displayedValues.year = value?.slice(6, 8) ?? 'YY';
|
|
7272
|
+
}
|
|
7273
|
+
else {
|
|
7274
|
+
displayedValues.hour = value?.slice(0, 2) ?? 'HH';
|
|
7275
|
+
displayedValues.minute = value?.slice(3, 5) ?? 'MM';
|
|
7276
|
+
displayedValues.ampm = value?.slice(6, 8) ?? 'AM';
|
|
7773
7277
|
}
|
|
7774
|
-
|
|
7775
|
-
this.holder1.nativeElement.focus();
|
|
7776
|
-
if (changeTab)
|
|
7777
|
-
this.newInputChanged = true;
|
|
7278
|
+
return displayedValues;
|
|
7778
7279
|
}
|
|
7779
|
-
|
|
7780
|
-
|
|
7781
|
-
|
|
7782
|
-
|
|
7783
|
-
|
|
7784
|
-
|
|
7785
|
-
|
|
7786
|
-
|
|
7787
|
-
|
|
7788
|
-
|
|
7789
|
-
|
|
7790
|
-
|
|
7791
|
-
|
|
7792
|
-
|
|
7793
|
-
|
|
7794
|
-
|
|
7795
|
-
|
|
7796
|
-
|
|
7797
|
-
|
|
7280
|
+
}
|
|
7281
|
+
|
|
7282
|
+
class InputDatetimePasteHelper {
|
|
7283
|
+
static MIN_VALID_YEAR = 1900;
|
|
7284
|
+
static buildLocalDate(value) {
|
|
7285
|
+
const normalizedDate = new Date(0);
|
|
7286
|
+
normalizedDate.setFullYear(value.year(), value.month(), value.date());
|
|
7287
|
+
normalizedDate.setHours(12, 0, 0, 0);
|
|
7288
|
+
return normalizedDate;
|
|
7289
|
+
}
|
|
7290
|
+
static parseDateInput(rawValue) {
|
|
7291
|
+
const normalizedValue = rawValue.trim();
|
|
7292
|
+
if (!normalizedValue)
|
|
7293
|
+
return null;
|
|
7294
|
+
const compactDigits = normalizedValue.replace(/\D/g, '');
|
|
7295
|
+
const dateFormats = [
|
|
7296
|
+
'MM/DD/YYYY',
|
|
7297
|
+
'M/D/YYYY',
|
|
7298
|
+
'MM-DD-YYYY',
|
|
7299
|
+
'M-D-YYYY',
|
|
7300
|
+
'MM.DD.YYYY',
|
|
7301
|
+
'M.D.YYYY',
|
|
7302
|
+
'YYYY-MM-DD',
|
|
7303
|
+
'YYYY/M/D',
|
|
7304
|
+
'YYYY.MM.DD',
|
|
7305
|
+
'MM/DD/YY',
|
|
7306
|
+
'M/D/YY',
|
|
7307
|
+
'YYYYMMDD',
|
|
7308
|
+
'MMDDYYYY',
|
|
7309
|
+
];
|
|
7310
|
+
const candidates = [];
|
|
7311
|
+
candidates.push(moment(normalizedValue, dateFormats, true));
|
|
7312
|
+
if (/^\d{8}$/.test(compactDigits)) {
|
|
7313
|
+
candidates.push(moment(compactDigits, 'YYYYMMDD', true));
|
|
7314
|
+
candidates.push(moment(compactDigits, 'MMDDYYYY', true));
|
|
7315
|
+
}
|
|
7316
|
+
candidates.push(moment(normalizedValue, moment.ISO_8601, true));
|
|
7317
|
+
const validCandidate = candidates.find((candidate) => candidate.isValid() && candidate.year() >= this.MIN_VALID_YEAR);
|
|
7318
|
+
return validCandidate ? this.buildLocalDate(validCandidate) : null;
|
|
7319
|
+
}
|
|
7320
|
+
static parseTimeInput(rawValue) {
|
|
7321
|
+
const normalizedValue = rawValue.trim().replace(/\./g, ':').toUpperCase();
|
|
7322
|
+
if (!normalizedValue)
|
|
7323
|
+
return null;
|
|
7324
|
+
const compactDigits = normalizedValue.replace(/\D/g, '');
|
|
7325
|
+
const timeFormats = [
|
|
7326
|
+
'HH:mm',
|
|
7327
|
+
'H:mm',
|
|
7328
|
+
'HHmm',
|
|
7329
|
+
'Hmm',
|
|
7330
|
+
'hh:mm A',
|
|
7331
|
+
'h:mm A',
|
|
7332
|
+
'hh:mmA',
|
|
7333
|
+
'h:mmA',
|
|
7334
|
+
'h A',
|
|
7335
|
+
'ha',
|
|
7336
|
+
'hA',
|
|
7337
|
+
];
|
|
7338
|
+
const candidates = [];
|
|
7339
|
+
candidates.push(moment(normalizedValue, timeFormats, true));
|
|
7340
|
+
if (/^\d{3,4}$/.test(compactDigits)) {
|
|
7341
|
+
candidates.push(moment(compactDigits, 'Hmm', true));
|
|
7342
|
+
candidates.push(moment(compactDigits, 'HHmm', true));
|
|
7343
|
+
}
|
|
7344
|
+
const validCandidate = candidates.find((candidate) => candidate.isValid());
|
|
7345
|
+
if (!validCandidate)
|
|
7346
|
+
return null;
|
|
7347
|
+
const now = new Date();
|
|
7348
|
+
return new Date(now.getFullYear(), now.getMonth(), now.getDate(), validCandidate.hour(), validCandidate.minute(), 0, 0);
|
|
7349
|
+
}
|
|
7350
|
+
static parsePastedValue(rawValue, isDatePicker) {
|
|
7351
|
+
return isDatePicker
|
|
7352
|
+
? this.parseDateInput(rawValue)
|
|
7353
|
+
: this.parseTimeInput(rawValue);
|
|
7354
|
+
}
|
|
7355
|
+
}
|
|
7356
|
+
|
|
7357
|
+
class CaiInputDatetimePickerComponent {
|
|
7358
|
+
inputListener;
|
|
7359
|
+
mainPopover;
|
|
7360
|
+
clearButtonTooltip;
|
|
7361
|
+
iconContainer;
|
|
7362
|
+
dropdownIcon;
|
|
7363
|
+
destroyRef = inject(DestroyRef);
|
|
7364
|
+
injector = inject(Injector);
|
|
7365
|
+
calendarService = inject(CalendarDateTimePickerService);
|
|
7366
|
+
onValidatorChange = () => { };
|
|
7367
|
+
superControl = null;
|
|
7368
|
+
id = '';
|
|
7369
|
+
inputConfig;
|
|
7370
|
+
forceInvalidStyling = false;
|
|
7371
|
+
clearInputEvent = new EventEmitter();
|
|
7372
|
+
blurInputEvent = new EventEmitter();
|
|
7373
|
+
onFocusEmitter = new EventEmitter();
|
|
7374
|
+
isDisabled = computed(() => this.inputConfig.isDisabled || this.getSuperControl?.disabled, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
|
|
7375
|
+
isDatePicker = computed(() => this.inputConfig?.name === InputConfigNameStringEnum.DATE_PICKER ||
|
|
7376
|
+
this.inputConfig?.name ===
|
|
7377
|
+
InputConfigNameStringEnum.DATE_PICKER_BANK_CARD, ...(ngDevMode ? [{ debugName: "isDatePicker" }] : []));
|
|
7378
|
+
isInputFocused = signal(false, ...(ngDevMode ? [{ debugName: "isInputFocused" }] : []));
|
|
7379
|
+
highlightedPart = signal(null, ...(ngDevMode ? [{ debugName: "highlightedPart" }] : []));
|
|
7380
|
+
dateTime = signal(new Date(), ...(ngDevMode ? [{ debugName: "dateTime" }] : []));
|
|
7381
|
+
currentValue = signal(null, ...(ngDevMode ? [{ debugName: "currentValue" }] : []));
|
|
7382
|
+
isFocusedThroughPopoverToggle = signal(false, ...(ngDevMode ? [{ debugName: "isFocusedThroughPopoverToggle" }] : []));
|
|
7383
|
+
isInputSelected = signal(false, ...(ngDevMode ? [{ debugName: "isInputSelected" }] : []));
|
|
7384
|
+
displayedValues = computed(() => {
|
|
7385
|
+
return (InputDatetimeFormatHelper.getDisplayedValues(this.currentValue(), this.isDatePicker()) ?? []);
|
|
7386
|
+
}, ...(ngDevMode ? [{ debugName: "displayedValues" }] : []));
|
|
7387
|
+
hasDate = computed(() => {
|
|
7388
|
+
const currentValue = this.currentValue();
|
|
7389
|
+
if (!currentValue)
|
|
7390
|
+
return false;
|
|
7391
|
+
return this.isDatePicker()
|
|
7392
|
+
? /^\d{2}\/\d{2}\/\d{2}$/.test(currentValue)
|
|
7393
|
+
: /^\d{2}:\d{2}\s(?:AM|PM)$/.test(currentValue);
|
|
7394
|
+
}, ...(ngDevMode ? [{ debugName: "hasDate" }] : []));
|
|
7395
|
+
get getSuperControl() {
|
|
7396
|
+
return this.superControl?.control ?? null;
|
|
7397
|
+
}
|
|
7398
|
+
get isRequired() {
|
|
7399
|
+
return this.getSuperControl?.hasValidator(Validators.required);
|
|
7400
|
+
}
|
|
7401
|
+
constructor() {
|
|
7402
|
+
this.initializeDateChangedListener();
|
|
7403
|
+
}
|
|
7404
|
+
ngOnInit() {
|
|
7405
|
+
this.superControl = this.injector.get(NgControl, null);
|
|
7406
|
+
if (this.superControl) {
|
|
7407
|
+
this.superControl.valueAccessor = this;
|
|
7798
7408
|
}
|
|
7799
7409
|
}
|
|
7800
|
-
|
|
7801
|
-
|
|
7802
|
-
|
|
7803
|
-
|
|
7804
|
-
|
|
7805
|
-
|
|
7806
|
-
|
|
7807
|
-
}
|
|
7808
|
-
|
|
7809
|
-
|
|
7810
|
-
|
|
7811
|
-
|
|
7812
|
-
|
|
7813
|
-
|
|
7814
|
-
|
|
7815
|
-
|
|
7816
|
-
|
|
7817
|
-
|
|
7410
|
+
registerDateChange(date) {
|
|
7411
|
+
this.dateTime.set(date);
|
|
7412
|
+
const isDatePicker = this.isDatePicker();
|
|
7413
|
+
const nextCurrentValue = InputDatetimeFormatHelper.toControlValue(date, isDatePicker);
|
|
7414
|
+
this.currentValue.set(nextCurrentValue);
|
|
7415
|
+
this.onChange(InputDatetimeFormatHelper.toFormValue(date, isDatePicker));
|
|
7416
|
+
this.onValidatorChange();
|
|
7417
|
+
}
|
|
7418
|
+
initializeDateChangedListener() {
|
|
7419
|
+
// Date-picker changes (day/month/year selection) come from calendarService.dateChanged.
|
|
7420
|
+
effect(() => {
|
|
7421
|
+
this.calendarService.dateChanged
|
|
7422
|
+
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
7423
|
+
.subscribe((date) => {
|
|
7424
|
+
const dateTime = date && this.toDate(date);
|
|
7425
|
+
if (dateTime) {
|
|
7426
|
+
this.registerDateChange(dateTime);
|
|
7427
|
+
}
|
|
7428
|
+
this.inputListener?.nativeElement?.blur();
|
|
7429
|
+
});
|
|
7430
|
+
});
|
|
7431
|
+
}
|
|
7432
|
+
toDate(value) {
|
|
7433
|
+
return InputDatetimeFormatHelper.toDate(value, this.isDatePicker());
|
|
7818
7434
|
}
|
|
7819
|
-
|
|
7820
|
-
|
|
7821
|
-
|
|
7822
|
-
|
|
7823
|
-
|
|
7824
|
-
if (this.
|
|
7825
|
-
this.
|
|
7826
|
-
|
|
7435
|
+
moveHighlightedPartRight() {
|
|
7436
|
+
if (this.highlightedPart() === null) {
|
|
7437
|
+
this.highlightedPart.set(0);
|
|
7438
|
+
return;
|
|
7439
|
+
}
|
|
7440
|
+
if (this.highlightedPart() === 2) {
|
|
7441
|
+
this.highlightedPart.set(0);
|
|
7442
|
+
return;
|
|
7827
7443
|
}
|
|
7444
|
+
this.highlightedPart.set((this.highlightedPart() ?? 0) + 1);
|
|
7828
7445
|
}
|
|
7829
|
-
|
|
7830
|
-
if (this.
|
|
7446
|
+
moveHighlightedPartLeft() {
|
|
7447
|
+
if (this.highlightedPart() === null) {
|
|
7448
|
+
this.highlightedPart.set(0);
|
|
7831
7449
|
return;
|
|
7832
|
-
|
|
7833
|
-
|
|
7834
|
-
|
|
7835
|
-
? this.span2
|
|
7836
|
-
: this.span3;
|
|
7837
|
-
if (!currentSpan)
|
|
7450
|
+
}
|
|
7451
|
+
if (this.highlightedPart() === 0) {
|
|
7452
|
+
this.highlightedPart.set(2);
|
|
7838
7453
|
return;
|
|
7839
|
-
|
|
7840
|
-
|
|
7841
|
-
const isBankCardPicker = this.inputConfig.name === InputConfigNameStringEnum.DATE_PICKER_BANK_CARD;
|
|
7842
|
-
const isTimePicker = this.inputConfig.name === InputConfigNameStringEnum.TIME_PICKER;
|
|
7843
|
-
// Format month (span1) in date/bank card picker
|
|
7844
|
-
if ((isDatePicker || isBankCardPicker) && this.selectionInput === 0) {
|
|
7845
|
-
if (currentValue.length === 2 && currentValue[1] === 'm') {
|
|
7846
|
-
const digit = currentValue[0];
|
|
7847
|
-
const formatted = ('0' + digit).slice(-2);
|
|
7848
|
-
currentSpan.nativeElement.innerHTML = formatted;
|
|
7849
|
-
this.dateTimeInputDate = new Date(this.dateTimeInputDate.setMonth(parseInt(digit) - 1));
|
|
7850
|
-
}
|
|
7851
|
-
}
|
|
7852
|
-
// Format day (span2) in date picker
|
|
7853
|
-
if (isDatePicker && this.selectionInput === 1) {
|
|
7854
|
-
if (currentValue.length === 2 && currentValue[1] === 'd') {
|
|
7855
|
-
const digit = currentValue[0];
|
|
7856
|
-
const formatted = ('0' + digit).slice(-2);
|
|
7857
|
-
currentSpan.nativeElement.innerHTML = formatted;
|
|
7858
|
-
this.dateTimeInputDate = new Date(this.dateTimeInputDate.setDate(parseInt(digit)));
|
|
7859
|
-
}
|
|
7860
|
-
}
|
|
7861
|
-
// Format year (span2 bank card / span3 date picker)
|
|
7862
|
-
if ((isDatePicker && this.selectionInput === 2) ||
|
|
7863
|
-
(isBankCardPicker && this.selectionInput === 1)) {
|
|
7864
|
-
if (currentValue.length === 2 && currentValue[1] === 'y') {
|
|
7865
|
-
const digit = currentValue[0];
|
|
7866
|
-
const formatted = ('0' + digit).slice(-2);
|
|
7867
|
-
currentSpan.nativeElement.innerHTML = formatted;
|
|
7868
|
-
const fullYear = parseInt(`200${digit}`);
|
|
7869
|
-
this.dateTimeInputDate = new Date(this.dateTimeInputDate.setFullYear(fullYear));
|
|
7870
|
-
}
|
|
7871
|
-
}
|
|
7872
|
-
// Format hours (span1) in time picker
|
|
7873
|
-
if (isTimePicker && this.selectionInput === 0) {
|
|
7874
|
-
if (currentValue.length === 2 && currentValue[1].toLowerCase() === 'h') {
|
|
7875
|
-
const digit = currentValue[0];
|
|
7876
|
-
const formatted = ('0' + digit).slice(-2);
|
|
7877
|
-
currentSpan.nativeElement.innerHTML = formatted;
|
|
7878
|
-
const currentHour = this.dateTimeInputDate.getHours();
|
|
7879
|
-
const isPM = currentHour >= 12;
|
|
7880
|
-
const newHour = isPM ? parseInt(digit) + 12 : parseInt(digit);
|
|
7881
|
-
this.dateTimeInputDate = new Date(this.dateTimeInputDate.setHours(newHour));
|
|
7882
|
-
}
|
|
7883
|
-
}
|
|
7884
|
-
// Format minutes (span2) in time picker
|
|
7885
|
-
if (isTimePicker && this.selectionInput === 1) {
|
|
7886
|
-
if (currentValue.length === 2 && currentValue[1].toLowerCase() === 'm') {
|
|
7887
|
-
const digit = currentValue[0];
|
|
7888
|
-
const formatted = ('0' + digit).slice(-2);
|
|
7889
|
-
currentSpan.nativeElement.innerHTML = formatted;
|
|
7890
|
-
this.dateTimeInputDate = new Date(this.dateTimeInputDate.setMinutes(parseInt(digit)));
|
|
7891
|
-
}
|
|
7892
|
-
}
|
|
7893
|
-
}
|
|
7894
|
-
setIsFocusInput(value) {
|
|
7895
|
-
this.isFocusInput = value;
|
|
7896
|
-
}
|
|
7897
|
-
moveSelectionLeft() {
|
|
7898
|
-
// Format current field before moving
|
|
7899
|
-
this.formatCurrentField();
|
|
7900
|
-
if (this.selectionInput > 0) {
|
|
7901
|
-
this.selectionInput -= 1;
|
|
7902
|
-
this.selectSpanByTabIndex(this.selectionInput, true);
|
|
7903
|
-
}
|
|
7904
|
-
}
|
|
7905
|
-
updateMonth(isUp) {
|
|
7906
|
-
const monthDelta = isUp ? 1 : -1;
|
|
7907
|
-
this.dateTimeInputDate = new Date(this.dateTimeInputDate.setMonth(this.dateTimeInputDate.getMonth() + monthDelta));
|
|
7908
|
-
this.span1.nativeElement.innerHTML = this.padValue(this.dateTimeInputDate.getMonth() + 1);
|
|
7909
|
-
this.setSpanSelection(this.span1.nativeElement);
|
|
7910
|
-
}
|
|
7911
|
-
updateDate(isUp, isDatePicker) {
|
|
7912
|
-
const dateDelta = isUp ? 1 : -1;
|
|
7913
|
-
this.dateTimeInputDate = new Date(this.dateTimeInputDate.setDate(this.dateTimeInputDate.getDate() + dateDelta));
|
|
7914
|
-
const spanElement = isDatePicker
|
|
7915
|
-
? this.span2.nativeElement
|
|
7916
|
-
: this.span1.nativeElement;
|
|
7917
|
-
spanElement.innerHTML = this.padValue(this.dateTimeInputDate.getDate());
|
|
7918
|
-
this.setSpanSelection(spanElement);
|
|
7919
|
-
}
|
|
7920
|
-
updateYear(isUp, isDatePicker) {
|
|
7921
|
-
const yearDelta = isUp ? 1 : -1;
|
|
7922
|
-
this.dateTimeInputDate = new Date(this.dateTimeInputDate.setFullYear(this.dateTimeInputDate.getFullYear() + yearDelta));
|
|
7923
|
-
const spanElement = isDatePicker
|
|
7924
|
-
? this.span3.nativeElement
|
|
7925
|
-
: this.span2.nativeElement;
|
|
7926
|
-
spanElement.innerHTML = this.dateTimeInputDate
|
|
7927
|
-
.getFullYear()
|
|
7928
|
-
.toString()
|
|
7929
|
-
.slice(-2);
|
|
7930
|
-
this.setSpanSelection(spanElement);
|
|
7931
|
-
}
|
|
7932
|
-
padValue(value) {
|
|
7933
|
-
return ('0' + value).slice(-2);
|
|
7934
|
-
}
|
|
7935
|
-
handleTimePickerInput(isUp) {
|
|
7936
|
-
if (this.selectionInput === 0)
|
|
7937
|
-
this.updateHours(isUp);
|
|
7938
|
-
else if (this.selectionInput === 1)
|
|
7939
|
-
this.updateMinutes(isUp);
|
|
7940
|
-
else
|
|
7941
|
-
this.toggleAMPM();
|
|
7942
|
-
}
|
|
7943
|
-
updateHours(isUp) {
|
|
7944
|
-
const hoursDelta = isUp ? 1 : -1;
|
|
7945
|
-
let selectedHours = this.dateTimeInputDate.getHours() + hoursDelta;
|
|
7946
|
-
// Handle 12-hour format with AM/PM
|
|
7947
|
-
if (selectedHours === 0)
|
|
7948
|
-
selectedHours = 12; // 12 AM
|
|
7949
|
-
if (selectedHours === -1)
|
|
7950
|
-
selectedHours = 11; // 11 PM
|
|
7951
|
-
if (selectedHours === 13)
|
|
7952
|
-
selectedHours = 1; // 1 PM
|
|
7953
|
-
if (selectedHours === 25)
|
|
7954
|
-
selectedHours = 1; // 1 AM
|
|
7955
|
-
this.dateTimeInputDate = new Date(this.dateTimeInputDate.setHours(selectedHours));
|
|
7956
|
-
// Display 12-hour format
|
|
7957
|
-
const displayHour = selectedHours > 12 ? selectedHours - 12 : selectedHours;
|
|
7958
|
-
this.span1.nativeElement.innerHTML = this.padValue(displayHour);
|
|
7959
|
-
this.setSpanSelection(this.span1.nativeElement);
|
|
7960
|
-
this.span3.nativeElement.innerHTML = selectedHours >= 12 ? 'PM' : 'AM';
|
|
7961
|
-
this.markAsTouched();
|
|
7454
|
+
}
|
|
7455
|
+
this.highlightedPart.set((this.highlightedPart() ?? 2) - 1);
|
|
7962
7456
|
}
|
|
7963
|
-
|
|
7964
|
-
|
|
7965
|
-
this.
|
|
7966
|
-
this.span2.nativeElement.innerHTML = this.padValue(this.dateTimeInputDate.getMinutes());
|
|
7967
|
-
this.setSpanSelection(this.span2.nativeElement);
|
|
7968
|
-
this.markAsTouched();
|
|
7457
|
+
closePopover() {
|
|
7458
|
+
this.mainPopover.close();
|
|
7459
|
+
this.highlightedPart.set(0);
|
|
7969
7460
|
}
|
|
7970
|
-
|
|
7971
|
-
this.
|
|
7972
|
-
|
|
7973
|
-
|
|
7974
|
-
|
|
7975
|
-
this.
|
|
7976
|
-
|
|
7461
|
+
openPopover() {
|
|
7462
|
+
this.mainPopover.open();
|
|
7463
|
+
this.highlightedPart.set(null);
|
|
7464
|
+
}
|
|
7465
|
+
markAsTouched() {
|
|
7466
|
+
if (this.getSuperControl && !this.getSuperControl.touched) {
|
|
7467
|
+
this.onTouched();
|
|
7468
|
+
}
|
|
7469
|
+
}
|
|
7470
|
+
isTargetPopoverToggle(event) {
|
|
7471
|
+
const target = event?.target;
|
|
7472
|
+
const targetNode = target instanceof Node ? target : null;
|
|
7473
|
+
return Boolean(targetNode &&
|
|
7474
|
+
(this.iconContainer?.nativeElement?.contains(targetNode) ||
|
|
7475
|
+
this.dropdownIcon?.nativeElement?.contains(targetNode)));
|
|
7476
|
+
}
|
|
7477
|
+
// Control Value Accessor
|
|
7478
|
+
registerOnChange(fn) {
|
|
7479
|
+
this.onChange = fn;
|
|
7480
|
+
}
|
|
7481
|
+
onChange(_) { }
|
|
7482
|
+
onTouched = () => { };
|
|
7483
|
+
registerOnTouched(fn) {
|
|
7484
|
+
this.onTouched = fn;
|
|
7485
|
+
}
|
|
7486
|
+
validate(control) {
|
|
7487
|
+
if (InputDatetimeFormatHelper.isControlValueValid(control.value, this.isDatePicker())) {
|
|
7488
|
+
return null;
|
|
7489
|
+
}
|
|
7490
|
+
return { invalidDateTime: true };
|
|
7491
|
+
}
|
|
7492
|
+
registerOnValidatorChange(fn) {
|
|
7493
|
+
this.onValidatorChange = fn;
|
|
7494
|
+
}
|
|
7495
|
+
writeValue(value) {
|
|
7496
|
+
const parsedDate = this.toDate(value);
|
|
7497
|
+
this.currentValue.set(parsedDate
|
|
7498
|
+
? InputDatetimeFormatHelper.toControlValue(parsedDate, this.isDatePicker())
|
|
7499
|
+
: null);
|
|
7500
|
+
this.dateTime.set(parsedDate ?? new Date());
|
|
7501
|
+
this.onValidatorChange();
|
|
7977
7502
|
}
|
|
7978
7503
|
clearInput(event) {
|
|
7979
7504
|
this.clearInputEvent.emit(true);
|
|
7980
|
-
this.
|
|
7981
|
-
this.
|
|
7982
|
-
this.
|
|
7983
|
-
this.
|
|
7984
|
-
this.resetDateTimeInputs();
|
|
7505
|
+
this.currentValue.set(null);
|
|
7506
|
+
this.dateTime.set(new Date());
|
|
7507
|
+
this.onChange(null);
|
|
7508
|
+
this.onValidatorChange();
|
|
7985
7509
|
this.markAsTouched();
|
|
7986
|
-
this.
|
|
7510
|
+
if (!this.mainPopover.isOpen()) {
|
|
7511
|
+
this.highlightedPart.set(0);
|
|
7512
|
+
}
|
|
7987
7513
|
if (event) {
|
|
7988
7514
|
event.stopPropagation();
|
|
7989
7515
|
}
|
|
7990
7516
|
}
|
|
7991
|
-
|
|
7992
|
-
|
|
7993
|
-
|
|
7994
|
-
|
|
7995
|
-
|
|
7996
|
-
|
|
7997
|
-
|
|
7998
|
-
|
|
7999
|
-
|
|
8000
|
-
|
|
8001
|
-
|
|
8002
|
-
|
|
8003
|
-
|
|
8004
|
-
|
|
8005
|
-
|
|
8006
|
-
|
|
8007
|
-
|
|
8008
|
-
|
|
8009
|
-
|
|
8010
|
-
|
|
8011
|
-
|
|
7517
|
+
onInputFocus() {
|
|
7518
|
+
this.isInputFocused.set(true);
|
|
7519
|
+
if (!this.isFocusedThroughPopoverToggle()) {
|
|
7520
|
+
this.highlightedPart.set(0);
|
|
7521
|
+
}
|
|
7522
|
+
this.onFocusEmitter.emit();
|
|
7523
|
+
}
|
|
7524
|
+
onInputBlur() {
|
|
7525
|
+
this.isInputFocused.set(false);
|
|
7526
|
+
this.isInputSelected.set(false);
|
|
7527
|
+
this.isFocusedThroughPopoverToggle.set(false);
|
|
7528
|
+
this.closePopover();
|
|
7529
|
+
this.highlightedPart.set(null);
|
|
7530
|
+
this.blurInputEvent.emit();
|
|
7531
|
+
}
|
|
7532
|
+
togglePopover() {
|
|
7533
|
+
if (this.mainPopover.isOpen()) {
|
|
7534
|
+
this.closePopover();
|
|
7535
|
+
}
|
|
7536
|
+
else {
|
|
7537
|
+
this.openPopover();
|
|
7538
|
+
}
|
|
7539
|
+
}
|
|
7540
|
+
focusInput(event) {
|
|
7541
|
+
event?.stopPropagation();
|
|
7542
|
+
event?.preventDefault();
|
|
7543
|
+
this.isInputSelected.set(false);
|
|
7544
|
+
const isTargetPopoverToggle = this.isTargetPopoverToggle(event);
|
|
7545
|
+
if (isTargetPopoverToggle && !this.mainPopover.isOpen()) {
|
|
7546
|
+
this.isFocusedThroughPopoverToggle.set(true);
|
|
7547
|
+
}
|
|
7548
|
+
this.inputListener?.nativeElement?.focus();
|
|
7549
|
+
}
|
|
7550
|
+
onPopoverDateChanged(date) {
|
|
7551
|
+
// Time-picker changes (Set/Default actions) come from the closePopover output.
|
|
7552
|
+
const dateTime = date && this.toDate(date);
|
|
7553
|
+
if (dateTime) {
|
|
7554
|
+
this.registerDateChange(dateTime);
|
|
7555
|
+
this.inputListener?.nativeElement?.blur();
|
|
7556
|
+
}
|
|
8012
7557
|
}
|
|
8013
|
-
|
|
8014
|
-
|
|
8015
|
-
|
|
8016
|
-
|
|
7558
|
+
highlightPart(event, part) {
|
|
7559
|
+
event.preventDefault();
|
|
7560
|
+
event.stopPropagation();
|
|
7561
|
+
this.focusInput();
|
|
7562
|
+
this.closePopover();
|
|
7563
|
+
this.highlightedPart.set(part);
|
|
8017
7564
|
}
|
|
8018
|
-
|
|
8019
|
-
this.
|
|
7565
|
+
onInputChange(event) {
|
|
7566
|
+
if (this.mainPopover.isOpen()) {
|
|
7567
|
+
this.closePopover();
|
|
7568
|
+
}
|
|
7569
|
+
if (this.isInputSelected()) {
|
|
7570
|
+
this.currentValue.set(null);
|
|
7571
|
+
this.dateTime.set(new Date());
|
|
7572
|
+
this.onChange(null);
|
|
7573
|
+
this.onValidatorChange();
|
|
7574
|
+
this.markAsTouched();
|
|
7575
|
+
this.isInputSelected.set(false);
|
|
7576
|
+
this.highlightedPart.set(0);
|
|
7577
|
+
}
|
|
7578
|
+
const { nextValue, nextHighlightedPart } = InputDatetimeFormatHelper.handleInput(this.currentValue(), event, this.highlightedPart() ?? null, this.isDatePicker());
|
|
7579
|
+
this.currentValue.set(nextValue);
|
|
7580
|
+
const parsedDate = nextValue ? this.toDate(nextValue) : null;
|
|
7581
|
+
if (parsedDate) {
|
|
7582
|
+
this.dateTime.set(parsedDate);
|
|
7583
|
+
}
|
|
7584
|
+
this.onValidatorChange();
|
|
7585
|
+
requestAnimationFrame(() => {
|
|
7586
|
+
if (parsedDate) {
|
|
7587
|
+
this.onChange(InputDatetimeFormatHelper.toFormValue(parsedDate, this.isDatePicker()));
|
|
7588
|
+
return;
|
|
7589
|
+
}
|
|
7590
|
+
this.onChange(nextValue);
|
|
7591
|
+
});
|
|
7592
|
+
this.highlightedPart.set(nextHighlightedPart);
|
|
8020
7593
|
}
|
|
8021
|
-
|
|
7594
|
+
onInputSelect(event) {
|
|
8022
7595
|
if (event) {
|
|
8023
7596
|
event.preventDefault();
|
|
8024
7597
|
event.stopPropagation();
|
|
8025
7598
|
}
|
|
8026
|
-
this.
|
|
8027
|
-
|
|
8028
|
-
this.t2.toggle();
|
|
8029
|
-
}
|
|
8030
|
-
ngOnDestroy() {
|
|
8031
|
-
// Clear all timers
|
|
8032
|
-
if (this.dateTimeMainTimer) {
|
|
8033
|
-
clearTimeout(this.dateTimeMainTimer);
|
|
7599
|
+
if (this.isTargetPopoverToggle(event)) {
|
|
7600
|
+
return;
|
|
8034
7601
|
}
|
|
8035
|
-
|
|
8036
|
-
|
|
7602
|
+
this.isInputSelected.set(true);
|
|
7603
|
+
this.highlightedPart.set(null);
|
|
7604
|
+
}
|
|
7605
|
+
onInputPaste(event) {
|
|
7606
|
+
event.preventDefault();
|
|
7607
|
+
event.stopPropagation();
|
|
7608
|
+
const pastedText = event.clipboardData?.getData('text') ?? '';
|
|
7609
|
+
const isDatePicker = this.isDatePicker();
|
|
7610
|
+
const parsedDate = InputDatetimePasteHelper.parsePastedValue(pastedText, isDatePicker);
|
|
7611
|
+
if (!parsedDate) {
|
|
7612
|
+
return;
|
|
8037
7613
|
}
|
|
8038
|
-
|
|
8039
|
-
|
|
7614
|
+
this.dateTime.set(parsedDate);
|
|
7615
|
+
this.currentValue.set(InputDatetimeFormatHelper.toControlValue(parsedDate, isDatePicker));
|
|
7616
|
+
this.highlightedPart.set(null);
|
|
7617
|
+
this.mainPopover.close();
|
|
7618
|
+
this.onValidatorChange();
|
|
7619
|
+
requestAnimationFrame(() => {
|
|
7620
|
+
this.onChange(InputDatetimeFormatHelper.toFormValue(parsedDate, isDatePicker));
|
|
7621
|
+
});
|
|
7622
|
+
}
|
|
7623
|
+
onKeyDown(event) {
|
|
7624
|
+
const isModifierPressed = event.altKey || event.metaKey;
|
|
7625
|
+
const isCtrlOrCmdPressed = event.ctrlKey || event.metaKey;
|
|
7626
|
+
const preventAndStop = () => {
|
|
7627
|
+
event.preventDefault();
|
|
7628
|
+
event.stopPropagation();
|
|
7629
|
+
};
|
|
7630
|
+
switch (event.key) {
|
|
7631
|
+
case 'ArrowLeft':
|
|
7632
|
+
preventAndStop();
|
|
7633
|
+
if (this.mainPopover.isOpen()) {
|
|
7634
|
+
this.closePopover();
|
|
7635
|
+
return;
|
|
7636
|
+
}
|
|
7637
|
+
this.moveHighlightedPartLeft();
|
|
7638
|
+
return;
|
|
7639
|
+
case 'ArrowRight':
|
|
7640
|
+
preventAndStop();
|
|
7641
|
+
if (this.mainPopover.isOpen()) {
|
|
7642
|
+
this.closePopover();
|
|
7643
|
+
return;
|
|
7644
|
+
}
|
|
7645
|
+
this.moveHighlightedPartRight();
|
|
7646
|
+
return;
|
|
7647
|
+
case 'ArrowUp':
|
|
7648
|
+
preventAndStop();
|
|
7649
|
+
if (isModifierPressed) {
|
|
7650
|
+
this.closePopover();
|
|
7651
|
+
}
|
|
7652
|
+
return;
|
|
7653
|
+
case 'a': {
|
|
7654
|
+
if (isCtrlOrCmdPressed) {
|
|
7655
|
+
preventAndStop();
|
|
7656
|
+
this.onInputSelect();
|
|
7657
|
+
}
|
|
7658
|
+
return;
|
|
7659
|
+
}
|
|
7660
|
+
case 'c': {
|
|
7661
|
+
if (this.hasDate() && isCtrlOrCmdPressed) {
|
|
7662
|
+
preventAndStop();
|
|
7663
|
+
this.onInputSelect();
|
|
7664
|
+
navigator.clipboard.writeText(this.currentValue() ?? '');
|
|
7665
|
+
}
|
|
7666
|
+
return;
|
|
7667
|
+
}
|
|
7668
|
+
case 'Backspace':
|
|
7669
|
+
if (this.isInputSelected()) {
|
|
7670
|
+
preventAndStop();
|
|
7671
|
+
this.clearInput();
|
|
7672
|
+
this.isInputSelected.set(false);
|
|
7673
|
+
this.highlightedPart.set(0);
|
|
7674
|
+
}
|
|
7675
|
+
return;
|
|
7676
|
+
case 'Delete':
|
|
7677
|
+
if (this.isInputSelected()) {
|
|
7678
|
+
preventAndStop();
|
|
7679
|
+
this.clearInput();
|
|
7680
|
+
this.isInputSelected.set(false);
|
|
7681
|
+
this.highlightedPart.set(0);
|
|
7682
|
+
}
|
|
7683
|
+
return;
|
|
7684
|
+
case 'ArrowDown':
|
|
7685
|
+
preventAndStop();
|
|
7686
|
+
if (isModifierPressed) {
|
|
7687
|
+
this.openPopover();
|
|
7688
|
+
}
|
|
7689
|
+
return;
|
|
7690
|
+
case 'Enter':
|
|
7691
|
+
preventAndStop();
|
|
7692
|
+
KeyboardNavigationHelper.focusNextInput(this.inputListener);
|
|
7693
|
+
return;
|
|
7694
|
+
case 'Escape':
|
|
7695
|
+
preventAndStop();
|
|
7696
|
+
this.inputListener?.nativeElement?.blur();
|
|
7697
|
+
return;
|
|
7698
|
+
default:
|
|
7699
|
+
return;
|
|
8040
7700
|
}
|
|
8041
|
-
// Complete the destroy subject to unsubscribe from all observables
|
|
8042
|
-
this.destroy$.next();
|
|
8043
|
-
this.destroy$.complete();
|
|
8044
7701
|
}
|
|
8045
|
-
|
|
8046
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: CaiInputDatetimePickerComponent, isStandalone: true, selector: "cai-input-datetime-picker", inputs: { id: "id", inputConfig: "inputConfig", formFormat: "formFormat", forceInvalidStyling: "forceInvalidStyling" }, outputs: { clearInputEvent: "clear", blurInputEvent: "blurInput", selectLastOneForSelectionEmitter: "selectLastOneForSelectionEmitter", selectLastOneAfterMouseUpEmitter: "selectLastOneAfterMouseUpEmitter", onDatePasteEmitter: "onDatePasteEmitter", onFocusEmitter: "onFocusEmitter", changeSelectionEmmiter: "changeSelectionEmmiter", setSelectionEmmiter: "setSelectionEmmiter" }, providers: [CalendarDateTimePickerService], viewQueries: [{ propertyName: "dateTimePopover", first: true, predicate: ["dateTimePopover"], descendants: true }, { propertyName: "t2", first: true, predicate: ["t2"], descendants: true }, { propertyName: "span1", first: true, predicate: ["span1"], descendants: true, static: true }, { propertyName: "span2", first: true, predicate: ["span2"], descendants: true, static: true }, { propertyName: "span3", first: true, predicate: ["span3"], descendants: true, static: true }, { propertyName: "holder1", first: true, predicate: ["holder1"], descendants: true, static: true }, { propertyName: "closeTooltip", first: true, predicate: ["closeTooltip"], descendants: true }], ngImport: i0, template: "@let inTable = inputConfig?.inTable; @let inverse = inputConfig?.inverse;\n@let size = inputConfig?.size;\n<!-- -->\n@let invalid =\n getSuperControl?.invalid &&\n (getSuperControl?.touched || getSuperControl?.dirty);\n@let valid = getSuperControl?.valid && getSuperControl?.value;\n@let disabled = getSuperControl?.disabled || inputConfig?.isDisabled;\n@let isBilling = inputConfig?.isBilling;\n@let showClear = !disabled && !inputConfig.hideClear;\n@let hasFloatingError = inTable && invalid;\n<!-- Date Time Input -->\n<div\n [id]=\"id\"\n class=\"datetime-input-container\"\n [class]=\"{\n 'datetime-valid': valid && !forceInvalidStyling,\n 'datetime-invalid': invalid || forceInvalidStyling,\n 'datetime-disabled': disabled,\n 'datetime-focus': isFocusInput,\n 'datetime-has-text': getSuperControl?.value,\n 'datetime-required': isRequired && !disabled,\n 'datetime-in-table': inTable,\n 'datetime-inverse': inverse,\n 'datetime-billing': isBilling,\n 'datetime-popover-open': t2.isOpen(),\n 'datetime-size-22': size === 22,\n 'datetime-icon-hidden': inputConfig.isIconHidden,\n }\"\n #t2=\"ngbPopover\"\n [ngbPopover]=\"!disabled ? dateTimePopover : null\"\n [placement]=\"['bottom-start', 'top-start']\"\n [triggers]=\"'manual'\"\n [popoverClass]=\"'datetimepopovermain'\"\n [autoClose]=\"'outside'\"\n [container]=\"'body'\"\n (pointerdown)=\"onPopoverClick($event)\"\n (shown)=\"onPopoverShown()\"\n (hidden)=\"onPopoverHidden()\"\n>\n <div class=\"datetime-label\">\n {{ inputConfig.label }}\n </div>\n\n <div\n #holder1\n [tabindex]=\"disabled ? '-1' : '0'\"\n contenteditable=\"true\"\n (keydown)=\"changeSelection($event)\"\n (input)=\"preventInput($event)\"\n (focus)=\"onEditableFocus($event)\"\n (blur)=\"blurInput()\"\n (paste)=\"onDatePaste($event)\"\n class=\"datetime-input-listener\"\n [ngbTooltip]=\"hasFloatingError ? errorTooltip : null\"\n [container]=\"'body'\"\n [placement]=\"'bottom'\"\n [disableTooltip]=\"isFocusInput\"\n tooltipClass=\"tooltip tooltip-bg-red-500 input-tooltip\"\n ></div>\n\n @if (!inputConfig.isIconHidden) {\n <div class=\"datetime-icon-container\" (pointerdown)=\"openPopover($event)\">\n <svg-icon\n class=\"datetime-icon\"\n [name]=\"\n inputConfig.placeholderIcon === 'date' ? 'cai-date' : 'cai-time'\n \"\n ></svg-icon>\n <div class=\"datetime-separator\"></div>\n </div>\n }\n <div class=\"datetime-input\">\n <span\n #span1\n class=\"main\"\n [ngClass]=\"{\n 'reset-selection-color': !isFocusInput,\n }\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? 'mm' : 'HH'\"\n ></span>\n <span>\n <div\n class=\"border-picker\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? '/' : ':'\"\n ></div>\n </span>\n <span\n #span2\n class=\"main\"\n [ngClass]=\"{\n 'reset-selection-color': !isFocusInput,\n }\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? 'dd' : 'MM'\"\n ></span>\n <span>\n <div\n class=\"border-picker\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? '/' : ' '\"\n ></div>\n </span>\n <span\n #span3\n class=\"main\"\n [class.time-am-pm]=\"inputConfig.name !== 'datepicker'\"\n [ngClass]=\"{\n 'reset-selection-color': !isFocusInput,\n }\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? 'yy' : 'AM'\"\n ></span>\n </div>\n\n @if (!disabled) {\n @let tooltipClass =\n inverse\n ? \"tooltip input-tooltip tooltip-bg-white-700 tooltip-text-black-500\"\n : \"tooltip input-tooltip\";\n\n @if (showClear) {\n <button\n class=\"datetime-cancel-button\"\n tabindex=\"-1\"\n ngbTooltip=\"Clear\"\n [openDelay]=\"600\"\n [tooltipClass]=\"tooltipClass\"\n [placement]=\"'top'\"\n [container]=\"'body'\"\n [autoClose]=\"true\"\n #closeTooltip=\"ngbTooltip\"\n (click)=\"clearInput($event)\"\n (pointerdown)=\"handleCloseTooltip()\"\n (mouseleave)=\"handleCloseTooltip()\"\n >\n <svg-icon class=\"datetime-bg-icon\" name=\"cai-cancel\"></svg-icon>\n </button>\n }\n <svg-icon\n class=\"datetime-icon datetime-dropdown-icon\"\n (pointerdown)=\"openPopover($event)\"\n name=\"cai-arrow-secondary-down\"\n ></svg-icon>\n }\n <!-- Error Message -->\n @if (!inTable || isBilling) {\n <div class=\"datetime-error-message\">\n {{\n invalid\n ? (getSuperControl?.errors\n | errorMessage: inputConfig.customErrors)[0]\n : \"\"\n }}\n </div>\n }\n</div>\n\n<!-- Popover for DateTime Pickers -->\n<ng-template #dateTimePopover let-data=\"data\">\n <div\n class=\"datetime-dropdown-holder\"\n [class.datetime-has-stroke]=\"inputConfig.hasStroke\"\n >\n <cai-custom-datetime-pickers\n [calendarType]=\"\n inputConfig.name === 'datepicker' ||\n inputConfig.name === 'datepickerBankCard'\n ? 'date'\n : 'time'\n \"\n [inputConfig]=\"inputConfig\"\n [placeholder]=\"'MM/DD/YY'\"\n [dateTime]=\"dateTimeInputDate\"\n (closePopover)=\"closePopover($event)\"\n ></cai-custom-datetime-pickers>\n </div>\n</ng-template>\n\n<ng-template #errorTooltip>\n @if (inTable && invalid && !isFocusInput) {\n {{ (getSuperControl?.errors | errorMessage: inputConfig.customErrors)[0] }}\n }\n</ng-template>\n", styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important}input:-webkit-autofill:focus{-webkit-text-fill-color:#ffffff!important}input:-moz-autofill,input:-moz-autofill-preview{filter:none}*,*:before,*:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}p,ul,ol,dl,blockquote,figure,pre{margin:0}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{background:none;border:none;padding:0}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle;max-width:100%;height:auto}ul,ol{padding-left:1.5rem;list-style-position:outside}a{color:inherit;text-decoration:inherit}table{border-collapse:collapse;border-spacing:0}:focus:not(:focus-visible){outline:none}.datetime-input-container{--color-text: #2f2f2f;--color-text-negative: #df3c3c;--color-text-heading: #424242;--color-text-subtle: #919191;--color-text-inverse: #ffffff;--color-icon-neutral: #919191;--color-icon-negative: #e66767;--color-icon-positive: #6692f1;--color-icon-inverse: rgba(255, 255, 255, .6980392157);--color-icon-disable: #cccccc;--color-surface-neutral: #eeeeee;--color-surface-neutral-hover: #dadada;--color-surface-neutral-focus: #1d1d1d;--color-surface-positive: #e9effd;--color-surface-positive-hover: #bed0f9;--color-surface-positive-focus: #0b49d1;--color-surface-negative: #fbe9e9;--color-surface-negative-hover: #f4bebe;--color-surface-negative-focus: #c20c0c;--color-surface-disable: #f7f7f7;padding:4px 4px 4px 6px;border-radius:2px;position:relative;display:flex;align-items:center;background-color:var(--color-surface-neutral);transition:background-color .1s cubic-bezier(.46,.03,.51,.95);cursor:pointer;width:100%}.datetime-input-container.datetime-inverse{--color-text: #ffffff;--color-text-negative: #ed9292;--color-text-heading: #ffffff;--color-text-inverse: #2f2f2f;--color-icon-neutral: #aaaaaa;--color-icon-negative: #ed9292;--color-icon-positive: #92b1f5;--color-icon-disable: #6c6c6c;--color-surface-neutral: #424242;--color-surface-neutral-hover: #6c6c6c;--color-surface-neutral-focus: #dadada;--color-surface-positive: rgba(59, 115, 237, .2);--color-surface-positive-hover: #2f519a;--color-surface-positive-focus: #0b49d1;--color-surface-negative: rgba(223, 60, 60, .2);--color-surface-negative-hover: #923030;--color-surface-negative-focus: #c20c0c;--color-surface-disable: rgba(66, 66, 66, .4)}.datetime-input-container.datetime-inverse:not(.datetime-has-text) .datetime-input{color:var(--color-text-inverse)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-text) .main::selection{color:var(--color-text-inverse)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-text).datetime-focus .datetime-icon{color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-text).datetime-focus .datetime-separator{background-color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse.datetime-valid.datetime-focus .datetime-input,.datetime-input-container.datetime-inverse.datetime-invalid.datetime-focus .datetime-input{color:var(--color-text)}.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-bg-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-bg-icon:hover{background-color:#fff!important}.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-icon:hover{color:#fff!important}.datetime-input-container.datetime-in-table{--color-surface-neutral: transparent;--color-surface-negative: transparent;--color-surface-positive: transparent}.datetime-input-container.datetime-in-table .datetime-dropdown-icon{opacity:0}.datetime-input-container.datetime-in-table.datetime-invalid:not(.datetime-focus):not(:hover) .datetime-input,.datetime-input-container.datetime-in-table.datetime-invalid:not(.datetime-focus):not(:hover) .datetime-label{color:var(--color-text-negative)}.datetime-input-container.datetime-in-table:hover .datetime-dropdown-icon,.datetime-input-container.datetime-in-table.datetime-focus .datetime-dropdown-icon{opacity:1}.datetime-input-container:hover{background-color:var(--color-surface-neutral-hover)}.datetime-input-container:hover .datetime-bg-icon{color:var(--color-surface-neutral-hover)}.datetime-input-container.datetime-focus{background-color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-focus.datetime-in-table:not(.datetime-billing) .datetime-label{opacity:0}.datetime-input-container.datetime-focus:not(.datetime-in-table):not(.datetime-billing) .datetime-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-input-container.datetime-focus.datetime-billing .datetime-label{color:#fff!important}.datetime-input-container.datetime-focus .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-focus .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-focus .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-focus .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-focus .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-focus .datetime-input{color:var(--color-text-inverse);opacity:1;pointer-events:auto}.datetime-input-container.datetime-popover-open .datetime-dropdown-icon{transform:rotateX(180deg)}.datetime-input-container.datetime-has-text .datetime-input{opacity:1;pointer-events:auto}.datetime-input-container.datetime-has-text.datetime-disabled .datetime-input{pointer-events:none!important}.datetime-input-container.datetime-has-text:not(.datetime-in-table):not(.datetime-billing) .datetime-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-input-container.datetime-has-text.datetime-in-table:not(.datetime-billing) .datetime-label{opacity:0}.datetime-input-container.datetime-valid:not(.datetime-disabled){background-color:var(--color-surface-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover{background-color:var(--color-surface-positive-hover)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-bg-icon{background-color:var(--color-icon-positive);color:var(--color-surface-positive-hover)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-bg-icon:hover{background-color:#0b49d1}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus{background-color:var(--color-surface-positive-focus)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-positive-focus)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-separator{background-color:var(--color-icon-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-dropdown-icon,.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-icon{color:var(--color-icon-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-dropdown-icon:hover,.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-icon:hover{color:#0b49d1}.datetime-input-container.datetime-invalid:not(.datetime-disabled){background-color:var(--color-surface-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-error-message{opacity:1;transform:translateY(0)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover{background-color:var(--color-surface-negative-hover)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover .datetime-bg-icon{background-color:var(--color-icon-negative);color:var(--color-surface-negative-hover)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover .datetime-bg-icon:hover{background-color:#c20c0c}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover.datetime-has-text .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text{background-color:var(--color-surface-negative-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-negative-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text){background-color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-separator{background-color:var(--color-icon-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-dropdown-icon,.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-icon{color:var(--color-icon-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-dropdown-icon:hover,.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-icon:hover{color:#c20c0c}.datetime-input-container.datetime-disabled{cursor:default;pointer-events:none}.datetime-input-container.datetime-disabled:not(.datetime-in-table){background-color:var(--color-surface-disable)}.datetime-input-container.datetime-disabled.datetime-in-table{background-color:transparent}.datetime-input-container.datetime-disabled .datetime-label{color:var(--color-text-subtle)!important}.datetime-input-container.datetime-disabled .datetime-icon{color:var(--color-icon-disable)}.datetime-input-container.datetime-disabled.datetime-has-text .datetime-icon{color:var(--color-icon-neutral)}.datetime-input-container.datetime-disabled .datetime-separator{background-color:var(--color-icon-neutral)}.datetime-input-container.datetime-disabled .datetime-input{color:var(--color-text)!important}.datetime-input-container.datetime-required .datetime-label:after{content:\" *\";color:var(--color-text-negative)}.datetime-icon-container{display:flex;align-items:center;justify-content:center;gap:4px;width:max-content}.datetime-icon-container.hidden{display:none}.datetime-icon-container .datetime-icon{order:1}.datetime-icon-container .datetime-separator{height:14px;width:1px;border-radius:2px;background-color:var(--color-icon-neutral);transition:background-color .2s ease-in-out;opacity:40%;order:2;margin-right:4px}.datetime-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:var(--color-icon-neutral);transition:color .2s ease-in-out,opacity .2s ease-in-out,transform .2s ease-in-out}.datetime-icon:hover{color:#424242}.datetime-label{position:absolute;display:flex;gap:4px;left:27px;font-size:14px;line-height:18px;font-weight:400;pointer-events:none;padding:.25rem 6px;color:var(--color-text);transition:transform .1s ease-in-out,font-weight .1s ease-in-out,color .1s ease-in-out,font-size .1s ease-in-out,opacity .1s ease-in-out;transform:translateY(0);-webkit-user-select:none;user-select:none}.datetime-icon-hidden .datetime-label{left:0}.datetime-bg-icon{background-color:var(--color-icon-neutral);color:var(--color-surface-neutral);border-radius:1px;height:18px;width:18px;padding:0;display:grid;place-items:center;transition:background-color .2s ease-in-out,color .2s ease-in-out,opacity .2s ease-in-out,transform .1s ease-in-out;transform-box:border-box;transform-origin:center;will-change:transform}.datetime-bg-icon:focus-visible{outline:none}.datetime-bg-icon svg{transition:transform .1s ease-in-out}.datetime-bg-icon:hover{transform:scale(1.2222222222)}.datetime-bg-icon:hover svg{transform:scale(.8181818182)}.datetime-bg-icon:active{transform:scale(1)}.datetime-cancel-button{position:absolute;right:26px;top:4px;opacity:0;transition:opacity .2s ease-in-out;pointer-events:none}.datetime-dropdown-icon{position:absolute;right:4px;top:4px;transform:rotateX(0)}.datetime-dropdown-icon:hover{color:#424242}.datetime-input{display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--color-text);text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;font-family:Montserrat;font-size:14px;font-style:normal;font-weight:400;line-height:18px;opacity:0;pointer-events:none;cursor:text;transition:opacity .2s ease-in-out,color .2s ease-in-out}.datetime-input .main{border-radius:1px}.datetime-input .main.time-am-pm{margin-left:4px}.datetime-size-22{height:22px;padding-left:0}.datetime-size-22 .datetime-bg-icon{height:14px!important;width:14px!important;padding:2px!important;right:22px!important}.datetime-size-22 .datetime-icon-container{height:22px!important;padding-top:2px;padding-bottom:2px;padding-left:4px!important}.datetime-size-22 .datetime-input{padding-top:2px;padding-bottom:2px}.datetime-size-22 .datetime-label{padding-top:2px;padding-bottom:2px;padding-left:0!important}.datetime-size-22 .datetime-icon{height:14px!important;width:14px!important}.datetime-size-22.datetime-has-text .datetime-label,.datetime-size-22.datetime-focus .datetime-label{transform:translateY(-18px)!important}.datetime-error-message{position:absolute;bottom:-16px;right:6px;font-size:11px;font-weight:600;opacity:0;-webkit-user-select:none;user-select:none;transition:opacity .2s ease-in-out,transform .2s ease-in-out;color:var(--color-text-negative);transform:translateY(-10px);pointer-events:none}.datetime-in-table .datetime-input-listener{width:100%;height:100%!important;position:absolute;bottom:0;left:0;opacity:0}.datetime-input-listener{caret-color:transparent;height:12px!important}.main::selection{background-color:#ffffff4d;border-radius:1px}.datetime-billing .datetime-separator{order:0;margin-right:0;margin-left:4px}.datetime-billing .datetime-cancel-button{right:4px}.datetime-billing .datetime-label{left:0;font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-billing .datetime-icon-container{order:2}.datetime-billing .datetime-input{margin-left:auto}.datetime-billing .datetime-error-message{bottom:4px!important;right:32px!important;transform:translateY(0)!important}.datetime-billing.datetime-focus .datetime-error-message,.datetime-billing.datetime-has-text .datetime-error-message{opacity:0!important}.datetime-billing .datetime-dropdown-icon,.datetime-billing:hover .datetime-icon,.datetime-billing.datetime-focus .datetime-icon{opacity:0}.datetime-billing:hover .datetime-dropdown-icon,.datetime-billing.datetime-focus .datetime-dropdown-icon{opacity:1}.datetime-billing.datetime-has-text .datetime-dropdown-icon{opacity:0!important;pointer-events:none!important}.datetime-billing.datetime-has-text:hover .datetime-icon-container,.datetime-billing.datetime-has-text.datetime-focus .datetime-icon-container{pointer-events:none!important}.datetime-billing.datetime-has-text:hover .datetime-icon-container .datetime-icon,.datetime-billing.datetime-has-text.datetime-focus .datetime-icon-container .datetime-icon{opacity:0!important}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
8047
|
-
|
|
8048
|
-
|
|
8049
|
-
|
|
7702
|
+
closeClearButtonTooltip() {
|
|
7703
|
+
this.clearButtonTooltip.close();
|
|
7704
|
+
}
|
|
7705
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CaiInputDatetimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7706
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: CaiInputDatetimePickerComponent, isStandalone: true, selector: "cai-input-datetime-picker, ca-date-time", inputs: { id: "id", inputConfig: "inputConfig", forceInvalidStyling: "forceInvalidStyling" }, outputs: { clearInputEvent: "clear", blurInputEvent: "blurInput", onFocusEmitter: "onFocusEmitter" }, providers: [
|
|
7707
|
+
CalendarDateTimePickerService,
|
|
7708
|
+
{
|
|
7709
|
+
provide: NG_VALIDATORS,
|
|
7710
|
+
useExisting: forwardRef(() => CaiInputDatetimePickerComponent),
|
|
7711
|
+
multi: true,
|
|
7712
|
+
},
|
|
7713
|
+
], viewQueries: [{ propertyName: "inputListener", first: true, predicate: ["inputListener"], descendants: true }, { propertyName: "mainPopover", first: true, predicate: ["mainPopover"], descendants: true }, { propertyName: "clearButtonTooltip", first: true, predicate: ["clearButtonTooltip"], descendants: true }, { propertyName: "iconContainer", first: true, predicate: ["iconContainer"], descendants: true, read: ElementRef }, { propertyName: "dropdownIcon", first: true, predicate: ["dropdownIcon"], descendants: true, read: ElementRef }], ngImport: i0, template: "@let inTable = inputConfig?.inTable; @let inverse = inputConfig?.inverse;\n@let size = inputConfig?.size;\n@let invalid =\n getSuperControl?.invalid &&\n (getSuperControl?.touched || getSuperControl?.dirty);\n@let valid = getSuperControl?.valid && getSuperControl?.value;\n@let disabled = getSuperControl?.disabled || inputConfig?.isDisabled;\n@let isBilling = inputConfig?.isBilling;\n@let showClear = !disabled && !inputConfig.hideClear;\n@let hasFloatingError = inTable && invalid;\n\n<div\n [id]=\"id\"\n class=\"datetime-input-container\"\n [class]=\"{\n 'datetime-valid': valid && !forceInvalidStyling,\n 'datetime-invalid': invalid || forceInvalidStyling,\n 'datetime-disabled': disabled,\n 'datetime-focus': isInputFocused(),\n 'datetime-has-text': !!currentValue(),\n 'datetime-has-date': hasDate(),\n 'datetime-required': isRequired && !disabled,\n 'datetime-in-table': inTable,\n 'datetime-inverse': inverse,\n 'datetime-billing': isBilling,\n 'datetime-popover-open': mainPopover.isOpen(),\n 'datetime-size-22': size === 22,\n 'datetime-icon-hidden': inputConfig.isIconHidden,\n 'force-invalid': forceInvalidStyling,\n }\"\n #mainPopover=\"ngbPopover\"\n [ngbPopover]=\"!disabled ? dateTimePopover : null\"\n [placement]=\"['bottom-start', 'top-start']\"\n [triggers]=\"'manual'\"\n [popoverClass]=\"'datetimepopovermain'\"\n [autoClose]=\"'outside'\"\n [container]=\"'body'\"\n (mouseenter)=\"hasFloatingError && errorTooltipContainer.open()\"\n (mouseleave)=\"hasFloatingError && errorTooltipContainer.close()\"\n (pointerdown)=\"focusInput($event)\"\n (dblclick)=\"onInputSelect($event)\"\n>\n <div class=\"datetime-label\">\n {{ inputConfig.label }}\n </div>\n\n <input\n #inputListener\n [id]=\"id\"\n [value]=\"currentValue() ?? ''\"\n [tabindex]=\"disabled ? '-1' : '0'\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur()\"\n (keydown)=\"onKeyDown($event)\"\n (input)=\"onInputChange($event)\"\n (paste)=\"onInputPaste($event)\"\n class=\"datetime-input-listener\"\n #errorTooltipContainer=\"ngbTooltip\"\n [disabled]=\"disabled\"\n [ngbTooltip]=\"hasFloatingError ? errorTooltip : null\"\n [container]=\"'body'\"\n [placement]=\"'bottom'\"\n [triggers]=\"'manual'\"\n [disableTooltip]=\"isInputFocused()\"\n tooltipClass=\"tooltip tooltip-bg-red-500 input-tooltip\"\n />\n\n @if (!inputConfig.isIconHidden) {\n <div\n #iconContainer\n class=\"datetime-icon-container\"\n (click)=\"togglePopover()\"\n >\n <svg-icon\n class=\"datetime-icon\"\n [name]=\"\n inputConfig.placeholderIcon === 'date' ? 'cai-date' : 'cai-time'\n \"\n ></svg-icon>\n <div class=\"datetime-separator\"></div>\n </div>\n }\n\n <div class=\"datetime-input\" [class.selected]=\"isInputSelected()\">\n @if (isDatePicker()) {\n <span\n class=\"datetime-input-part\"\n [class.highlighted]=\"highlightedPart() === 0\"\n [class.filled]=\"displayedValues().month !== 'MM'\"\n (pointerdown)=\"highlightPart($event, 0)\"\n >{{ displayedValues().month }}</span\n >\n <span class=\"datetime-input-separator\">/</span>\n <span\n class=\"datetime-input-part\"\n [class.highlighted]=\"highlightedPart() === 1\"\n [class.filled]=\"displayedValues().day !== 'DD'\"\n (pointerdown)=\"highlightPart($event, 1)\"\n >{{ displayedValues().day }}</span\n >\n <span class=\"datetime-input-separator\">/</span>\n <span\n class=\"datetime-input-part\"\n [class.highlighted]=\"highlightedPart() === 2\"\n [class.filled]=\"displayedValues().year !== 'YY'\"\n (pointerdown)=\"highlightPart($event, 2)\"\n >{{ displayedValues().year }}</span\n >\n } @else {\n <span\n class=\"datetime-input-part\"\n [class.highlighted]=\"highlightedPart() === 0\"\n [class.filled]=\"displayedValues().hour !== 'HH'\"\n (pointerdown)=\"highlightPart($event, 0)\"\n >{{ displayedValues().hour }}</span\n >\n <span class=\"datetime-input-separator\">:</span>\n <span\n class=\"datetime-input-part\"\n [class.highlighted]=\"highlightedPart() === 1\"\n [class.filled]=\"displayedValues().minute !== 'MM'\"\n (pointerdown)=\"highlightPart($event, 1)\"\n >{{ displayedValues().minute }}</span\n >\n <span\n class=\"datetime-input-part time-am-pm\"\n [class.highlighted]=\"highlightedPart() === 2\"\n (pointerdown)=\"highlightPart($event, 2)\"\n >{{ displayedValues().ampm }}</span\n >\n }\n </div>\n\n @if (!disabled) {\n @let tooltipClass =\n inverse\n ? \"tooltip input-tooltip tooltip-bg-white-700 tooltip-text-black-500\"\n : \"tooltip input-tooltip\";\n\n @if (showClear) {\n <button\n class=\"datetime-cancel-button\"\n tabindex=\"-1\"\n ngbTooltip=\"Clear\"\n [openDelay]=\"600\"\n [tooltipClass]=\"tooltipClass\"\n [placement]=\"'top'\"\n [container]=\"'body'\"\n [autoClose]=\"true\"\n #clearButtonTooltip=\"ngbTooltip\"\n (click)=\"clearInput($event)\"\n (pointerdown)=\"closeClearButtonTooltip()\"\n (mouseleave)=\"closeClearButtonTooltip()\"\n >\n <svg-icon class=\"datetime-bg-icon\" name=\"cai-cancel\"></svg-icon>\n </button>\n }\n <svg-icon\n #dropdownIcon\n class=\"datetime-icon datetime-dropdown-icon\"\n (click)=\"togglePopover()\"\n name=\"cai-arrow-secondary-down\"\n ></svg-icon>\n }\n <!-- Error Message -->\n @if (!inTable || isBilling) {\n <div class=\"datetime-error-message\">\n {{\n invalid\n ? (getSuperControl?.errors\n | errorMessage: inputConfig.customErrors)[0]\n : \"\"\n }}\n </div>\n }\n</div>\n\n<!-- Popover for DateTime Pickers -->\n<ng-template #dateTimePopover let-data=\"data\">\n <div\n class=\"datetime-dropdown-holder\"\n [class.datetime-has-stroke]=\"inputConfig.hasStroke\"\n >\n <cai-custom-datetime-pickers\n [calendarType]=\"isDatePicker() ? 'date' : 'time'\"\n [inputConfig]=\"inputConfig\"\n [placeholder]=\"'MM/DD/YY'\"\n [dateTime]=\"dateTime()\"\n (closePopover)=\"onPopoverDateChanged($event)\"\n ></cai-custom-datetime-pickers>\n </div>\n</ng-template>\n\n<ng-template #errorTooltip>\n @if (inTable && invalid && !isInputFocused()) {\n {{ (getSuperControl?.errors | errorMessage: inputConfig.customErrors)[0] }}\n }\n</ng-template>\n", styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important}input:-webkit-autofill:focus{-webkit-text-fill-color:#ffffff!important}input:-moz-autofill,input:-moz-autofill-preview{filter:none}*,*:before,*:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}p,ul,ol,dl,blockquote,figure,pre{margin:0}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{background:none;border:none;padding:0}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle;max-width:100%;height:auto}ul,ol{padding-left:1.5rem;list-style-position:outside}a{color:inherit;text-decoration:inherit}table{border-collapse:collapse;border-spacing:0}:focus:not(:focus-visible){outline:none}.datetime-input-container{--color-text: #2f2f2f;--color-text-negative: #df3c3c;--color-text-heading: #424242;--color-text-subtle: #919191;--color-text-inverse: #ffffff;--color-icon-neutral: #919191;--color-icon-negative: #e66767;--color-icon-positive: #6692f1;--color-icon-inverse: rgba(255, 255, 255, .6980392157);--color-icon-disable: #cccccc;--color-surface-neutral: #eeeeee;--color-surface-neutral-hover: #dadada;--color-surface-neutral-focus: #1d1d1d;--color-surface-positive: #e9effd;--color-surface-positive-hover: #bed0f9;--color-surface-positive-focus: #0b49d1;--color-surface-negative: #fbe9e9;--color-surface-negative-hover: #f4bebe;--color-surface-negative-focus: #c20c0c;--color-surface-disable: #f7f7f7;padding:4px 4px 4px 6px;border-radius:2px;position:relative;display:flex;align-items:center;background-color:var(--color-surface-neutral);transition:background-color .1s cubic-bezier(.46,.03,.51,.95);cursor:text;width:100%;height:26px}.datetime-input-container.datetime-inverse{--color-text: #ffffff;--color-text-negative: #ed9292;--color-text-heading: #ffffff;--color-text-inverse: #2f2f2f;--color-icon-neutral: #aaaaaa;--color-icon-negative: #ed9292;--color-icon-positive: #92b1f5;--color-icon-disable: #6c6c6c;--color-surface-neutral: #424242;--color-surface-neutral-hover: #6c6c6c;--color-surface-neutral-focus: #dadada;--color-surface-positive: rgba(59, 115, 237, .2);--color-surface-positive-hover: #2f519a;--color-surface-positive-focus: #0b49d1;--color-surface-negative: rgba(223, 60, 60, .2);--color-surface-negative-hover: #923030;--color-surface-negative-focus: #c20c0c;--color-surface-disable: rgba(66, 66, 66, .4)}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-icon{color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-separator{background-color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-bg-icon{background-color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus:hover .datetime-bg-icon:hover{background-color:#424242!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus:hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus:hover .datetime-icon:hover{color:#424242!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input{color:var(--color-text-inverse)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input.selected .datetime-input-part{background-color:#91919133}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input.selected .datetime-input-separator{background-color:#91919133}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input .datetime-input-part{color:#0000004d!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input .datetime-input-part.filled{color:#000!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input .datetime-input-part.highlighted{background-color:#91919133;color:#000!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input .datetime-input-separator{color:#0000004d!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date):hover .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-inverse:not(.datetime-has-date):hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse:not(.datetime-has-date):hover .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-inverse.datetime-valid .datetime-input,.datetime-input-container.datetime-inverse.datetime-invalid .datetime-input{color:var(--color-text)!important}.datetime-input-container.datetime-inverse.datetime-valid.datetime-focus .datetime-input,.datetime-input-container.datetime-inverse.datetime-invalid.datetime-focus .datetime-input{color:var(--color-text)}.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-bg-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-bg-icon:hover{background-color:#fff!important}.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-icon:hover{color:#fff!important}.datetime-input-container.datetime-in-table{--color-surface-neutral: transparent;--color-surface-negative: transparent;--color-surface-positive: transparent}.datetime-input-container.datetime-in-table .datetime-dropdown-icon{opacity:0}.datetime-input-container.datetime-in-table.datetime-invalid:not(.datetime-focus):not(:hover):not(.force-invalid) .datetime-input,.datetime-input-container.datetime-in-table.datetime-invalid:not(.datetime-focus):not(:hover):not(.force-invalid) .datetime-label{color:var(--color-text-negative)}.datetime-input-container.datetime-in-table:hover .datetime-dropdown-icon,.datetime-input-container.datetime-in-table.datetime-focus .datetime-dropdown-icon{opacity:1}.datetime-input-container:hover{background-color:var(--color-surface-neutral-hover)}.datetime-input-container:hover .datetime-bg-icon{color:var(--color-surface-neutral-hover)}.datetime-input-container.datetime-focus{background-color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-focus.datetime-in-table:not(.datetime-billing) .datetime-label{opacity:0}.datetime-input-container.datetime-focus:not(.datetime-in-table):not(.datetime-billing) .datetime-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-input-container.datetime-focus.datetime-billing .datetime-label{color:#fff!important}.datetime-input-container.datetime-focus .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-focus .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-focus .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-focus .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-focus .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-focus .datetime-input{color:var(--color-text-inverse);opacity:1;pointer-events:auto}.datetime-input-container.datetime-focus .datetime-input .datetime-input-part{height:18px;color:#ffffffb3}.datetime-input-container.datetime-focus .datetime-input .datetime-input-part.filled{color:#fff}.datetime-input-container.datetime-focus .datetime-input .datetime-input-part.highlighted{background-color:#ffffff4d;color:#fff}.datetime-input-container.datetime-focus .datetime-input .datetime-input-separator{color:#ffffffb3}.datetime-input-container.datetime-popover-open .datetime-dropdown-icon{transform:rotateX(180deg)}.datetime-input-container.datetime-has-text .datetime-input{opacity:1;pointer-events:auto!important}.datetime-input-container.datetime-has-text.datetime-disabled .datetime-input{pointer-events:none!important}.datetime-input-container.datetime-has-text:not(.datetime-in-table):not(.datetime-billing) .datetime-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-input-container.datetime-has-text.datetime-in-table:not(.datetime-billing) .datetime-label{opacity:0}.datetime-input-container.datetime-valid:not(.datetime-disabled){background-color:var(--color-surface-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover{background-color:var(--color-surface-positive-hover)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-bg-icon{background-color:var(--color-icon-positive);color:var(--color-surface-positive-hover)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-bg-icon:hover{background-color:#0b49d1}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus{background-color:var(--color-surface-positive-focus)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-positive-focus)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-separator{background-color:var(--color-icon-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-dropdown-icon,.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-icon{color:var(--color-icon-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-dropdown-icon:hover,.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-icon:hover{color:#0b49d1}.datetime-input-container.datetime-invalid:not(.datetime-disabled){background-color:var(--color-surface-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-error-message{opacity:1;transform:translateY(0)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover{background-color:var(--color-surface-negative-hover)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover .datetime-bg-icon{background-color:var(--color-icon-negative);color:var(--color-surface-negative-hover)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover .datetime-bg-icon:hover{background-color:#c20c0c}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover.datetime-has-text .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date{background-color:var(--color-surface-negative-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-bg-icon,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-negative-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-bg-icon:hover,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-icon,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-icon:hover,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-separator,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-cancel-button,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date){background-color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-error-message{opacity:0}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-separator{background-color:var(--color-icon-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-dropdown-icon,.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-icon{color:var(--color-icon-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-dropdown-icon:hover,.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-icon:hover{color:#c20c0c}.datetime-input-container.datetime-disabled{cursor:default;pointer-events:none}.datetime-input-container.datetime-disabled .datetime-icon,.datetime-input-container.datetime-disabled .datetime-dropdown-icon{cursor:default}.datetime-input-container.datetime-disabled:not(.datetime-in-table){background-color:var(--color-surface-disable)}.datetime-input-container.datetime-disabled.datetime-in-table{background-color:transparent}.datetime-input-container.datetime-disabled .datetime-label{color:var(--color-text-subtle)!important}.datetime-input-container.datetime-disabled .datetime-icon{color:var(--color-icon-disable)}.datetime-input-container.datetime-disabled.datetime-has-text .datetime-icon{color:var(--color-icon-neutral)}.datetime-input-container.datetime-disabled .datetime-separator{background-color:var(--color-icon-neutral)}.datetime-input-container.datetime-disabled .datetime-input{color:var(--color-text)!important}.datetime-input-container.datetime-required .datetime-label:after{content:\" *\";color:var(--color-text-negative)}.datetime-icon-container{display:flex;align-items:center;justify-content:center;gap:4px;width:max-content}.datetime-icon-container.hidden{display:none}.datetime-icon-container .datetime-icon{order:1;cursor:pointer}.datetime-icon-container .datetime-separator{height:14px;width:1px;border-radius:2px;background-color:var(--color-icon-neutral);transition:background-color .1s ease-in-out;opacity:40%;order:2;margin-right:4px}.datetime-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:var(--color-icon-neutral);transition:color .1s ease-in-out,opacity .1s ease-in-out,transform .15s ease-in-out}.datetime-label{position:absolute;display:flex;gap:4px;left:27px;font-size:14px;line-height:18px;font-weight:400;pointer-events:none;padding:.25rem 6px;color:var(--color-text);transition:transform .1s ease-in-out,font-weight .1s ease-in-out,color .1s ease-in-out,font-size .1s ease-in-out,opacity .1s ease-in-out;transform:translateY(0);-webkit-user-select:none;user-select:none}.datetime-icon-hidden .datetime-label{left:0}.datetime-bg-icon{background-color:var(--color-icon-neutral);color:var(--color-surface-neutral);border-radius:1px;height:18px;width:18px;padding:0;display:grid;place-items:center;transition:background-color .1s ease-in-out,color .1s ease-in-out,opacity .1s ease-in-out,transform .1s ease-in-out;transform-box:border-box;transform-origin:center;will-change:transform}.datetime-bg-icon:focus-visible{outline:none}.datetime-bg-icon svg{transition:transform .1s ease-in-out}.datetime-bg-icon:hover{transform:scale(1.2222222222)}.datetime-bg-icon:hover svg{transform:scale(.8181818182)}.datetime-bg-icon:active{transform:scale(1)}.datetime-cancel-button{position:absolute;right:26px;top:4px;opacity:0;transition:opacity .1s ease-in-out;pointer-events:none}.datetime-dropdown-icon{position:absolute;right:4px;top:4px;transform:rotateX(0);cursor:pointer}.datetime-size-22{height:22px!important;padding-left:0}.datetime-size-22 .datetime-bg-icon{height:14px!important;width:14px!important;padding:2px!important;right:22px!important}.datetime-size-22 .datetime-icon-container{height:22px!important;padding-top:2px;padding-bottom:2px;padding-left:4px!important}.datetime-size-22 .datetime-input{padding-top:2px;padding-bottom:2px}.datetime-size-22 .datetime-label{padding-top:2px;padding-bottom:2px;padding-left:0!important}.datetime-size-22 .datetime-icon{height:14px!important;width:14px!important}.datetime-size-22.datetime-has-text .datetime-label,.datetime-size-22.datetime-focus .datetime-label{transform:translateY(-18px)!important}.datetime-error-message{position:absolute;bottom:-16px;right:6px;font-size:11px;font-weight:600;opacity:0;-webkit-user-select:none;user-select:none;transition:opacity .1s ease-in-out,transform .1s ease-in-out;color:var(--color-text-negative);transform:translateY(-10px);pointer-events:none}.datetime-input-listener{opacity:0;pointer-events:none;position:absolute;inset:0}.datetime-billing .datetime-separator{order:0;margin-right:0;margin-left:4px}.datetime-billing .datetime-cancel-button{right:4px}.datetime-billing .datetime-label{left:0;font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-billing .datetime-icon-container{order:2}.datetime-billing .datetime-input{margin-left:auto;width:max-content}.datetime-billing .datetime-error-message{bottom:4px!important;right:32px!important;transform:translateY(0)!important}.datetime-billing.datetime-focus .datetime-error-message,.datetime-billing.datetime-has-text .datetime-error-message{opacity:0!important}.datetime-billing .datetime-dropdown-icon,.datetime-billing:hover .datetime-icon,.datetime-billing.datetime-focus .datetime-icon{opacity:0}.datetime-billing:hover .datetime-dropdown-icon,.datetime-billing.datetime-focus .datetime-dropdown-icon{opacity:1}.datetime-billing.datetime-has-text .datetime-dropdown-icon{opacity:0!important;pointer-events:none!important}.datetime-billing.datetime-has-text:hover .datetime-icon-container,.datetime-billing.datetime-has-text.datetime-focus .datetime-icon-container{pointer-events:none!important}.datetime-billing.datetime-has-text:hover .datetime-icon-container .datetime-icon,.datetime-billing.datetime-has-text.datetime-focus .datetime-icon-container .datetime-icon{opacity:0!important}.datetime-input{font-size:14px;line-height:18px;font-weight:400;width:100%;opacity:0;pointer-events:none;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95);-webkit-user-select:none;user-select:none}.datetime-input .datetime-input-separator{background-color:transparent;transition:color .1s cubic-bezier(.46,.03,.51,.95),background-color .1s cubic-bezier(.46,.03,.51,.95)}.datetime-input .datetime-input-part{position:relative;background-color:transparent;transition:color .1s cubic-bezier(.46,.03,.51,.95),background-color .1s cubic-bezier(.46,.03,.51,.95)}.datetime-input .datetime-input-part.time-am-pm{margin-left:4px}.datetime-input .datetime-input-part:after{content:\"\";inset:0 -3px;position:absolute}.datetime-input.selected .datetime-input-part,.datetime-input.selected .datetime-input-separator{background-color:#ffffff4d}.datetime-input.selected .time-am-pm{margin-left:0!important;padding-left:4px!important}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
7714
|
+
// Modules
|
|
7715
|
+
CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: AngularSvgIconModule }, { kind: "component", type: i1$2.SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "svgClass", "class", "viewBox", "svgAriaLabel", "onSVGLoaded", "svgStyle"] }, { kind: "ngmodule", type: NgbModule }, { kind: "directive", type: i2.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "directive", type: i2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type:
|
|
7716
|
+
// Components
|
|
8050
7717
|
CaCustomDatetimePickersComponent, selector: "cai-custom-datetime-pickers", inputs: ["dateTime", "inputConfig", "calendarType", "placeholder"], outputs: ["closePopover", "onRefocusInput"] }, { kind: "pipe", type:
|
|
8051
|
-
//
|
|
7718
|
+
// Pipes
|
|
8052
7719
|
ErrorMessagePipe, name: "errorMessage" }] });
|
|
8053
7720
|
}
|
|
8054
7721
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CaiInputDatetimePickerComponent, decorators: [{
|
|
8055
7722
|
type: Component,
|
|
8056
|
-
args: [{ selector: 'cai-input-datetime-picker',
|
|
8057
|
-
|
|
7723
|
+
args: [{ selector: 'cai-input-datetime-picker, ca-date-time', providers: [
|
|
7724
|
+
CalendarDateTimePickerService,
|
|
7725
|
+
{
|
|
7726
|
+
provide: NG_VALIDATORS,
|
|
7727
|
+
useExisting: forwardRef(() => CaiInputDatetimePickerComponent),
|
|
7728
|
+
multi: true,
|
|
7729
|
+
},
|
|
7730
|
+
], imports: [
|
|
7731
|
+
// Modules
|
|
8058
7732
|
CommonModule,
|
|
8059
7733
|
FormsModule,
|
|
8060
7734
|
ReactiveFormsModule,
|
|
8061
7735
|
AngularSvgIconModule,
|
|
8062
7736
|
NgbModule,
|
|
8063
|
-
//
|
|
7737
|
+
// Components
|
|
8064
7738
|
CaCustomDatetimePickersComponent,
|
|
8065
|
-
//
|
|
7739
|
+
// Pipes
|
|
8066
7740
|
ErrorMessagePipe,
|
|
8067
|
-
], providers: [CalendarDateTimePickerService], template: "@let inTable = inputConfig?.inTable; @let inverse = inputConfig?.inverse;\n@let size = inputConfig?.size;\n<!-- -->\n@let invalid =\n getSuperControl?.invalid &&\n (getSuperControl?.touched || getSuperControl?.dirty);\n@let valid = getSuperControl?.valid && getSuperControl?.value;\n@let disabled = getSuperControl?.disabled || inputConfig?.isDisabled;\n@let isBilling = inputConfig?.isBilling;\n@let showClear = !disabled && !inputConfig.hideClear;\n@let hasFloatingError = inTable && invalid;\n<!-- Date Time Input -->\n<div\n [id]=\"id\"\n class=\"datetime-input-container\"\n [class]=\"{\n 'datetime-valid': valid && !forceInvalidStyling,\n 'datetime-invalid': invalid || forceInvalidStyling,\n 'datetime-disabled': disabled,\n 'datetime-focus': isFocusInput,\n 'datetime-has-text': getSuperControl?.value,\n 'datetime-required': isRequired && !disabled,\n 'datetime-in-table': inTable,\n 'datetime-inverse': inverse,\n 'datetime-billing': isBilling,\n 'datetime-popover-open': t2.isOpen(),\n 'datetime-size-22': size === 22,\n 'datetime-icon-hidden': inputConfig.isIconHidden,\n }\"\n #t2=\"ngbPopover\"\n [ngbPopover]=\"!disabled ? dateTimePopover : null\"\n [placement]=\"['bottom-start', 'top-start']\"\n [triggers]=\"'manual'\"\n [popoverClass]=\"'datetimepopovermain'\"\n [autoClose]=\"'outside'\"\n [container]=\"'body'\"\n (pointerdown)=\"onPopoverClick($event)\"\n (shown)=\"onPopoverShown()\"\n (hidden)=\"onPopoverHidden()\"\n>\n <div class=\"datetime-label\">\n {{ inputConfig.label }}\n </div>\n\n <div\n #holder1\n [tabindex]=\"disabled ? '-1' : '0'\"\n contenteditable=\"true\"\n (keydown)=\"changeSelection($event)\"\n (input)=\"preventInput($event)\"\n (focus)=\"onEditableFocus($event)\"\n (blur)=\"blurInput()\"\n (paste)=\"onDatePaste($event)\"\n class=\"datetime-input-listener\"\n [ngbTooltip]=\"hasFloatingError ? errorTooltip : null\"\n [container]=\"'body'\"\n [placement]=\"'bottom'\"\n [disableTooltip]=\"isFocusInput\"\n tooltipClass=\"tooltip tooltip-bg-red-500 input-tooltip\"\n ></div>\n\n @if (!inputConfig.isIconHidden) {\n <div class=\"datetime-icon-container\" (pointerdown)=\"openPopover($event)\">\n <svg-icon\n class=\"datetime-icon\"\n [name]=\"\n inputConfig.placeholderIcon === 'date' ? 'cai-date' : 'cai-time'\n \"\n ></svg-icon>\n <div class=\"datetime-separator\"></div>\n </div>\n }\n <div class=\"datetime-input\">\n <span\n #span1\n class=\"main\"\n [ngClass]=\"{\n 'reset-selection-color': !isFocusInput,\n }\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? 'mm' : 'HH'\"\n ></span>\n <span>\n <div\n class=\"border-picker\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? '/' : ':'\"\n ></div>\n </span>\n <span\n #span2\n class=\"main\"\n [ngClass]=\"{\n 'reset-selection-color': !isFocusInput,\n }\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? 'dd' : 'MM'\"\n ></span>\n <span>\n <div\n class=\"border-picker\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? '/' : ' '\"\n ></div>\n </span>\n <span\n #span3\n class=\"main\"\n [class.time-am-pm]=\"inputConfig.name !== 'datepicker'\"\n [ngClass]=\"{\n 'reset-selection-color': !isFocusInput,\n }\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? 'yy' : 'AM'\"\n ></span>\n </div>\n\n @if (!disabled) {\n @let tooltipClass =\n inverse\n ? \"tooltip input-tooltip tooltip-bg-white-700 tooltip-text-black-500\"\n : \"tooltip input-tooltip\";\n\n @if (showClear) {\n <button\n class=\"datetime-cancel-button\"\n tabindex=\"-1\"\n ngbTooltip=\"Clear\"\n [openDelay]=\"600\"\n [tooltipClass]=\"tooltipClass\"\n [placement]=\"'top'\"\n [container]=\"'body'\"\n [autoClose]=\"true\"\n #closeTooltip=\"ngbTooltip\"\n (click)=\"clearInput($event)\"\n (pointerdown)=\"handleCloseTooltip()\"\n (mouseleave)=\"handleCloseTooltip()\"\n >\n <svg-icon class=\"datetime-bg-icon\" name=\"cai-cancel\"></svg-icon>\n </button>\n }\n <svg-icon\n class=\"datetime-icon datetime-dropdown-icon\"\n (pointerdown)=\"openPopover($event)\"\n name=\"cai-arrow-secondary-down\"\n ></svg-icon>\n }\n <!-- Error Message -->\n @if (!inTable || isBilling) {\n <div class=\"datetime-error-message\">\n {{\n invalid\n ? (getSuperControl?.errors\n | errorMessage: inputConfig.customErrors)[0]\n : \"\"\n }}\n </div>\n }\n</div>\n\n<!-- Popover for DateTime Pickers -->\n<ng-template #dateTimePopover let-data=\"data\">\n <div\n class=\"datetime-dropdown-holder\"\n [class.datetime-has-stroke]=\"inputConfig.hasStroke\"\n >\n <cai-custom-datetime-pickers\n [calendarType]=\"\n inputConfig.name === 'datepicker' ||\n inputConfig.name === 'datepickerBankCard'\n ? 'date'\n : 'time'\n \"\n [inputConfig]=\"inputConfig\"\n [placeholder]=\"'MM/DD/YY'\"\n [dateTime]=\"dateTimeInputDate\"\n (closePopover)=\"closePopover($event)\"\n ></cai-custom-datetime-pickers>\n </div>\n</ng-template>\n\n<ng-template #errorTooltip>\n @if (inTable && invalid && !isFocusInput) {\n {{ (getSuperControl?.errors | errorMessage: inputConfig.customErrors)[0] }}\n }\n</ng-template>\n", styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important}input:-webkit-autofill:focus{-webkit-text-fill-color:#ffffff!important}input:-moz-autofill,input:-moz-autofill-preview{filter:none}*,*:before,*:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}p,ul,ol,dl,blockquote,figure,pre{margin:0}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{background:none;border:none;padding:0}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle;max-width:100%;height:auto}ul,ol{padding-left:1.5rem;list-style-position:outside}a{color:inherit;text-decoration:inherit}table{border-collapse:collapse;border-spacing:0}:focus:not(:focus-visible){outline:none}.datetime-input-container{--color-text: #2f2f2f;--color-text-negative: #df3c3c;--color-text-heading: #424242;--color-text-subtle: #919191;--color-text-inverse: #ffffff;--color-icon-neutral: #919191;--color-icon-negative: #e66767;--color-icon-positive: #6692f1;--color-icon-inverse: rgba(255, 255, 255, .6980392157);--color-icon-disable: #cccccc;--color-surface-neutral: #eeeeee;--color-surface-neutral-hover: #dadada;--color-surface-neutral-focus: #1d1d1d;--color-surface-positive: #e9effd;--color-surface-positive-hover: #bed0f9;--color-surface-positive-focus: #0b49d1;--color-surface-negative: #fbe9e9;--color-surface-negative-hover: #f4bebe;--color-surface-negative-focus: #c20c0c;--color-surface-disable: #f7f7f7;padding:4px 4px 4px 6px;border-radius:2px;position:relative;display:flex;align-items:center;background-color:var(--color-surface-neutral);transition:background-color .1s cubic-bezier(.46,.03,.51,.95);cursor:pointer;width:100%}.datetime-input-container.datetime-inverse{--color-text: #ffffff;--color-text-negative: #ed9292;--color-text-heading: #ffffff;--color-text-inverse: #2f2f2f;--color-icon-neutral: #aaaaaa;--color-icon-negative: #ed9292;--color-icon-positive: #92b1f5;--color-icon-disable: #6c6c6c;--color-surface-neutral: #424242;--color-surface-neutral-hover: #6c6c6c;--color-surface-neutral-focus: #dadada;--color-surface-positive: rgba(59, 115, 237, .2);--color-surface-positive-hover: #2f519a;--color-surface-positive-focus: #0b49d1;--color-surface-negative: rgba(223, 60, 60, .2);--color-surface-negative-hover: #923030;--color-surface-negative-focus: #c20c0c;--color-surface-disable: rgba(66, 66, 66, .4)}.datetime-input-container.datetime-inverse:not(.datetime-has-text) .datetime-input{color:var(--color-text-inverse)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-text) .main::selection{color:var(--color-text-inverse)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-text).datetime-focus .datetime-icon{color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-text).datetime-focus .datetime-separator{background-color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse.datetime-valid.datetime-focus .datetime-input,.datetime-input-container.datetime-inverse.datetime-invalid.datetime-focus .datetime-input{color:var(--color-text)}.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-bg-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-bg-icon:hover{background-color:#fff!important}.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-icon:hover{color:#fff!important}.datetime-input-container.datetime-in-table{--color-surface-neutral: transparent;--color-surface-negative: transparent;--color-surface-positive: transparent}.datetime-input-container.datetime-in-table .datetime-dropdown-icon{opacity:0}.datetime-input-container.datetime-in-table.datetime-invalid:not(.datetime-focus):not(:hover) .datetime-input,.datetime-input-container.datetime-in-table.datetime-invalid:not(.datetime-focus):not(:hover) .datetime-label{color:var(--color-text-negative)}.datetime-input-container.datetime-in-table:hover .datetime-dropdown-icon,.datetime-input-container.datetime-in-table.datetime-focus .datetime-dropdown-icon{opacity:1}.datetime-input-container:hover{background-color:var(--color-surface-neutral-hover)}.datetime-input-container:hover .datetime-bg-icon{color:var(--color-surface-neutral-hover)}.datetime-input-container.datetime-focus{background-color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-focus.datetime-in-table:not(.datetime-billing) .datetime-label{opacity:0}.datetime-input-container.datetime-focus:not(.datetime-in-table):not(.datetime-billing) .datetime-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-input-container.datetime-focus.datetime-billing .datetime-label{color:#fff!important}.datetime-input-container.datetime-focus .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-focus .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-focus .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-focus .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-focus .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-focus .datetime-input{color:var(--color-text-inverse);opacity:1;pointer-events:auto}.datetime-input-container.datetime-popover-open .datetime-dropdown-icon{transform:rotateX(180deg)}.datetime-input-container.datetime-has-text .datetime-input{opacity:1;pointer-events:auto}.datetime-input-container.datetime-has-text.datetime-disabled .datetime-input{pointer-events:none!important}.datetime-input-container.datetime-has-text:not(.datetime-in-table):not(.datetime-billing) .datetime-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-input-container.datetime-has-text.datetime-in-table:not(.datetime-billing) .datetime-label{opacity:0}.datetime-input-container.datetime-valid:not(.datetime-disabled){background-color:var(--color-surface-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover{background-color:var(--color-surface-positive-hover)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-bg-icon{background-color:var(--color-icon-positive);color:var(--color-surface-positive-hover)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-bg-icon:hover{background-color:#0b49d1}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus{background-color:var(--color-surface-positive-focus)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-positive-focus)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-separator{background-color:var(--color-icon-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-dropdown-icon,.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-icon{color:var(--color-icon-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-dropdown-icon:hover,.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-icon:hover{color:#0b49d1}.datetime-input-container.datetime-invalid:not(.datetime-disabled){background-color:var(--color-surface-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-error-message{opacity:1;transform:translateY(0)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover{background-color:var(--color-surface-negative-hover)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover .datetime-bg-icon{background-color:var(--color-icon-negative);color:var(--color-surface-negative-hover)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover .datetime-bg-icon:hover{background-color:#c20c0c}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover.datetime-has-text .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text{background-color:var(--color-surface-negative-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-negative-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text){background-color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-separator{background-color:var(--color-icon-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-dropdown-icon,.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-icon{color:var(--color-icon-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-dropdown-icon:hover,.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-icon:hover{color:#c20c0c}.datetime-input-container.datetime-disabled{cursor:default;pointer-events:none}.datetime-input-container.datetime-disabled:not(.datetime-in-table){background-color:var(--color-surface-disable)}.datetime-input-container.datetime-disabled.datetime-in-table{background-color:transparent}.datetime-input-container.datetime-disabled .datetime-label{color:var(--color-text-subtle)!important}.datetime-input-container.datetime-disabled .datetime-icon{color:var(--color-icon-disable)}.datetime-input-container.datetime-disabled.datetime-has-text .datetime-icon{color:var(--color-icon-neutral)}.datetime-input-container.datetime-disabled .datetime-separator{background-color:var(--color-icon-neutral)}.datetime-input-container.datetime-disabled .datetime-input{color:var(--color-text)!important}.datetime-input-container.datetime-required .datetime-label:after{content:\" *\";color:var(--color-text-negative)}.datetime-icon-container{display:flex;align-items:center;justify-content:center;gap:4px;width:max-content}.datetime-icon-container.hidden{display:none}.datetime-icon-container .datetime-icon{order:1}.datetime-icon-container .datetime-separator{height:14px;width:1px;border-radius:2px;background-color:var(--color-icon-neutral);transition:background-color .2s ease-in-out;opacity:40%;order:2;margin-right:4px}.datetime-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:var(--color-icon-neutral);transition:color .2s ease-in-out,opacity .2s ease-in-out,transform .2s ease-in-out}.datetime-icon:hover{color:#424242}.datetime-label{position:absolute;display:flex;gap:4px;left:27px;font-size:14px;line-height:18px;font-weight:400;pointer-events:none;padding:.25rem 6px;color:var(--color-text);transition:transform .1s ease-in-out,font-weight .1s ease-in-out,color .1s ease-in-out,font-size .1s ease-in-out,opacity .1s ease-in-out;transform:translateY(0);-webkit-user-select:none;user-select:none}.datetime-icon-hidden .datetime-label{left:0}.datetime-bg-icon{background-color:var(--color-icon-neutral);color:var(--color-surface-neutral);border-radius:1px;height:18px;width:18px;padding:0;display:grid;place-items:center;transition:background-color .2s ease-in-out,color .2s ease-in-out,opacity .2s ease-in-out,transform .1s ease-in-out;transform-box:border-box;transform-origin:center;will-change:transform}.datetime-bg-icon:focus-visible{outline:none}.datetime-bg-icon svg{transition:transform .1s ease-in-out}.datetime-bg-icon:hover{transform:scale(1.2222222222)}.datetime-bg-icon:hover svg{transform:scale(.8181818182)}.datetime-bg-icon:active{transform:scale(1)}.datetime-cancel-button{position:absolute;right:26px;top:4px;opacity:0;transition:opacity .2s ease-in-out;pointer-events:none}.datetime-dropdown-icon{position:absolute;right:4px;top:4px;transform:rotateX(0)}.datetime-dropdown-icon:hover{color:#424242}.datetime-input{display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--color-text);text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;font-family:Montserrat;font-size:14px;font-style:normal;font-weight:400;line-height:18px;opacity:0;pointer-events:none;cursor:text;transition:opacity .2s ease-in-out,color .2s ease-in-out}.datetime-input .main{border-radius:1px}.datetime-input .main.time-am-pm{margin-left:4px}.datetime-size-22{height:22px;padding-left:0}.datetime-size-22 .datetime-bg-icon{height:14px!important;width:14px!important;padding:2px!important;right:22px!important}.datetime-size-22 .datetime-icon-container{height:22px!important;padding-top:2px;padding-bottom:2px;padding-left:4px!important}.datetime-size-22 .datetime-input{padding-top:2px;padding-bottom:2px}.datetime-size-22 .datetime-label{padding-top:2px;padding-bottom:2px;padding-left:0!important}.datetime-size-22 .datetime-icon{height:14px!important;width:14px!important}.datetime-size-22.datetime-has-text .datetime-label,.datetime-size-22.datetime-focus .datetime-label{transform:translateY(-18px)!important}.datetime-error-message{position:absolute;bottom:-16px;right:6px;font-size:11px;font-weight:600;opacity:0;-webkit-user-select:none;user-select:none;transition:opacity .2s ease-in-out,transform .2s ease-in-out;color:var(--color-text-negative);transform:translateY(-10px);pointer-events:none}.datetime-in-table .datetime-input-listener{width:100%;height:100%!important;position:absolute;bottom:0;left:0;opacity:0}.datetime-input-listener{caret-color:transparent;height:12px!important}.main::selection{background-color:#ffffff4d;border-radius:1px}.datetime-billing .datetime-separator{order:0;margin-right:0;margin-left:4px}.datetime-billing .datetime-cancel-button{right:4px}.datetime-billing .datetime-label{left:0;font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-billing .datetime-icon-container{order:2}.datetime-billing .datetime-input{margin-left:auto}.datetime-billing .datetime-error-message{bottom:4px!important;right:32px!important;transform:translateY(0)!important}.datetime-billing.datetime-focus .datetime-error-message,.datetime-billing.datetime-has-text .datetime-error-message{opacity:0!important}.datetime-billing .datetime-dropdown-icon,.datetime-billing:hover .datetime-icon,.datetime-billing.datetime-focus .datetime-icon{opacity:0}.datetime-billing:hover .datetime-dropdown-icon,.datetime-billing.datetime-focus .datetime-dropdown-icon{opacity:1}.datetime-billing.datetime-has-text .datetime-dropdown-icon{opacity:0!important;pointer-events:none!important}.datetime-billing.datetime-has-text:hover .datetime-icon-container,.datetime-billing.datetime-has-text.datetime-focus .datetime-icon-container{pointer-events:none!important}.datetime-billing.datetime-has-text:hover .datetime-icon-container .datetime-icon,.datetime-billing.datetime-has-text.datetime-focus .datetime-icon-container .datetime-icon{opacity:0!important}\n"] }]
|
|
8068
|
-
}], ctorParameters: () => [
|
|
8069
|
-
|
|
8070
|
-
|
|
7741
|
+
], template: "@let inTable = inputConfig?.inTable; @let inverse = inputConfig?.inverse;\n@let size = inputConfig?.size;\n@let invalid =\n getSuperControl?.invalid &&\n (getSuperControl?.touched || getSuperControl?.dirty);\n@let valid = getSuperControl?.valid && getSuperControl?.value;\n@let disabled = getSuperControl?.disabled || inputConfig?.isDisabled;\n@let isBilling = inputConfig?.isBilling;\n@let showClear = !disabled && !inputConfig.hideClear;\n@let hasFloatingError = inTable && invalid;\n\n<div\n [id]=\"id\"\n class=\"datetime-input-container\"\n [class]=\"{\n 'datetime-valid': valid && !forceInvalidStyling,\n 'datetime-invalid': invalid || forceInvalidStyling,\n 'datetime-disabled': disabled,\n 'datetime-focus': isInputFocused(),\n 'datetime-has-text': !!currentValue(),\n 'datetime-has-date': hasDate(),\n 'datetime-required': isRequired && !disabled,\n 'datetime-in-table': inTable,\n 'datetime-inverse': inverse,\n 'datetime-billing': isBilling,\n 'datetime-popover-open': mainPopover.isOpen(),\n 'datetime-size-22': size === 22,\n 'datetime-icon-hidden': inputConfig.isIconHidden,\n 'force-invalid': forceInvalidStyling,\n }\"\n #mainPopover=\"ngbPopover\"\n [ngbPopover]=\"!disabled ? dateTimePopover : null\"\n [placement]=\"['bottom-start', 'top-start']\"\n [triggers]=\"'manual'\"\n [popoverClass]=\"'datetimepopovermain'\"\n [autoClose]=\"'outside'\"\n [container]=\"'body'\"\n (mouseenter)=\"hasFloatingError && errorTooltipContainer.open()\"\n (mouseleave)=\"hasFloatingError && errorTooltipContainer.close()\"\n (pointerdown)=\"focusInput($event)\"\n (dblclick)=\"onInputSelect($event)\"\n>\n <div class=\"datetime-label\">\n {{ inputConfig.label }}\n </div>\n\n <input\n #inputListener\n [id]=\"id\"\n [value]=\"currentValue() ?? ''\"\n [tabindex]=\"disabled ? '-1' : '0'\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur()\"\n (keydown)=\"onKeyDown($event)\"\n (input)=\"onInputChange($event)\"\n (paste)=\"onInputPaste($event)\"\n class=\"datetime-input-listener\"\n #errorTooltipContainer=\"ngbTooltip\"\n [disabled]=\"disabled\"\n [ngbTooltip]=\"hasFloatingError ? errorTooltip : null\"\n [container]=\"'body'\"\n [placement]=\"'bottom'\"\n [triggers]=\"'manual'\"\n [disableTooltip]=\"isInputFocused()\"\n tooltipClass=\"tooltip tooltip-bg-red-500 input-tooltip\"\n />\n\n @if (!inputConfig.isIconHidden) {\n <div\n #iconContainer\n class=\"datetime-icon-container\"\n (click)=\"togglePopover()\"\n >\n <svg-icon\n class=\"datetime-icon\"\n [name]=\"\n inputConfig.placeholderIcon === 'date' ? 'cai-date' : 'cai-time'\n \"\n ></svg-icon>\n <div class=\"datetime-separator\"></div>\n </div>\n }\n\n <div class=\"datetime-input\" [class.selected]=\"isInputSelected()\">\n @if (isDatePicker()) {\n <span\n class=\"datetime-input-part\"\n [class.highlighted]=\"highlightedPart() === 0\"\n [class.filled]=\"displayedValues().month !== 'MM'\"\n (pointerdown)=\"highlightPart($event, 0)\"\n >{{ displayedValues().month }}</span\n >\n <span class=\"datetime-input-separator\">/</span>\n <span\n class=\"datetime-input-part\"\n [class.highlighted]=\"highlightedPart() === 1\"\n [class.filled]=\"displayedValues().day !== 'DD'\"\n (pointerdown)=\"highlightPart($event, 1)\"\n >{{ displayedValues().day }}</span\n >\n <span class=\"datetime-input-separator\">/</span>\n <span\n class=\"datetime-input-part\"\n [class.highlighted]=\"highlightedPart() === 2\"\n [class.filled]=\"displayedValues().year !== 'YY'\"\n (pointerdown)=\"highlightPart($event, 2)\"\n >{{ displayedValues().year }}</span\n >\n } @else {\n <span\n class=\"datetime-input-part\"\n [class.highlighted]=\"highlightedPart() === 0\"\n [class.filled]=\"displayedValues().hour !== 'HH'\"\n (pointerdown)=\"highlightPart($event, 0)\"\n >{{ displayedValues().hour }}</span\n >\n <span class=\"datetime-input-separator\">:</span>\n <span\n class=\"datetime-input-part\"\n [class.highlighted]=\"highlightedPart() === 1\"\n [class.filled]=\"displayedValues().minute !== 'MM'\"\n (pointerdown)=\"highlightPart($event, 1)\"\n >{{ displayedValues().minute }}</span\n >\n <span\n class=\"datetime-input-part time-am-pm\"\n [class.highlighted]=\"highlightedPart() === 2\"\n (pointerdown)=\"highlightPart($event, 2)\"\n >{{ displayedValues().ampm }}</span\n >\n }\n </div>\n\n @if (!disabled) {\n @let tooltipClass =\n inverse\n ? \"tooltip input-tooltip tooltip-bg-white-700 tooltip-text-black-500\"\n : \"tooltip input-tooltip\";\n\n @if (showClear) {\n <button\n class=\"datetime-cancel-button\"\n tabindex=\"-1\"\n ngbTooltip=\"Clear\"\n [openDelay]=\"600\"\n [tooltipClass]=\"tooltipClass\"\n [placement]=\"'top'\"\n [container]=\"'body'\"\n [autoClose]=\"true\"\n #clearButtonTooltip=\"ngbTooltip\"\n (click)=\"clearInput($event)\"\n (pointerdown)=\"closeClearButtonTooltip()\"\n (mouseleave)=\"closeClearButtonTooltip()\"\n >\n <svg-icon class=\"datetime-bg-icon\" name=\"cai-cancel\"></svg-icon>\n </button>\n }\n <svg-icon\n #dropdownIcon\n class=\"datetime-icon datetime-dropdown-icon\"\n (click)=\"togglePopover()\"\n name=\"cai-arrow-secondary-down\"\n ></svg-icon>\n }\n <!-- Error Message -->\n @if (!inTable || isBilling) {\n <div class=\"datetime-error-message\">\n {{\n invalid\n ? (getSuperControl?.errors\n | errorMessage: inputConfig.customErrors)[0]\n : \"\"\n }}\n </div>\n }\n</div>\n\n<!-- Popover for DateTime Pickers -->\n<ng-template #dateTimePopover let-data=\"data\">\n <div\n class=\"datetime-dropdown-holder\"\n [class.datetime-has-stroke]=\"inputConfig.hasStroke\"\n >\n <cai-custom-datetime-pickers\n [calendarType]=\"isDatePicker() ? 'date' : 'time'\"\n [inputConfig]=\"inputConfig\"\n [placeholder]=\"'MM/DD/YY'\"\n [dateTime]=\"dateTime()\"\n (closePopover)=\"onPopoverDateChanged($event)\"\n ></cai-custom-datetime-pickers>\n </div>\n</ng-template>\n\n<ng-template #errorTooltip>\n @if (inTable && invalid && !isInputFocused()) {\n {{ (getSuperControl?.errors | errorMessage: inputConfig.customErrors)[0] }}\n }\n</ng-template>\n", styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important}input:-webkit-autofill:focus{-webkit-text-fill-color:#ffffff!important}input:-moz-autofill,input:-moz-autofill-preview{filter:none}*,*:before,*:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}p,ul,ol,dl,blockquote,figure,pre{margin:0}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{background:none;border:none;padding:0}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle;max-width:100%;height:auto}ul,ol{padding-left:1.5rem;list-style-position:outside}a{color:inherit;text-decoration:inherit}table{border-collapse:collapse;border-spacing:0}:focus:not(:focus-visible){outline:none}.datetime-input-container{--color-text: #2f2f2f;--color-text-negative: #df3c3c;--color-text-heading: #424242;--color-text-subtle: #919191;--color-text-inverse: #ffffff;--color-icon-neutral: #919191;--color-icon-negative: #e66767;--color-icon-positive: #6692f1;--color-icon-inverse: rgba(255, 255, 255, .6980392157);--color-icon-disable: #cccccc;--color-surface-neutral: #eeeeee;--color-surface-neutral-hover: #dadada;--color-surface-neutral-focus: #1d1d1d;--color-surface-positive: #e9effd;--color-surface-positive-hover: #bed0f9;--color-surface-positive-focus: #0b49d1;--color-surface-negative: #fbe9e9;--color-surface-negative-hover: #f4bebe;--color-surface-negative-focus: #c20c0c;--color-surface-disable: #f7f7f7;padding:4px 4px 4px 6px;border-radius:2px;position:relative;display:flex;align-items:center;background-color:var(--color-surface-neutral);transition:background-color .1s cubic-bezier(.46,.03,.51,.95);cursor:text;width:100%;height:26px}.datetime-input-container.datetime-inverse{--color-text: #ffffff;--color-text-negative: #ed9292;--color-text-heading: #ffffff;--color-text-inverse: #2f2f2f;--color-icon-neutral: #aaaaaa;--color-icon-negative: #ed9292;--color-icon-positive: #92b1f5;--color-icon-disable: #6c6c6c;--color-surface-neutral: #424242;--color-surface-neutral-hover: #6c6c6c;--color-surface-neutral-focus: #dadada;--color-surface-positive: rgba(59, 115, 237, .2);--color-surface-positive-hover: #2f519a;--color-surface-positive-focus: #0b49d1;--color-surface-negative: rgba(223, 60, 60, .2);--color-surface-negative-hover: #923030;--color-surface-negative-focus: #c20c0c;--color-surface-disable: rgba(66, 66, 66, .4)}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-icon{color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-separator{background-color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-bg-icon{background-color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus:hover .datetime-bg-icon:hover{background-color:#424242!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus:hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus:hover .datetime-icon:hover{color:#424242!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input{color:var(--color-text-inverse)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input.selected .datetime-input-part{background-color:#91919133}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input.selected .datetime-input-separator{background-color:#91919133}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input .datetime-input-part{color:#0000004d!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input .datetime-input-part.filled{color:#000!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input .datetime-input-part.highlighted{background-color:#91919133;color:#000!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input .datetime-input-separator{color:#0000004d!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date):hover .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-inverse:not(.datetime-has-date):hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse:not(.datetime-has-date):hover .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-inverse.datetime-valid .datetime-input,.datetime-input-container.datetime-inverse.datetime-invalid .datetime-input{color:var(--color-text)!important}.datetime-input-container.datetime-inverse.datetime-valid.datetime-focus .datetime-input,.datetime-input-container.datetime-inverse.datetime-invalid.datetime-focus .datetime-input{color:var(--color-text)}.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-bg-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-bg-icon:hover{background-color:#fff!important}.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-icon:hover{color:#fff!important}.datetime-input-container.datetime-in-table{--color-surface-neutral: transparent;--color-surface-negative: transparent;--color-surface-positive: transparent}.datetime-input-container.datetime-in-table .datetime-dropdown-icon{opacity:0}.datetime-input-container.datetime-in-table.datetime-invalid:not(.datetime-focus):not(:hover):not(.force-invalid) .datetime-input,.datetime-input-container.datetime-in-table.datetime-invalid:not(.datetime-focus):not(:hover):not(.force-invalid) .datetime-label{color:var(--color-text-negative)}.datetime-input-container.datetime-in-table:hover .datetime-dropdown-icon,.datetime-input-container.datetime-in-table.datetime-focus .datetime-dropdown-icon{opacity:1}.datetime-input-container:hover{background-color:var(--color-surface-neutral-hover)}.datetime-input-container:hover .datetime-bg-icon{color:var(--color-surface-neutral-hover)}.datetime-input-container.datetime-focus{background-color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-focus.datetime-in-table:not(.datetime-billing) .datetime-label{opacity:0}.datetime-input-container.datetime-focus:not(.datetime-in-table):not(.datetime-billing) .datetime-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-input-container.datetime-focus.datetime-billing .datetime-label{color:#fff!important}.datetime-input-container.datetime-focus .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-focus .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-focus .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-focus .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-focus .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-focus .datetime-input{color:var(--color-text-inverse);opacity:1;pointer-events:auto}.datetime-input-container.datetime-focus .datetime-input .datetime-input-part{height:18px;color:#ffffffb3}.datetime-input-container.datetime-focus .datetime-input .datetime-input-part.filled{color:#fff}.datetime-input-container.datetime-focus .datetime-input .datetime-input-part.highlighted{background-color:#ffffff4d;color:#fff}.datetime-input-container.datetime-focus .datetime-input .datetime-input-separator{color:#ffffffb3}.datetime-input-container.datetime-popover-open .datetime-dropdown-icon{transform:rotateX(180deg)}.datetime-input-container.datetime-has-text .datetime-input{opacity:1;pointer-events:auto!important}.datetime-input-container.datetime-has-text.datetime-disabled .datetime-input{pointer-events:none!important}.datetime-input-container.datetime-has-text:not(.datetime-in-table):not(.datetime-billing) .datetime-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-input-container.datetime-has-text.datetime-in-table:not(.datetime-billing) .datetime-label{opacity:0}.datetime-input-container.datetime-valid:not(.datetime-disabled){background-color:var(--color-surface-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover{background-color:var(--color-surface-positive-hover)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-bg-icon{background-color:var(--color-icon-positive);color:var(--color-surface-positive-hover)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-bg-icon:hover{background-color:#0b49d1}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus{background-color:var(--color-surface-positive-focus)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-positive-focus)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-separator{background-color:var(--color-icon-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-dropdown-icon,.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-icon{color:var(--color-icon-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-dropdown-icon:hover,.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-icon:hover{color:#0b49d1}.datetime-input-container.datetime-invalid:not(.datetime-disabled){background-color:var(--color-surface-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-error-message{opacity:1;transform:translateY(0)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover{background-color:var(--color-surface-negative-hover)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover .datetime-bg-icon{background-color:var(--color-icon-negative);color:var(--color-surface-negative-hover)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover .datetime-bg-icon:hover{background-color:#c20c0c}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover.datetime-has-text .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date{background-color:var(--color-surface-negative-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-bg-icon,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-negative-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-bg-icon:hover,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-icon,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-icon:hover,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-separator,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-cancel-button,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date){background-color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-error-message{opacity:0}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-separator{background-color:var(--color-icon-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-dropdown-icon,.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-icon{color:var(--color-icon-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-dropdown-icon:hover,.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-icon:hover{color:#c20c0c}.datetime-input-container.datetime-disabled{cursor:default;pointer-events:none}.datetime-input-container.datetime-disabled .datetime-icon,.datetime-input-container.datetime-disabled .datetime-dropdown-icon{cursor:default}.datetime-input-container.datetime-disabled:not(.datetime-in-table){background-color:var(--color-surface-disable)}.datetime-input-container.datetime-disabled.datetime-in-table{background-color:transparent}.datetime-input-container.datetime-disabled .datetime-label{color:var(--color-text-subtle)!important}.datetime-input-container.datetime-disabled .datetime-icon{color:var(--color-icon-disable)}.datetime-input-container.datetime-disabled.datetime-has-text .datetime-icon{color:var(--color-icon-neutral)}.datetime-input-container.datetime-disabled .datetime-separator{background-color:var(--color-icon-neutral)}.datetime-input-container.datetime-disabled .datetime-input{color:var(--color-text)!important}.datetime-input-container.datetime-required .datetime-label:after{content:\" *\";color:var(--color-text-negative)}.datetime-icon-container{display:flex;align-items:center;justify-content:center;gap:4px;width:max-content}.datetime-icon-container.hidden{display:none}.datetime-icon-container .datetime-icon{order:1;cursor:pointer}.datetime-icon-container .datetime-separator{height:14px;width:1px;border-radius:2px;background-color:var(--color-icon-neutral);transition:background-color .1s ease-in-out;opacity:40%;order:2;margin-right:4px}.datetime-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:var(--color-icon-neutral);transition:color .1s ease-in-out,opacity .1s ease-in-out,transform .15s ease-in-out}.datetime-label{position:absolute;display:flex;gap:4px;left:27px;font-size:14px;line-height:18px;font-weight:400;pointer-events:none;padding:.25rem 6px;color:var(--color-text);transition:transform .1s ease-in-out,font-weight .1s ease-in-out,color .1s ease-in-out,font-size .1s ease-in-out,opacity .1s ease-in-out;transform:translateY(0);-webkit-user-select:none;user-select:none}.datetime-icon-hidden .datetime-label{left:0}.datetime-bg-icon{background-color:var(--color-icon-neutral);color:var(--color-surface-neutral);border-radius:1px;height:18px;width:18px;padding:0;display:grid;place-items:center;transition:background-color .1s ease-in-out,color .1s ease-in-out,opacity .1s ease-in-out,transform .1s ease-in-out;transform-box:border-box;transform-origin:center;will-change:transform}.datetime-bg-icon:focus-visible{outline:none}.datetime-bg-icon svg{transition:transform .1s ease-in-out}.datetime-bg-icon:hover{transform:scale(1.2222222222)}.datetime-bg-icon:hover svg{transform:scale(.8181818182)}.datetime-bg-icon:active{transform:scale(1)}.datetime-cancel-button{position:absolute;right:26px;top:4px;opacity:0;transition:opacity .1s ease-in-out;pointer-events:none}.datetime-dropdown-icon{position:absolute;right:4px;top:4px;transform:rotateX(0);cursor:pointer}.datetime-size-22{height:22px!important;padding-left:0}.datetime-size-22 .datetime-bg-icon{height:14px!important;width:14px!important;padding:2px!important;right:22px!important}.datetime-size-22 .datetime-icon-container{height:22px!important;padding-top:2px;padding-bottom:2px;padding-left:4px!important}.datetime-size-22 .datetime-input{padding-top:2px;padding-bottom:2px}.datetime-size-22 .datetime-label{padding-top:2px;padding-bottom:2px;padding-left:0!important}.datetime-size-22 .datetime-icon{height:14px!important;width:14px!important}.datetime-size-22.datetime-has-text .datetime-label,.datetime-size-22.datetime-focus .datetime-label{transform:translateY(-18px)!important}.datetime-error-message{position:absolute;bottom:-16px;right:6px;font-size:11px;font-weight:600;opacity:0;-webkit-user-select:none;user-select:none;transition:opacity .1s ease-in-out,transform .1s ease-in-out;color:var(--color-text-negative);transform:translateY(-10px);pointer-events:none}.datetime-input-listener{opacity:0;pointer-events:none;position:absolute;inset:0}.datetime-billing .datetime-separator{order:0;margin-right:0;margin-left:4px}.datetime-billing .datetime-cancel-button{right:4px}.datetime-billing .datetime-label{left:0;font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-billing .datetime-icon-container{order:2}.datetime-billing .datetime-input{margin-left:auto;width:max-content}.datetime-billing .datetime-error-message{bottom:4px!important;right:32px!important;transform:translateY(0)!important}.datetime-billing.datetime-focus .datetime-error-message,.datetime-billing.datetime-has-text .datetime-error-message{opacity:0!important}.datetime-billing .datetime-dropdown-icon,.datetime-billing:hover .datetime-icon,.datetime-billing.datetime-focus .datetime-icon{opacity:0}.datetime-billing:hover .datetime-dropdown-icon,.datetime-billing.datetime-focus .datetime-dropdown-icon{opacity:1}.datetime-billing.datetime-has-text .datetime-dropdown-icon{opacity:0!important;pointer-events:none!important}.datetime-billing.datetime-has-text:hover .datetime-icon-container,.datetime-billing.datetime-has-text.datetime-focus .datetime-icon-container{pointer-events:none!important}.datetime-billing.datetime-has-text:hover .datetime-icon-container .datetime-icon,.datetime-billing.datetime-has-text.datetime-focus .datetime-icon-container .datetime-icon{opacity:0!important}.datetime-input{font-size:14px;line-height:18px;font-weight:400;width:100%;opacity:0;pointer-events:none;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95);-webkit-user-select:none;user-select:none}.datetime-input .datetime-input-separator{background-color:transparent;transition:color .1s cubic-bezier(.46,.03,.51,.95),background-color .1s cubic-bezier(.46,.03,.51,.95)}.datetime-input .datetime-input-part{position:relative;background-color:transparent;transition:color .1s cubic-bezier(.46,.03,.51,.95),background-color .1s cubic-bezier(.46,.03,.51,.95)}.datetime-input .datetime-input-part.time-am-pm{margin-left:4px}.datetime-input .datetime-input-part:after{content:\"\";inset:0 -3px;position:absolute}.datetime-input.selected .datetime-input-part,.datetime-input.selected .datetime-input-separator{background-color:#ffffff4d}.datetime-input.selected .time-am-pm{margin-left:0!important;padding-left:4px!important}\n"] }]
|
|
7742
|
+
}], ctorParameters: () => [], propDecorators: { inputListener: [{
|
|
7743
|
+
type: ViewChild,
|
|
7744
|
+
args: ['inputListener']
|
|
7745
|
+
}], mainPopover: [{
|
|
7746
|
+
type: ViewChild,
|
|
7747
|
+
args: ['mainPopover']
|
|
7748
|
+
}], clearButtonTooltip: [{
|
|
7749
|
+
type: ViewChild,
|
|
7750
|
+
args: ['clearButtonTooltip']
|
|
7751
|
+
}], iconContainer: [{
|
|
7752
|
+
type: ViewChild,
|
|
7753
|
+
args: ['iconContainer', { read: ElementRef }]
|
|
7754
|
+
}], dropdownIcon: [{
|
|
7755
|
+
type: ViewChild,
|
|
7756
|
+
args: ['dropdownIcon', { read: ElementRef }]
|
|
7757
|
+
}], id: [{
|
|
8071
7758
|
type: Input
|
|
8072
7759
|
}], inputConfig: [{
|
|
8073
7760
|
type: Input
|
|
8074
|
-
}], formFormat: [{
|
|
8075
|
-
type: Input
|
|
8076
7761
|
}], forceInvalidStyling: [{
|
|
8077
7762
|
type: Input
|
|
8078
7763
|
}], clearInputEvent: [{
|
|
@@ -8081,39 +7766,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
8081
7766
|
}], blurInputEvent: [{
|
|
8082
7767
|
type: Output,
|
|
8083
7768
|
args: ['blurInput']
|
|
8084
|
-
}], dateTimePopover: [{
|
|
8085
|
-
type: ViewChild,
|
|
8086
|
-
args: ['dateTimePopover']
|
|
8087
|
-
}], t2: [{
|
|
8088
|
-
type: ViewChild,
|
|
8089
|
-
args: ['t2']
|
|
8090
|
-
}], selectLastOneForSelectionEmitter: [{
|
|
8091
|
-
type: Output
|
|
8092
|
-
}], selectLastOneAfterMouseUpEmitter: [{
|
|
8093
|
-
type: Output
|
|
8094
|
-
}], onDatePasteEmitter: [{
|
|
8095
|
-
type: Output
|
|
8096
7769
|
}], onFocusEmitter: [{
|
|
8097
7770
|
type: Output
|
|
8098
|
-
}], changeSelectionEmmiter: [{
|
|
8099
|
-
type: Output
|
|
8100
|
-
}], setSelectionEmmiter: [{
|
|
8101
|
-
type: Output
|
|
8102
|
-
}], span1: [{
|
|
8103
|
-
type: ViewChild,
|
|
8104
|
-
args: ['span1', { static: true }]
|
|
8105
|
-
}], span2: [{
|
|
8106
|
-
type: ViewChild,
|
|
8107
|
-
args: ['span2', { static: true }]
|
|
8108
|
-
}], span3: [{
|
|
8109
|
-
type: ViewChild,
|
|
8110
|
-
args: ['span3', { static: true }]
|
|
8111
|
-
}], holder1: [{
|
|
8112
|
-
type: ViewChild,
|
|
8113
|
-
args: ['holder1', { static: true }]
|
|
8114
|
-
}], closeTooltip: [{
|
|
8115
|
-
type: ViewChild,
|
|
8116
|
-
args: ['closeTooltip']
|
|
8117
7771
|
}] } });
|
|
8118
7772
|
|
|
8119
7773
|
var eStringPlaceholder;
|
|
@@ -8121,6 +7775,66 @@ var eStringPlaceholder;
|
|
|
8121
7775
|
eStringPlaceholder["EMPTY"] = "";
|
|
8122
7776
|
})(eStringPlaceholder || (eStringPlaceholder = {}));
|
|
8123
7777
|
|
|
7778
|
+
var eGeneralActions;
|
|
7779
|
+
(function (eGeneralActions) {
|
|
7780
|
+
eGeneralActions["ADD"] = "Add";
|
|
7781
|
+
eGeneralActions["ADD_LOWERCASE"] = "add";
|
|
7782
|
+
eGeneralActions["ADD_NEW_ITEM"] = "Add New Item";
|
|
7783
|
+
eGeneralActions["UPDATE"] = "Update";
|
|
7784
|
+
eGeneralActions["UPDATE_LOWERCASE"] = "update";
|
|
7785
|
+
eGeneralActions["DELETE"] = "Delete";
|
|
7786
|
+
eGeneralActions["DELETE_LOWERCASE"] = "delete";
|
|
7787
|
+
eGeneralActions["EDIT"] = "Edit";
|
|
7788
|
+
eGeneralActions["EDIT_LOWERCASE"] = "edit";
|
|
7789
|
+
eGeneralActions["EDIT_UPPERCASE"] = "EDIT";
|
|
7790
|
+
eGeneralActions["SAVE"] = "Save";
|
|
7791
|
+
eGeneralActions["SAVE_LOWERCASE"] = "save";
|
|
7792
|
+
eGeneralActions["CANCEL"] = "Cancel";
|
|
7793
|
+
eGeneralActions["CANCEL_LOWERCASE"] = "cancel";
|
|
7794
|
+
eGeneralActions["ENTER"] = "Enter";
|
|
7795
|
+
eGeneralActions["ESCAPE"] = "Escape";
|
|
7796
|
+
eGeneralActions["CONFIRM"] = "Confirm";
|
|
7797
|
+
eGeneralActions["CONFIRM_LOWERCASE"] = "confirm";
|
|
7798
|
+
eGeneralActions["SET"] = "Set";
|
|
7799
|
+
eGeneralActions["SET_LOWERCASE"] = "set";
|
|
7800
|
+
eGeneralActions["REMOVE"] = "Remove";
|
|
7801
|
+
eGeneralActions["REMOVE_LOWERCASE"] = "remove";
|
|
7802
|
+
eGeneralActions["SELECT"] = "Select";
|
|
7803
|
+
eGeneralActions["SELECT_LOWERCASE"] = "select";
|
|
7804
|
+
eGeneralActions["SEARCH"] = "Search";
|
|
7805
|
+
eGeneralActions["SEARCH_LOWERCASE"] = "search";
|
|
7806
|
+
eGeneralActions["SELECT_ALL"] = "Select All";
|
|
7807
|
+
eGeneralActions["SELECT_REMAINING"] = "Select Remaining";
|
|
7808
|
+
eGeneralActions["CLEAR_SELECTED"] = "Clear Selected";
|
|
7809
|
+
eGeneralActions["ACTIVATE"] = "Activate";
|
|
7810
|
+
eGeneralActions["ACTIVATE_LOWERCASE"] = "activate";
|
|
7811
|
+
eGeneralActions["DEACTIVATE"] = "deactivate";
|
|
7812
|
+
eGeneralActions["DEACTIVATE_LOWERCASE"] = "deactivate";
|
|
7813
|
+
eGeneralActions["CLOSE"] = "Close";
|
|
7814
|
+
eGeneralActions["CLOSE_LOWERCASE"] = "close";
|
|
7815
|
+
eGeneralActions["CLOSE_UPPERCASE"] = "CLOSE";
|
|
7816
|
+
eGeneralActions["OPEN"] = "Open";
|
|
7817
|
+
eGeneralActions["OPEN_LOWERCASE"] = "open";
|
|
7818
|
+
eGeneralActions["NEXT"] = "Next";
|
|
7819
|
+
eGeneralActions["NEXT_LOWERCASE"] = "next";
|
|
7820
|
+
eGeneralActions["PREVIOUS"] = "Previous";
|
|
7821
|
+
eGeneralActions["PREVIOUS_LOWERCASE"] = "previous";
|
|
7822
|
+
eGeneralActions["CLEAR"] = "Clear";
|
|
7823
|
+
eGeneralActions["CLEAR_LOWERCASE"] = "clear";
|
|
7824
|
+
eGeneralActions["CLEAR_ALL"] = "Clear All";
|
|
7825
|
+
eGeneralActions["SHOW_MORE"] = "show more";
|
|
7826
|
+
eGeneralActions["OPEN_MODAL"] = "open-modal";
|
|
7827
|
+
eGeneralActions["EXPAND"] = "Expand";
|
|
7828
|
+
eGeneralActions["EXPAND_LOWERCASE"] = "expand";
|
|
7829
|
+
eGeneralActions["EXPAND_UPPERCASE"] = "EXPAND";
|
|
7830
|
+
eGeneralActions["COLLAPSE"] = "Collapse";
|
|
7831
|
+
eGeneralActions["COLLAPSE_LOWERCASE"] = "collapse";
|
|
7832
|
+
eGeneralActions["COLLAPSE_UPPERCASE"] = "COLLAPSE";
|
|
7833
|
+
eGeneralActions["SORT_BY"] = "Sort By";
|
|
7834
|
+
eGeneralActions["COPY"] = "Copy";
|
|
7835
|
+
eGeneralActions["COPIED"] = "Copied";
|
|
7836
|
+
})(eGeneralActions || (eGeneralActions = {}));
|
|
7837
|
+
|
|
8124
7838
|
var eAlignment;
|
|
8125
7839
|
(function (eAlignment) {
|
|
8126
7840
|
eAlignment["LEFT"] = "left";
|
|
@@ -8157,7 +7871,7 @@ class CopyComponent {
|
|
|
8157
7871
|
this.copied.set(false);
|
|
8158
7872
|
}, 200);
|
|
8159
7873
|
}
|
|
8160
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CopyComponent, deps: [{ token: i1$
|
|
7874
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CopyComponent, deps: [{ token: i1$3.Clipboard }], target: i0.ɵɵFactoryTarget.Component });
|
|
8161
7875
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: CopyComponent, isStandalone: true, selector: "cai-copy", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, copyTooltip: { classPropertyName: "copyTooltip", publicName: "copyTooltip", isSignal: true, isRequired: false, transformFunction: null }, copyArea: { classPropertyName: "copyArea", publicName: "copyArea", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, tooltipClass: { classPropertyName: "tooltipClass", publicName: "tooltipClass", isSignal: true, isRequired: false, transformFunction: null }, tooltipPlacement: { classPropertyName: "tooltipPlacement", publicName: "tooltipPlacement", isSignal: true, isRequired: false, transformFunction: null }, inverse: { classPropertyName: "inverse", publicName: "inverse", isSignal: true, isRequired: false, transformFunction: null }, hasNoIcon: { classPropertyName: "hasNoIcon", publicName: "hasNoIcon", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let isCopied = !!copied();\n<div\n class=\"copy-container d-flex align-items-center gap-1\"\n [class]=\"{\n 'copy-area-full': copyArea() === 'full',\n 'has-custom-icon': !!icon(),\n inverse: inverse(),\n }\"\n (mouseleave)=\"resetCopied()\"\n (click)=\"copyArea() === 'full' && onCopy($event)\"\n [ngbTooltip]=\"copyArea() === 'full' ? tooltipTemplate : null\"\n [placement]=\"tooltipPlacement()\"\n [container]=\"'body'\"\n [tooltipClass]=\"\n (isCopied\n ? 'tooltip-bg-blue-500 '\n : inverse()\n ? 'tooltip-bg-white-700 tooltip-text-black-500'\n : ' ') +\n ' ' +\n tooltipClass()\n \"\n>\n <div\n class=\"copy-content\"\n [class]=\"{\n 'order-1': alignment() === eAlignment.LEFT,\n 'order-0': alignment() === eAlignment.RIGHT,\n }\"\n >\n <ng-content></ng-content>\n </div>\n @if (!hasNoIcon()) {\n <div\n (click)=\"onCopy($event)\"\n [ngbTooltip]=\"copyArea() === 'icon' ? tooltipTemplate : null\"\n [container]=\"'body'\"\n [tooltipClass]=\"\n isCopied\n ? 'input-tooltip tooltip-bg-blue-500'\n : inverse()\n ? 'input-tooltip tooltip-bg-white-700 tooltip-text-black-500'\n : 'input-tooltip'\n \"\n [placement]=\"tooltipPlacement()\"\n [class]=\"'copy-icon-container ' + iconColor()\"\n [class.active]=\"isCopied\"\n [style.--icon-size]=\"iconSize() + 'px'\"\n >\n <svg-icon\n [name]=\"icon() || ''\"\n [class]=\"'icon transition custom-icon'\"\n ></svg-icon>\n <svg-icon\n [name]=\"'cai-copy'\"\n [class]=\"'icon transition copy-icon'\"\n ></svg-icon>\n </div>\n }\n</div>\n\n@let copyText =\n isCopied ? eGeneralActions.COPIED : (copyTooltip() ?? eGeneralActions.COPY);\n<ng-template #tooltipTemplate>\n {{ copyText }}\n</ng-template>\n", styles: [".copy-container .copy-content{max-width:calc(100% - 16px)}.copy-container .copy-icon-container{opacity:0;transition:opacity .1s ease-in-out;position:relative;width:var(--icon-size);height:var(--icon-size)}.copy-container .copy-icon-container .icon{display:flex;align-items:center;justify-content:center;cursor:pointer;width:var(--icon-size);height:var(--icon-size);position:absolute;top:0;left:0}.copy-container:hover .copy-icon-container,.copy-container.has-custom-icon .copy-icon-container,.copy-container.has-custom-icon .custom-icon{opacity:1}.copy-container.has-custom-icon .copy-icon{opacity:0}.copy-container.has-custom-icon:hover .copy-icon{opacity:1}.copy-container.has-custom-icon:hover .custom-icon{opacity:0}.copy-container.copy-area-full{cursor:pointer}.copy-container.copy-area-full:hover .copy-icon-container{color:#424242}.copy-container.copy-area-full:hover .copy-icon-container.blue{color:#0b49d1}.copy-container .copy-icon-container{color:#919191}.copy-container .copy-icon-container:hover{color:#424242}.copy-container .copy-icon-container:hover.blue{color:#0b49d1}.copy-container .copy-icon-container.blue{color:#6692f1}.copy-container .copy-icon-container.active{color:#0b49d1!important}.copy-container.inverse .copy-icon-container{color:#919191}.copy-container.inverse .copy-icon-container:hover{color:#dadada}.copy-container.inverse .copy-icon-container.active{color:#bed0f9!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type:
|
|
8162
7876
|
// Components
|
|
8163
7877
|
SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "svgClass", "class", "viewBox", "svgAriaLabel", "onSVGLoaded", "svgStyle"] }] });
|
|
@@ -8170,7 +7884,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
8170
7884
|
// Components
|
|
8171
7885
|
SvgIconComponent,
|
|
8172
7886
|
], template: "@let isCopied = !!copied();\n<div\n class=\"copy-container d-flex align-items-center gap-1\"\n [class]=\"{\n 'copy-area-full': copyArea() === 'full',\n 'has-custom-icon': !!icon(),\n inverse: inverse(),\n }\"\n (mouseleave)=\"resetCopied()\"\n (click)=\"copyArea() === 'full' && onCopy($event)\"\n [ngbTooltip]=\"copyArea() === 'full' ? tooltipTemplate : null\"\n [placement]=\"tooltipPlacement()\"\n [container]=\"'body'\"\n [tooltipClass]=\"\n (isCopied\n ? 'tooltip-bg-blue-500 '\n : inverse()\n ? 'tooltip-bg-white-700 tooltip-text-black-500'\n : ' ') +\n ' ' +\n tooltipClass()\n \"\n>\n <div\n class=\"copy-content\"\n [class]=\"{\n 'order-1': alignment() === eAlignment.LEFT,\n 'order-0': alignment() === eAlignment.RIGHT,\n }\"\n >\n <ng-content></ng-content>\n </div>\n @if (!hasNoIcon()) {\n <div\n (click)=\"onCopy($event)\"\n [ngbTooltip]=\"copyArea() === 'icon' ? tooltipTemplate : null\"\n [container]=\"'body'\"\n [tooltipClass]=\"\n isCopied\n ? 'input-tooltip tooltip-bg-blue-500'\n : inverse()\n ? 'input-tooltip tooltip-bg-white-700 tooltip-text-black-500'\n : 'input-tooltip'\n \"\n [placement]=\"tooltipPlacement()\"\n [class]=\"'copy-icon-container ' + iconColor()\"\n [class.active]=\"isCopied\"\n [style.--icon-size]=\"iconSize() + 'px'\"\n >\n <svg-icon\n [name]=\"icon() || ''\"\n [class]=\"'icon transition custom-icon'\"\n ></svg-icon>\n <svg-icon\n [name]=\"'cai-copy'\"\n [class]=\"'icon transition copy-icon'\"\n ></svg-icon>\n </div>\n }\n</div>\n\n@let copyText =\n isCopied ? eGeneralActions.COPIED : (copyTooltip() ?? eGeneralActions.COPY);\n<ng-template #tooltipTemplate>\n {{ copyText }}\n</ng-template>\n", styles: [".copy-container .copy-content{max-width:calc(100% - 16px)}.copy-container .copy-icon-container{opacity:0;transition:opacity .1s ease-in-out;position:relative;width:var(--icon-size);height:var(--icon-size)}.copy-container .copy-icon-container .icon{display:flex;align-items:center;justify-content:center;cursor:pointer;width:var(--icon-size);height:var(--icon-size);position:absolute;top:0;left:0}.copy-container:hover .copy-icon-container,.copy-container.has-custom-icon .copy-icon-container,.copy-container.has-custom-icon .custom-icon{opacity:1}.copy-container.has-custom-icon .copy-icon{opacity:0}.copy-container.has-custom-icon:hover .copy-icon{opacity:1}.copy-container.has-custom-icon:hover .custom-icon{opacity:0}.copy-container.copy-area-full{cursor:pointer}.copy-container.copy-area-full:hover .copy-icon-container{color:#424242}.copy-container.copy-area-full:hover .copy-icon-container.blue{color:#0b49d1}.copy-container .copy-icon-container{color:#919191}.copy-container .copy-icon-container:hover{color:#424242}.copy-container .copy-icon-container:hover.blue{color:#0b49d1}.copy-container .copy-icon-container.blue{color:#6692f1}.copy-container .copy-icon-container.active{color:#0b49d1!important}.copy-container.inverse .copy-icon-container{color:#919191}.copy-container.inverse .copy-icon-container:hover{color:#dadada}.copy-container.inverse .copy-icon-container.active{color:#bed0f9!important}\n"] }]
|
|
8173
|
-
}], ctorParameters: () => [{ type: i1$
|
|
7887
|
+
}], ctorParameters: () => [{ type: i1$3.Clipboard }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], copyTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyTooltip", required: false }] }], copyArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyArea", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], tooltipClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipClass", required: false }] }], tooltipPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPlacement", required: false }] }], inverse: [{ type: i0.Input, args: [{ isSignal: true, alias: "inverse", required: false }] }], hasNoIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasNoIcon", required: false }] }] } });
|
|
8174
7888
|
|
|
8175
7889
|
const AutocompleteSearchLayer = {
|
|
8176
7890
|
Venue: 'Venue',
|
|
@@ -9869,7 +9583,7 @@ class IntervalDropdownComponent {
|
|
|
9869
9583
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: IntervalDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9870
9584
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: IntervalDropdownComponent, isStandalone: true, selector: "cai-interval-dropdown", inputs: { selectedOption: { classPropertyName: "selectedOption", publicName: "selectedOption", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, companyDays: { classPropertyName: "companyDays", publicName: "companyDays", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose", onOpen: "onOpen", onSelectionChange: "onSelectionChange" }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "@let isFormValid = form?.valid;\n<div\n class=\"dropdown-container\"\n [class.focus]=\"open()\"\n [ngbPopover]=\"popoverRef\"\n #container\n #dropdown=\"ngbPopover\"\n popoverClass=\"cai-dropdown cai-dropdown-popover\"\n container=\"body\"\n placement=\"bottom-start\"\n [positionTarget]=\"anchor\"\n [animation]=\"true\"\n [autoClose]=\"'outside'\"\n (hidden)=\"handleCloseDropdown()\"\n (shown)=\"handleOpenDropdown()\"\n (click)=\"handleClick()\"\n>\n <div>{{ custom() ? \"Custom\" : selectedOption()?.name }}</div>\n <svg-icon name=\"cai-arrow-secondary-down\" class=\"dropdown-icon\"></svg-icon>\n <div #anchor class=\"dropdown-anchor\" [class.custom]=\"custom()\"></div>\n</div>\n@let maxHeight = (options()?.length || 1) * 28 + 6;\n<ng-template #popoverRef>\n <div\n class=\"popover-dropdown-menu\"\n [style.--container-width]=\"containerWidth() + 'px'\"\n [style.--max-height]=\"\n custom() ? '124px' : maxHeight > 306 ? '306px' : maxHeight + 'px'\n \"\n [class.custom]=\"custom()\"\n (click)=\"$event.stopPropagation()\"\n >\n <div class=\"options-container\">\n <ng-container *ngTemplateOutlet=\"optionsRef\"></ng-container>\n </div>\n <div class=\"custom-container\">\n <ng-container *ngTemplateOutlet=\"customRef\"></ng-container>\n </div>\n </div>\n</ng-template>\n\n<ng-template #optionsRef>\n @if (options()?.length) {\n @for (option of options(); track option.id) {\n @let isSelected = option.id === selectedOption()?.id;\n @let isCustomSelected = option.name === \"Custom\" && isSelected;\n <div\n class=\"dropdown-item\"\n [class.selected]=\"isSelected\"\n [class.custom-selected]=\"isCustomSelected\"\n (pointerdown)=\"handleOption($event, option)\"\n >\n <p>{{ option.name }}</p>\n <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n </div>\n }\n } @else {\n <div class=\"dropdown-item no-results\">\n <p>No results</p>\n </div>\n }\n</ng-template>\n\n<ng-template #customRef>\n <div class=\"custom-range-header\">CUSTOM RANGE</div>\n @if (form) {\n <div class=\"custom-range-content\" [formGroup]=\"form\">\n <div class=\"custom-range-content-item\" [class.disabled]=\"!custom()\">\n <cai-input-datetime-picker\n formControlName=\"from\"\n [inputConfig]=\"{ configType: 'from' } | dropdownFilterInputConfig\"\n ></cai-input-datetime-picker>\n </div>\n <div class=\"custom-range-content-item\" [class.disabled]=\"!custom()\">\n <cai-input-datetime-picker\n formControlName=\"to\"\n [inputConfig]=\"{ configType: 'to' } | dropdownFilterInputConfig\"\n ></cai-input-datetime-picker>\n </div>\n </div>\n }\n <div class=\"custom-range-footer\">\n <button\n class=\"custom-range-button clear\"\n [class.valid]=\"isFormValid\"\n (click)=\"handleClearAll($event)\"\n >\n CLEAR ALL\n </button>\n <button\n class=\"custom-range-button set\"\n [class.valid]=\"isFormValid\"\n (click)=\"handleSet($event)\"\n >\n SET\n </button>\n </div>\n</ng-template>\n", styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 5000s cubic-bezier(.46,.03,.51,.95) 0s!important}input:-webkit-autofill:focus{-webkit-text-fill-color:#ffffff!important}input:-moz-autofill,input:-moz-autofill-preview{filter:none}*,*:before,*:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}p,ul,ol,dl,blockquote,figure,pre{margin:0}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{background:none;border:none;padding:0}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle;max-width:100%;height:auto}ul,ol{padding-left:1.5rem;list-style-position:outside}a{color:inherit;text-decoration:inherit}table{border-collapse:collapse;border-spacing:0}:focus:not(:focus-visible){outline:none}.dropdown-container{width:100%;position:relative;padding:4px 6px;display:flex;align-items:center;justify-content:space-between;gap:6px;-webkit-user-select:none;user-select:none;cursor:pointer;border-radius:2px;font-weight:800;font-size:14px;line-height:18px;letter-spacing:0%;transition:background-color .2s cubic-bezier(.46,.03,.51,.95),color .2s cubic-bezier(.46,.03,.51,.95);background-color:#eee;color:#6c6c6c}.dropdown-container .dropdown-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:#919191;transition:color .2s cubic-bezier(.46,.03,.51,.95),transform .2s cubic-bezier(.46,.03,.51,.95);transform:rotate(0)}.dropdown-container:hover:not(.focus){background-color:#dadada;color:#424242}.dropdown-container:hover:not(.focus) .dropdown-icon{color:#424242}.dropdown-container.focus{background-color:#2f2f2f;color:#fff}.dropdown-container.focus .dropdown-icon{transform:rotate(180deg);color:#ffffffb3}.dropdown-anchor{position:absolute;width:100%;-webkit-user-select:none;user-select:none;pointer-events:none;opacity:0;bottom:4px;left:0;transition:transform .2s cubic-bezier(.46,.03,.51,.95)}.popover-dropdown-menu{min-width:0px!important;background-color:#2f2f2f;width:var(--container-width);border:0;border-radius:3px;padding:4px;max-height:306px;z-index:1100!important;overflow-y:scroll;font-family:Montserrat;font-style:normal;position:relative;transition:max-height .2s cubic-bezier(.46,.03,.51,.95),opacity .2s cubic-bezier(.46,.03,.51,.95),height .1s cubic-bezier(.46,.03,.51,.95),width .2s cubic-bezier(.46,.03,.51,.95),transform .2s cubic-bezier(.46,.03,.51,.95);animation:dropdown-menu-opening .2s cubic-bezier(.46,.03,.51,.95);max-height:var(--max-height);height:var(--max-height)}.popover-dropdown-menu::-webkit-scrollbar{display:none}.closing{animation:dropdown-menu-closing .2s cubic-bezier(.46,.03,.51,.95);opacity:0;max-height:0}.options-container{padding:4px;position:absolute;top:0;left:0;width:100%;opacity:1;transition:opacity .1s cubic-bezier(.46,.03,.51,.95)}.custom-container{position:absolute;top:0;left:0;pointer-events:none;opacity:0;transition:opacity .1s cubic-bezier(.46,.03,.51,.95);width:100%;padding:4px}.popover-dropdown-menu.custom{width:300px;transform:translate(-78px);overflow:hidden}.popover-dropdown-menu.custom .options-container{opacity:0;pointer-events:none}.popover-dropdown-menu.custom .custom-container{opacity:1;pointer-events:auto}@keyframes dropdown-menu-opening{0%{max-height:0;opacity:0}to{max-height:306px;opacity:1}}@keyframes dropdown-menu-closing{0%{max-height:306px;opacity:1}to{max-height:0;opacity:0}}.dropdown-item{color:#fff;font-weight:400;font-size:14px;line-height:18px;height:26px;padding:4px;width:100%;display:flex;align-items:center;justify-content:space-between;gap:4px;-webkit-user-select:none;user-select:none;cursor:pointer;background-color:#2f2f2f;transition:background-color .2s cubic-bezier(.46,.03,.51,.95),color .2s cubic-bezier(.46,.03,.51,.95);border-radius:2px;position:relative}.dropdown-item:hover{background-color:#424242;color:#fff}.dropdown-item:focus-visible{background-color:#424242;border:0;outline:none}.dropdown-item.selected{font-weight:700;cursor:default}.dropdown-item.selected .dropdown-item-icon{opacity:1}.dropdown-item.custom-selected{cursor:pointer!important}.dropdown-item .dropdown-item-icon{opacity:0;transition:opacity .2s cubic-bezier(.46,.03,.51,.95);color:#6692f1}.dropdown-item:not(:first-child){margin-top:2px}.no-results{color:#919191;font-weight:700;pointer-events:none}.custom-range-header{color:#fff;font-size:11px;font-weight:800;line-height:14px;text-transform:uppercase;padding:2px 4px 6px;border-bottom:1px solid #424242;margin-bottom:2px;-webkit-user-select:none;user-select:none}.custom-range-footer{padding-top:4px;border-top:1px solid #424242;margin-top:2px;display:flex;align-items:center;justify-content:center;gap:4px}.custom-range-content{padding-top:22px;padding-bottom:18px;margin-top:4px;margin-bottom:4px;display:flex;align-items:center;justify-content:center;gap:4px;-webkit-user-select:none;user-select:none}.custom-range-button{padding:2px;background-color:#91919133;color:#919191;text-align:center;font-size:11px;font-weight:700;line-height:14px;text-transform:uppercase;border-radius:2px;flex:1;cursor:default!important;transition:background-color .2s cubic-bezier(.46,.03,.51,.95),color .2s cubic-bezier(.46,.03,.51,.95);-webkit-user-select:none;user-select:none}.custom-range-button.valid{color:#dadada;cursor:pointer!important}.custom-range-content-item{flex:1}.custom-range-content-item.disabled{pointer-events:none!important;cursor:default!important;z-index:-1!important}.clear.valid:hover{background-color:#eee;color:#424242}.set.valid{background-color:#3b73ed}.set.valid:hover{background-color:#e9effd;color:#0b49d1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "component", type:
|
|
9871
9585
|
// Components
|
|
9872
|
-
CaiInputDatetimePickerComponent, selector: "cai-input-datetime-picker", inputs: ["id", "inputConfig", "
|
|
9586
|
+
CaiInputDatetimePickerComponent, selector: "cai-input-datetime-picker, ca-date-time", inputs: ["id", "inputConfig", "forceInvalidStyling"], outputs: ["clear", "blurInput", "onFocusEmitter"] }, { kind: "component", type: SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "svgClass", "class", "viewBox", "svgAriaLabel", "onSVGLoaded", "svgStyle"] }, { kind: "ngmodule", type:
|
|
9873
9587
|
// Bootstrap
|
|
9874
9588
|
NgbPopoverModule }, { kind: "directive", type: i2.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "pipe", type:
|
|
9875
9589
|
// Pipes
|