@naniteninja/dashboard-components-lib 2.0.2 → 2.0.4

package/fesm2022/naniteninja-dashboard-components-lib.mjs

@@ -1,20 +1,20 @@
 import * as i1 from '@angular/common';
 import { CommonModule, formatDate, formatNumber } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, ViewChild, Optional, Inject, Component, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, NgModule, LOCALE_ID, Injectable, Pipe, inject, ChangeDetectorRef, ElementRef, Renderer2, InjectionToken, NgZone, ViewEncapsulation, ContentChild } from '@angular/core';
+import { EventEmitter, Output, Input, ViewChild, Optional, Inject, Component, ChangeDetectionStrategy, NgModule, LOCALE_ID, Injectable, Pipe, inject, ChangeDetectorRef, ElementRef, Renderer2, InjectionToken, NgZone, ViewEncapsulation, ContentChild, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i3 from '@ngx-translate/core';
+import * as i1$1 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
-import { interval, take, takeUntil, Subject, map, debounceTime, distinctUntilChanged, switchMap, first, BehaviorSubject, animationFrameScheduler, defer, finalize, shareReplay, from, concatMap, Observable, of } from 'rxjs';
+import { interval, take, takeUntil, Subject, map, debounceTime, distinctUntilChanged, switchMap, first, of, BehaviorSubject, animationFrameScheduler, defer, finalize, shareReplay, from, concatMap, Observable } from 'rxjs';
 import * as i2 from '@naniteninja/ionic-lib';
-import { MODAL_DATA, BaseCardModule, ButtonsModule, PopperModule, LibModalComponent, InputFieldModule, DirectiveModule, AvatarComponent, FormFieldModule, BaseComponent, DateRangeValidator, TimeRangeValidator, LibMapModule, DashedCheckboxModule, InputDateFieldModule, InputFieldSelectModule, InputTimeFieldModule, LibModalModule, LibErrorMessageComponent, SectionSeparatorComponent, FormFieldType as FormFieldType$1, PopupModalService, ToggleModule, ImageCardModule, PipeModule } from '@naniteninja/ionic-lib';
+import { MODAL_DATA, BaseCardModule, ButtonsModule, PopperModule, LibModalComponent, DirectiveModule, AvatarComponent, InputFieldModule, FormFieldModule, BaseComponent, DateRangeValidator, TimeRangeValidator, LibMapModule, DashedCheckboxModule, InputDateFieldModule, InputFieldSelectModule, InputTimeFieldModule, LibModalModule, LibErrorMessageComponent, SectionSeparatorComponent, FormFieldType as FormFieldType$1, PopupModalService, ToggleModule, ImageCardModule, PipeModule } from '@naniteninja/ionic-lib';
 import { trigger, transition, style, query, sequence, animate, stagger } from '@angular/animations';
-import * as i1$1 from '@angular/forms';
-import { FormControl, ReactiveFormsModule, FormsModule, Validators, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { addDays, set, isSameDay, getHours, isEqual, startOfDay, isBefore, isSameWeek, getDay, differenceInMinutes, getMinutes, addMinutes, endOfDay } from 'date-fns';
 import * as i2$1 from '@ionic/angular';
 import { IonicModule } from '@ionic/angular';
+import * as i1$2 from '@angular/forms';
+import { FormControl, FormsModule, ReactiveFormsModule, Validators, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { RRule } from 'rrule';
 import { Weekday } from 'rrule/dist/esm/weekday';
 import * as i4 from '@angular/material/icon';
@@ -33,6 +33,221 @@ import { TraitVisualComponent } from '@naniteninja/trait-visual';
 import { register } from 'swiper/element/bundle';
 import moment from 'moment';
 
+var AgendaItemType;
+(function (AgendaItemType) {
+    AgendaItemType["DAY"] = "day";
+    AgendaItemType["AD"] = "ad";
+})(AgendaItemType || (AgendaItemType = {}));
+
+var AlertStatusFields;
+(function (AlertStatusFields) {
+    AlertStatusFields["upcomingDates"] = "upcomingDates";
+    AlertStatusFields["compatibilityProfileTrait"] = "compatibilityProfileTrait";
+    AlertStatusFields["compatibilityProfileSpider"] = "compatibilityProfileSpider";
+    AlertStatusFields["chatHandoff"] = "chatHandoff";
+    AlertStatusFields["chatProgress"] = "chatProgress";
+    AlertStatusFields["chatMeetupAgenda"] = "chatMeetupAgenda";
+    AlertStatusFields["face"] = "face";
+})(AlertStatusFields || (AlertStatusFields = {}));
+
+var AutoDelegationEventTypes;
+(function (AutoDelegationEventTypes) {
+    AutoDelegationEventTypes["Click"] = "click";
+    AutoDelegationEventTypes["Countdown"] = "countdown";
+})(AutoDelegationEventTypes || (AutoDelegationEventTypes = {}));
+
+var AutoDelegationEventValue;
+(function (AutoDelegationEventValue) {
+    AutoDelegationEventValue["CountdownCompleted"] = "countdown-completed";
+    AutoDelegationEventValue["RequestRejected"] = "request-rejected";
+    AutoDelegationEventValue["RequestAcceped"] = "request-accepted";
+})(AutoDelegationEventValue || (AutoDelegationEventValue = {}));
+
+var CalendarAccountEnum;
+(function (CalendarAccountEnum) {
+    CalendarAccountEnum["GOOGLE"] = "Google";
+    CalendarAccountEnum["MICROSOFT"] = "Microsoft";
+})(CalendarAccountEnum || (CalendarAccountEnum = {}));
+
+var CalendarAccountIconsEnum;
+(function (CalendarAccountIconsEnum) {
+    CalendarAccountIconsEnum["Google"] = "googleCalender";
+    CalendarAccountIconsEnum["Microsoft"] = "microsoft";
+})(CalendarAccountIconsEnum || (CalendarAccountIconsEnum = {}));
+
+var CircleVariable;
+(function (CircleVariable) {
+    CircleVariable["Partial"] = "partial";
+    CircleVariable["Complete"] = "complete";
+})(CircleVariable || (CircleVariable = {}));
+
+var ClientDashboardTabs;
+(function (ClientDashboardTabs) {
+    ClientDashboardTabs[ClientDashboardTabs["ChatScheduler"] = 0] = "ChatScheduler";
+    ClientDashboardTabs[ClientDashboardTabs["ChatCompatibility"] = 1] = "ChatCompatibility";
+    ClientDashboardTabs[ClientDashboardTabs["ChatHandoff"] = 2] = "ChatHandoff";
+})(ClientDashboardTabs || (ClientDashboardTabs = {}));
+
+var ClientHomeComponent;
+(function (ClientHomeComponent) {
+    ClientHomeComponent["ChatCompatibility"] = "ChatCompatibility";
+    ClientHomeComponent["ChatHandoff"] = "ChatHandoff";
+    ClientHomeComponent["ChatScheduler"] = "ChatScheduler";
+    ClientHomeComponent["ClientMatchSpiderChart"] = "ClientMatchSpiderChart";
+    ClientHomeComponent["ClientMatchTraitChart"] = "ClientMatchTraitChart";
+})(ClientHomeComponent || (ClientHomeComponent = {}));
+
+var CONVERSATION_FLAG;
+(function (CONVERSATION_FLAG) {
+    CONVERSATION_FLAG["UNRESPONSIVE"] = "unresponsive";
+    CONVERSATION_FLAG["REDELEGATION"] = "redelegation";
+})(CONVERSATION_FLAG || (CONVERSATION_FLAG = {}));
+
+var COUNTER_FLAG_BASE;
+(function (COUNTER_FLAG_BASE) {
+    COUNTER_FLAG_BASE["StartConversation"] = "startConversation";
+    COUNTER_FLAG_BASE["LastResponse"] = "lastResponse";
+})(COUNTER_FLAG_BASE || (COUNTER_FLAG_BASE = {}));
+
+var Direction;
+(function (Direction) {
+    Direction["horizontal"] = "horizontal";
+    Direction["vertical"] = "vertical";
+})(Direction || (Direction = {}));
+
+var EventTypes;
+(function (EventTypes) {
+    EventTypes["DATE"] = "Date";
+    EventTypes["GOOGLE"] = "Google";
+    EventTypes["MICROSOFT"] = "Microsoft";
+    EventTypes["SYSTEM"] = "System";
+    EventTypes["USER"] = "User";
+    EventTypes["ITINERARY"] = "Itinerary";
+})(EventTypes || (EventTypes = {}));
+
+var FormFieldType;
+(function (FormFieldType) {
+    FormFieldType["date"] = "date";
+    FormFieldType["text"] = "text";
+    FormFieldType["textarea"] = "textarea";
+    FormFieldType["typeahead"] = "typeahead";
+    FormFieldType["multiselect"] = "multiselect";
+    FormFieldType["select"] = "select";
+    FormFieldType["checkbox"] = "checkbox";
+    FormFieldType["toggle"] = "toggle";
+    FormFieldType["radio"] = "radio";
+    FormFieldType["textlist"] = "textlist";
+    FormFieldType["number"] = "number";
+    FormFieldType["message"] = "message";
+    FormFieldType["time"] = "time";
+    FormFieldType["multifield"] = "multifield";
+    FormFieldType["action"] = "action";
+    FormFieldType["currency"] = "currency";
+    FormFieldType["banner"] = "banner";
+    FormFieldType["percentage"] = "percentage";
+    FormFieldType["multiselectdropdown"] = "multiselectdropdown";
+    FormFieldType["hyperlink"] = "hyperlink";
+    FormFieldType["injectable"] = "injectable";
+    FormFieldType["datetime"] = "datetime";
+    FormFieldType["rating"] = "rating";
+    FormFieldType["incrementer"] = "incrementer";
+    FormFieldType["range"] = "range";
+    FormFieldType["password"] = "password";
+})(FormFieldType || (FormFieldType = {}));
+
+var HandoffPanelVersion;
+(function (HandoffPanelVersion) {
+    HandoffPanelVersion["STANDARD"] = "standard";
+    HandoffPanelVersion["PRO"] = "pro";
+    HandoffPanelVersion["SUPER"] = "super";
+})(HandoffPanelVersion || (HandoffPanelVersion = {}));
+
+var INNER_CIRCLE_STATE;
+(function (INNER_CIRCLE_STATE) {
+    INNER_CIRCLE_STATE["Waiting"] = "waiting";
+    INNER_CIRCLE_STATE["Quiet"] = "quiet";
+    INNER_CIRCLE_STATE["Unresponsive"] = "unresponsive";
+    INNER_CIRCLE_STATE["Redelegation"] = "redelegation";
+})(INNER_CIRCLE_STATE || (INNER_CIRCLE_STATE = {}));
+
+var LocalStorageKeys;
+(function (LocalStorageKeys) {
+    LocalStorageKeys["LongPressForSendImmediately"] = "longPressForSendImmediately";
+})(LocalStorageKeys || (LocalStorageKeys = {}));
+
+var MatcherStatuses;
+(function (MatcherStatuses) {
+    MatcherStatuses["STATUS0"] = "no contact";
+    MatcherStatuses["STATUS1"] = "1st exchange";
+    MatcherStatuses["STATUS2"] = "2nd exchange";
+    MatcherStatuses["STATUS3"] = "3rd exchange";
+    MatcherStatuses["STATUS4"] = "2+ laughs";
+    MatcherStatuses["STATUS5"] = "idea signalled";
+    MatcherStatuses["STATUS6"] = "alt contact";
+    MatcherStatuses["STATUS7"] = "any romance";
+    MatcherStatuses["STATUS8"] = "locale confirmed";
+    MatcherStatuses["STATUS9"] = "time confirmed";
+    MatcherStatuses["STATUS10"] = "all followup";
+})(MatcherStatuses || (MatcherStatuses = {}));
+
+var EditRecurringEventOptions;
+(function (EditRecurringEventOptions) {
+    EditRecurringEventOptions["CURRENT"] = "CURRENT";
+    EditRecurringEventOptions["FOLLOWING"] = "FOLLOWING";
+    EditRecurringEventOptions["ALL"] = "ALL";
+})(EditRecurringEventOptions || (EditRecurringEventOptions = {}));
+
+var RecurringTypes;
+(function (RecurringTypes) {
+    RecurringTypes["DAILY"] = "DAILY";
+    RecurringTypes["WEEKLY"] = "WEEKLY";
+    RecurringTypes["MONTHLY"] = "MONTHLY";
+    RecurringTypes["ANNUALLY"] = "ANNUALLY";
+})(RecurringTypes || (RecurringTypes = {}));
+
+var ScheduleDateStatus;
+(function (ScheduleDateStatus) {
+    ScheduleDateStatus["Suggested"] = "suggested";
+    ScheduleDateStatus["Canceled"] = "canceled";
+    ScheduleDateStatus["Pending"] = "pending";
+})(ScheduleDateStatus || (ScheduleDateStatus = {}));
+
+var SenderTypes;
+(function (SenderTypes) {
+    SenderTypes["USER"] = "user";
+    SenderTypes["OTHER"] = "other";
+})(SenderTypes || (SenderTypes = {}));
+
+var StatusTypes;
+(function (StatusTypes) {
+    StatusTypes["Info"] = "info";
+    StatusTypes["Warning"] = "warning";
+    StatusTypes["Error"] = "error";
+    StatusTypes["Success"] = "success";
+})(StatusTypes || (StatusTypes = {}));
+
+var SendMessageType;
+(function (SendMessageType) {
+    SendMessageType["INMEDIATELY"] = "send_immediately";
+    SendMessageType["AFTER"] = "send_after";
+    SendMessageType["SPECIFIC"] = "specify_time";
+})(SendMessageType || (SendMessageType = {}));
+
+var VisualManagerModalEventTypes;
+(function (VisualManagerModalEventTypes) {
+    VisualManagerModalEventTypes["Click"] = "click";
+    VisualManagerModalEventTypes["Close"] = "close";
+})(VisualManagerModalEventTypes || (VisualManagerModalEventTypes = {}));
+
+var VisualManagerModalEventValue;
+(function (VisualManagerModalEventValue) {
+    VisualManagerModalEventValue["Apply"] = "apply";
+    VisualManagerModalEventValue["Reset"] = "reset";
+    VisualManagerModalEventValue["AddPreference"] = "add-preference";
+    VisualManagerModalEventValue["RemovePreference"] = "remove-preference";
+    VisualManagerModalEventValue["Close"] = "close";
+})(VisualManagerModalEventValue || (VisualManagerModalEventValue = {}));
+
 /**
  * operations.ts - Contains common operations utility functions.
  *
@@ -71,19 +286,6 @@ const SeeMoreAnimation = trigger('dropDownMenu', [
     ]),
 ]);
 
-var AutoDelegationEventTypes;
-(function (AutoDelegationEventTypes) {
-    AutoDelegationEventTypes["Click"] = "click";
-    AutoDelegationEventTypes["Countdown"] = "countdown";
-})(AutoDelegationEventTypes || (AutoDelegationEventTypes = {}));
-
-var AutoDelegationEventValue;
-(function (AutoDelegationEventValue) {
-    AutoDelegationEventValue["CountdownCompleted"] = "countdown-completed";
-    AutoDelegationEventValue["RequestRejected"] = "request-rejected";
-    AutoDelegationEventValue["RequestAcceped"] = "request-accepted";
-})(AutoDelegationEventValue || (AutoDelegationEventValue = {}));
-
 class LibAutoDelegationModalComponent {
     constructor(changeDetectorRef, popupModalService, modalData) {
         this.changeDetectorRef = changeDetectorRef;
@@ -98,291 +300,63 @@ class LibAutoDelegationModalComponent {
         this.componentData = null;
         if (modalData) {
             // Can use that component as modal and pass Inputs
-            this.componentData = modalData;
-        }
-    }
-    ngOnInit() {
-        if (!this.componentData) {
-            // Can use that component as child and pass Inputs
-            this.componentData = {
-                countdown: this.countdown,
-                expandedBaseCard: this.expandedBaseCard,
-                menuItems: this.menuItems,
-                data: this.data || null,
-            };
-        }
-    }
-    ngAfterViewInit() {
-        this.activeCountdownPathId = CommonOperations.randomString(100);
-        interval(1000)
-            .pipe(take(this.componentData?.countdown + 1))
-            .subscribe({
-            next: (elapsedSeconds) => {
-                this.currentCountdownAt = this.componentData?.countdown - elapsedSeconds;
-                this.strokeDashOffset = this.totalStrokeLength * ((this.componentData?.countdown - this.currentCountdownAt) / this.componentData?.countdown);
-                this.changeDetectorRef.detectChanges();
-            },
-            complete: () => {
-                if (this.data) {
-                    this.event.emit({ type: AutoDelegationEventTypes.Countdown, value: AutoDelegationEventValue.CountdownCompleted });
-                }
-                else {
-                    this.popupModalService.hide({ type: AutoDelegationEventTypes.Countdown, value: AutoDelegationEventValue.CountdownCompleted });
-                }
-            },
-        });
-        this.popupModalService.setChildModalElementRef(this.childModalElementRef);
-    }
-    reject() {
-        if (this.data) {
-            this.event.emit({ type: AutoDelegationEventTypes.Click, value: AutoDelegationEventValue.RequestRejected });
-        }
-        else {
-            this.popupModalService.hide({ type: AutoDelegationEventTypes.Click, value: AutoDelegationEventValue.RequestRejected });
-        }
-    }
-    accept() {
-        if (this.data) {
-            this.event.emit({ type: AutoDelegationEventTypes.Click, value: AutoDelegationEventValue.RequestAcceped });
-        }
-        else {
-            this.popupModalService.hide({ type: AutoDelegationEventTypes.Click, value: AutoDelegationEventValue.RequestAcceped });
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibAutoDelegationModalComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2.PopupModalService }, { token: MODAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LibAutoDelegationModalComponent, isStandalone: true, selector: "lib-auto-delegation-modal", inputs: { countdown: "countdown", expandedBaseCard: "expandedBaseCard", data: "data", menuItems: "menuItems" }, outputs: { event: "event" }, providers: [LibModalComponent], viewQueries: [{ propertyName: "childModalElementRef", first: true, predicate: ["childModalElementRef"], descendants: true }], ngImport: i0, template: "<div class=\"auto-delegation\" [ngClass]=\"{ 'edit-radus': !componentData?.expandedBaseCard }\">\n  <header class=\"auto-delegation__header\">\n    <div class=\"auto-delegation__info\">\n      <img class=\"auto-delegation__avatar\" [src]=\"componentData?.data?.imgSrc\" alt=\"User Avatar\" />\n      <div class=\"auto-delegation__wapper overflow\">\n        <div class=\"auto-delegation__title overflow\">{{ componentData?.data?.title }}</div>\n        <span class=\"auto-delegation__name\">{{ componentData?.data?.name }}, </span>\n        <span class=\"auto-delegation__location\">{{ componentData?.data?.location }}</span>\n      </div>\n    </div>\n    @if (componentData?.menuItems?.length) {\n      <div class=\"auto-delegation__menu\">\n        <div>\n          <lib-menu-btn [disableTranslation]=\"true\" [menuItems]=\"componentData?.menuItems\">\n            <img height=\"25px\" width=\"5px\" src=\"assets/auto-delegation-modal/menu.svg\" alt=\"\" />\n          </lib-menu-btn>\n        </div>\n      </div>\n    }\n  </header>\n  <div class=\"auto-delegation__details\">\n    <div class=\"auto-delegation__meetings\">\n      <div class=\"auto-delegation__meetings-count gradient-text\">{{ componentData?.data?.meetings }} {{ 'AUTO_DELEGATION.MEETINGS' | translate }}</div>\n      <div class=\"auto-delegation__meetings-duration gradient-text\">{{ componentData?.data?.days }}</div>\n    </div>\n    <div class=\"auto-delegation__price\">\n      <div class=\"auto-delegation__price-value gradient-text\">\n        $\n        <div class=\"auto-delegation__price-number gradient-text\">{{ componentData?.data?.price }}</div>\n      </div>\n    </div>\n  </div>\n  <div class=\"auto-delegation__lists\">\n    <ul class=\"auto-delegation__lists-features\">\n      @for (opt of componentData?.data?.planOptions; track opt) {\n        <li class=\"auto-delegation__lists-feature\">{{ opt }}</li>\n      }\n    </ul>\n  </div>\n\n  <div class=\"auto-delegation__action\">\n    <div class=\"auto-delegation__action-timer\">\n      <div class=\"auto-delegation__countdown\">\n        <!-- Background Image -->\n        <img class=\"auto-delegation__countdown-background-image\" src=\"assets/auto-delegation-modal/timer-center-dot.svg\" />\n        <!-- SVG Countdown Animation -->\n        <svg class=\"auto-delegation__countdown-active-stroke\" width=\"100%\" height=\"100%\" viewBox=\"0 0 103 103\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g\n            class=\"auto-delegation__countdown-active-g\"\n            [attr.mask]=\"'url(#' + activeCountdownPathId + ')'\"\n            opacity=\"1\"\n            [style.transform]=\"'rotate(' + 0 + 'deg)'\"\n            style=\"transform-origin: center\"\n          >\n            <circle cx=\"50\" cy=\"50\" r=\"50\" fill=\"#FFB5E9\" />\n          </g>\n          <defs>\n            <mask [attr.id]=\"activeCountdownPathId\">\n              <circle\n                d=\"M 9.04 78.68 A 50 50 0 1 1 90.96 78.68\"\n                class=\"auto-delegation__animated-path\"\n                cx=\"50\"\n                cy=\"50\"\n                r=\"42.5\"\n                stroke=\"white\"\n                stroke-linecap=\"round\"\n                stroke-width=\"10.64\"\n                [attr.stroke-dasharray]=\"totalStrokeLength\"\n                [attr.stroke-dashoffset]=\"strokeDashOffset\"\n              />\n            </mask>\n          </defs>\n        </svg>\n\n        <!-- Countdown Timer -->\n        <div class=\"auto-delegation__countdown-number\">{{ currentCountdownAt }} s</div>\n      </div>\n    </div>\n\n    <div #childModalElementRef class=\"auto-delegation__glowing-text\" (click)=\"accept()\">{{ 'AUTO_DELEGATION.ACCEPT_REQUEST' | translate }}</div>\n    <div class=\"auto-delegation__close-button\" (click)=\"reject()\">\n      <img class=\"auto-delegation__close-icon\" src=\"assets/auto-delegation-modal/cross.svg\" alt=\"cross-icon\" />\n    </div>\n  </div>\n  <div class=\"auto-delegation__dropDown\">\n    <span (click)=\"componentData.expandedBaseCard = !componentData.expandedBaseCard\"\n      >{{ 'DASHBOARD.SEE_' + (componentData?.expandedBaseCard ? 'LESS' : 'MORE') | translate }}...\n    </span>\n  </div>\n\n  @if (componentData?.expandedBaseCard) {\n    <div class=\"auto-delegation__profile\" [@dropDownMenu]>\n      <div class=\"auto-delegation__profile-header\">\n        <div>\n          <h3 class=\"red-text\">{{ 'AUTO_DELEGATION.SCORE_PREFERRED' | translate }}</h3>\n          <p>{{ componentData?.data?.score }} / {{ componentData?.data?.preferred }}+</p>\n        </div>\n        <div>\n          <h3 class=\"red-text text-right\">{{ 'AUTO_DELEGATION.LIFE_TIME_FEE' | translate }}</h3>\n          <p class=\"text-right\">{{ componentData?.data?.lifeTimeFee }}</p>\n        </div>\n      </div>\n      <div class=\"auto-delegation__profile-header\">\n        <div>\n          <h3 class=\"red-text\">{{ 'AUTO_DELEGATION.LIFE_TIME_MEETUPS' | translate }}</h3>\n          <p>{{ componentData?.data?.lifeTimeMeetups }}</p>\n        </div>\n        <div>\n          <h3 class=\"red-text text-right\">{{ 'AUTO_DELEGATION.JOIN_DATE' | translate }}</h3>\n          <p class=\"text-right\">{{ componentData?.data?.joinDate }}</p>\n        </div>\n      </div>\n      <div class=\"auto-delegation__profile-summary-container\">\n        <div class=\"auto-delegation__profile-summary\">\n          <div>\n            <h4>{{ 'AUTO_DELEGATION.PREFERENCES' | translate }} <br />{{ 'AUTO_DELEGATION.SUMMARY' | translate }}:</h4>\n            <div>\n              <p>\n                {{ componentData?.data?.preferences?.bust?.value }}\u00B1{{ componentData?.data?.preferences?.bust?.moe }} {{ componentData?.data?.preferences?.waist?.value }}\u00B1{{\n                  componentData?.data?.preferences?.waist?.moe\n                }}\n                {{ componentData?.data?.preferences?.height?.value }}\u00B1{{ componentData?.data?.preferences?.height?.moe }}\n              </p>\n            </div>\n            <div>\n              <p>{{ 'AUTO_DELEGATION.CELIBACY' | translate }} {{ componentData?.data?.preferences.celibacy }}+</p>\n              <p>{{ 'AUTO_DELEGATION.COOPERATION' | translate }} {{ componentData?.data?.preferences.cooperation }}+</p>\n              <p>{{ 'AUTO_DELEGATION.INTELLIGENCE' | translate }} {{ componentData?.data?.preferences.intelligence }}+</p>\n            </div>\n          </div>\n          <div>\n            <h4 class=\"text-right\">{{ 'AUTO_DELEGATION.PREFERENCES_PROFILE' | translate }}</h4>\n            <p class=\"text-right\">{{ componentData?.data?.preferencesProfile }}</p>\n            <div>\n              <h4 class=\"text-right\">{{ 'AUTO_DELEGATION.WEIGHT_HEIGHT_PREF' | translate }}</h4>\n              <p class=\"text-right\">{{ componentData?.data?.weight }}/{{ componentData?.data?.heightpref }}</p>\n            </div>\n          </div>\n        </div>\n        <div class=\"auto-delegation__profile-summary\">\n          <div>\n            <h4>\n              {{ 'AUTO_DELEGATION.PROFILE' | translate }} <br />\n              {{ 'AUTO_DELEGATION.SUMMARY' | translate }}:\n            </h4>\n            <div *ngFor=\"let item of componentData?.data?.profile\">\n              <p>{{ item }}</p>\n            </div>\n          </div>\n          <div class=\"auto-delegation__col-center\">\n            <h4 class=\"text-right\">{{ 'AUTO_DELEGATION.COMMUNICATION_STYLE' | translate }}</h4>\n            <p class=\"text-right\">{{ componentData?.data?.communicationStyle }}</p>\n            <div>\n              <h4 class=\"text-right\">{{ 'AUTO_DELEGATION.GOAL' | translate }}</h4>\n              <p class=\"text-right\">{{ componentData?.data?.goal }}</p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{font-size:clamp(0px,3.2dvw,15px)}:host *{box-sizing:border-box}.auto-delegation{-webkit-backdrop-filter:blur(.625em);backdrop-filter:blur(.625em);background:#d3d3d333;color:#fff;padding:1.625em 2.75em 2.25em;width:28.125em;margin:0 auto;border-radius:1.5625em;font-family:Gilroy;overflow-y:scroll;max-height:95vh}.auto-delegation__header{display:flex;justify-content:space-between;align-items:flex-start}.auto-delegation__details{display:flex;justify-content:space-between;align-items:center}.auto-delegation__avatar{width:3.75em;height:3.75em;border-radius:50%;object-fit:cover}.auto-delegation__wapper{padding-bottom:.375em}.auto-delegation__info{display:flex;gap:.75em;align-items:center;width:18.75em;height:4.6875em}.auto-delegation__title{font-size:1.875em;font-weight:400;padding-bottom:.5em;font-family:Calistoga;width:13.75em}.auto-delegation__name{font-size:.875em;font-weight:600;font-family:Gilroy}.auto-delegation__menu{cursor:pointer}.auto-delegation__location{font-size:.875em;font-weight:400;font-family:Gilroy;color:#ccc}.auto-delegation__meeting{width:100%;height:100%}.auto-delegation__meetings-count,.auto-delegation__meetings-duration{font-family:Gilroy;font-size:1.0625em;font-weight:400}.auto-delegation__price{text-align:end}.auto-delegation__price-value{display:flex;justify-content:flex-end;align-items:flex-start;gap:.25em}.auto-delegation__price-number{font-size:2.25em;font-weight:400}.auto-delegation__price-market{font-size:.5em;color:#8e8e8e}.auto-delegation__lists-features{padding-left:.9375em}.auto-delegation__lists{list-style:none;display:flex;justify-content:space-between;align-items:flex-start}.auto-delegation__action{border-radius:2em;background-color:#2b2929;display:flex;align-items:center;margin-top:.3125em;padding:0;height:3.4375em;justify-content:space-between}.auto-delegation__action__timer{border:.0625em solid gray;border-radius:100%;height:3.125em;width:3.125em;font-size:.875em;color:#f39c12}.auto-delegation__summary,.auto-delegation__preferences{margin-top:1em;font-size:.875em;line-height:1.5}.auto-delegation__preferences-summary{font-size:.75em;color:#aaa}.auto-delegation__glowing-text{font-family:Calistoga;font-size:1.5em;font-weight:800;color:#fff;text-align:center;margin-right:1.25em;text-shadow:0 0 .3125em #ff89ac,0 0 .625em #ff89ac,0 0 1.25em #ff89ac,0 0 2.5em #ff2475,0 0 5em #ff2475;-webkit-text-fill-color:#fff;cursor:pointer}.auto-delegation__close-button{display:flex;align-items:center;background:linear-gradient(228deg,#101113 10%,#2b2f33);padding:.625em;border-radius:100%;border:.0625em solid black;margin-right:.3125em;cursor:pointer}.auto-delegation__close-icon{width:1.375em;height:1.375em}.auto-delegation__dropDown{margin-top:.9375em;margin-bottom:.625em;display:flex;justify-content:center}.auto-delegation__dropDown>span{font-family:Gilroy;cursor:pointer;font-size:.625em;color:#8e8e8e}.auto-delegation__profile-summary-container{margin-top:1.25em}.auto-delegation__profile{overflow:hidden}.auto-delegation__profile-header,.auto-delegation__profile-summary{display:flex;justify-content:space-between}.auto-delegation__profile-header>div,.auto-delegation__profile-summary>div{text-align:left;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:11.25em}.auto-delegation__profile-summary div h4{font-weight:500;font-family:Gilroy;font-size:1em;margin-bottom:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.auto-delegation__profile-summary div p{color:#8e8e8e;font-size:.85em;font-weight:400;font-family:Gilroy;margin:.125em!important;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.auto-delegation__countdown{position:relative;width:4.375em;height:4.375em;right:.75em}.auto-delegation__countdown-background-image{background:linear-gradient(274deg,#232323 50%,#2b2f33);box-shadow:.01em -.0525em 1.53em #82676e,.49em .49em 1.715em #141415;border:2px solid #464646;border-radius:100%;position:absolute;top:.6em;left:.9em;width:3.2em;height:3.2em}.auto-delegation__countdown-active-stroke{position:absolute;width:3.5em;height:3.5em;top:.6em;left:.6em;animation-duration:.8s;transform:rotate(90deg)}.auto-delegation__countdown-number{height:3em;width:3em;display:flex;justify-content:center;align-items:center;background:linear-gradient(66deg,#101113 12%,#2b2f33);box-shadow:inset -.49em -.49em 1.715em #453d3f,inset .49em .49em 1.715em #141415;border:2px solid #333333;border-radius:100%;position:absolute;top:50%;left:57%;transform:translate(-50%,-50%);font-weight:600;font-size:.6em;color:#fff}.auto-delegation__col-center{display:flex;flex-direction:column;justify-content:center}.auto-delegation__animated-path{transition:stroke-dashoffset 1s linear}.gradient-text{background:linear-gradient(to top,#efc5d1,#fe638e);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.auto-delegation:before{content:\"\";position:absolute;inset:0;border-radius:1.5625em;padding:.125em;background:linear-gradient(to top,transparent,transparent,#ccabc4);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;z-index:-1}.red-text{font-family:Gilroy;margin-top:.5em;margin-bottom:0;font-size:1.0625em;color:#f4446c;font-weight:600}.text-right{text-align:end}.overflow{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media (max-width: 768px){:host{font-size:calc(clamp(0px,3.2dvw,15px)*.8)}}.edit-radus{border-radius:5.5625em!important}.edit-radus:before{border-radius:5.5625em!important}::-webkit-scrollbar{width:0;background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: BaseCardModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2.MenuBtnComponent, selector: "lib-menu-btn", inputs: ["menuBtnIcon", "menuBtnTooltip", "menuBtnTooltipPosition", "menuBtnIconName", "menuBtnImgUrl", "menuBtnNotificationIconUrl", "menuDirection", "hasNotification", "menuItems", "disableTranslation", "listItem", "listItemIndex", "selectable", "overlayClass", "isUserMenu", "onlyCloseOnClickOutside", "hoverOutline", "disabled", "type", "form", "label", "showArrowIcon", "disableTextShadow", "loading$"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: PopperModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], animations: [SeeMoreAnimation] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibAutoDelegationModalComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-auto-delegation-modal', animations: [SeeMoreAnimation], imports: [CommonModule, BaseCardModule, TranslateModule, ButtonsModule, MatMenuModule, MatButtonModule, PopperModule], providers: [LibModalComponent], template: "<div class=\"auto-delegation\" [ngClass]=\"{ 'edit-radus': !componentData?.expandedBaseCard }\">\n  <header class=\"auto-delegation__header\">\n    <div class=\"auto-delegation__info\">\n      <img class=\"auto-delegation__avatar\" [src]=\"componentData?.data?.imgSrc\" alt=\"User Avatar\" />\n      <div class=\"auto-delegation__wapper overflow\">\n        <div class=\"auto-delegation__title overflow\">{{ componentData?.data?.title }}</div>\n        <span class=\"auto-delegation__name\">{{ componentData?.data?.name }}, </span>\n        <span class=\"auto-delegation__location\">{{ componentData?.data?.location }}</span>\n      </div>\n    </div>\n    @if (componentData?.menuItems?.length) {\n      <div class=\"auto-delegation__menu\">\n        <div>\n          <lib-menu-btn [disableTranslation]=\"true\" [menuItems]=\"componentData?.menuItems\">\n            <img height=\"25px\" width=\"5px\" src=\"assets/auto-delegation-modal/menu.svg\" alt=\"\" />\n          </lib-menu-btn>\n        </div>\n      </div>\n    }\n  </header>\n  <div class=\"auto-delegation__details\">\n    <div class=\"auto-delegation__meetings\">\n      <div class=\"auto-delegation__meetings-count gradient-text\">{{ componentData?.data?.meetings }} {{ 'AUTO_DELEGATION.MEETINGS' | translate }}</div>\n      <div class=\"auto-delegation__meetings-duration gradient-text\">{{ componentData?.data?.days }}</div>\n    </div>\n    <div class=\"auto-delegation__price\">\n      <div class=\"auto-delegation__price-value gradient-text\">\n        $\n        <div class=\"auto-delegation__price-number gradient-text\">{{ componentData?.data?.price }}</div>\n      </div>\n    </div>\n  </div>\n  <div class=\"auto-delegation__lists\">\n    <ul class=\"auto-delegation__lists-features\">\n      @for (opt of componentData?.data?.planOptions; track opt) {\n        <li class=\"auto-delegation__lists-feature\">{{ opt }}</li>\n      }\n    </ul>\n  </div>\n\n  <div class=\"auto-delegation__action\">\n    <div class=\"auto-delegation__action-timer\">\n      <div class=\"auto-delegation__countdown\">\n        <!-- Background Image -->\n        <img class=\"auto-delegation__countdown-background-image\" src=\"assets/auto-delegation-modal/timer-center-dot.svg\" />\n        <!-- SVG Countdown Animation -->\n        <svg class=\"auto-delegation__countdown-active-stroke\" width=\"100%\" height=\"100%\" viewBox=\"0 0 103 103\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g\n            class=\"auto-delegation__countdown-active-g\"\n            [attr.mask]=\"'url(#' + activeCountdownPathId + ')'\"\n            opacity=\"1\"\n            [style.transform]=\"'rotate(' + 0 + 'deg)'\"\n            style=\"transform-origin: center\"\n          >\n            <circle cx=\"50\" cy=\"50\" r=\"50\" fill=\"#FFB5E9\" />\n          </g>\n          <defs>\n            <mask [attr.id]=\"activeCountdownPathId\">\n              <circle\n                d=\"M 9.04 78.68 A 50 50 0 1 1 90.96 78.68\"\n                class=\"auto-delegation__animated-path\"\n                cx=\"50\"\n                cy=\"50\"\n                r=\"42.5\"\n                stroke=\"white\"\n                stroke-linecap=\"round\"\n                stroke-width=\"10.64\"\n                [attr.stroke-dasharray]=\"totalStrokeLength\"\n                [attr.stroke-dashoffset]=\"strokeDashOffset\"\n              />\n            </mask>\n          </defs>\n        </svg>\n\n        <!-- Countdown Timer -->\n        <div class=\"auto-delegation__countdown-number\">{{ currentCountdownAt }} s</div>\n      </div>\n    </div>\n\n    <div #childModalElementRef class=\"auto-delegation__glowing-text\" (click)=\"accept()\">{{ 'AUTO_DELEGATION.ACCEPT_REQUEST' | translate }}</div>\n    <div class=\"auto-delegation__close-button\" (click)=\"reject()\">\n      <img class=\"auto-delegation__close-icon\" src=\"assets/auto-delegation-modal/cross.svg\" alt=\"cross-icon\" />\n    </div>\n  </div>\n  <div class=\"auto-delegation__dropDown\">\n    <span (click)=\"componentData.expandedBaseCard = !componentData.expandedBaseCard\"\n      >{{ 'DASHBOARD.SEE_' + (componentData?.expandedBaseCard ? 'LESS' : 'MORE') | translate }}...\n    </span>\n  </div>\n\n  @if (componentData?.expandedBaseCard) {\n    <div class=\"auto-delegation__profile\" [@dropDownMenu]>\n      <div class=\"auto-delegation__profile-header\">\n        <div>\n          <h3 class=\"red-text\">{{ 'AUTO_DELEGATION.SCORE_PREFERRED' | translate }}</h3>\n          <p>{{ componentData?.data?.score }} / {{ componentData?.data?.preferred }}+</p>\n        </div>\n        <div>\n          <h3 class=\"red-text text-right\">{{ 'AUTO_DELEGATION.LIFE_TIME_FEE' | translate }}</h3>\n          <p class=\"text-right\">{{ componentData?.data?.lifeTimeFee }}</p>\n        </div>\n      </div>\n      <div class=\"auto-delegation__profile-header\">\n        <div>\n          <h3 class=\"red-text\">{{ 'AUTO_DELEGATION.LIFE_TIME_MEETUPS' | translate }}</h3>\n          <p>{{ componentData?.data?.lifeTimeMeetups }}</p>\n        </div>\n        <div>\n          <h3 class=\"red-text text-right\">{{ 'AUTO_DELEGATION.JOIN_DATE' | translate }}</h3>\n          <p class=\"text-right\">{{ componentData?.data?.joinDate }}</p>\n        </div>\n      </div>\n      <div class=\"auto-delegation__profile-summary-container\">\n        <div class=\"auto-delegation__profile-summary\">\n          <div>\n            <h4>{{ 'AUTO_DELEGATION.PREFERENCES' | translate }} <br />{{ 'AUTO_DELEGATION.SUMMARY' | translate }}:</h4>\n            <div>\n              <p>\n                {{ componentData?.data?.preferences?.bust?.value }}\u00B1{{ componentData?.data?.preferences?.bust?.moe }} {{ componentData?.data?.preferences?.waist?.value }}\u00B1{{\n                  componentData?.data?.preferences?.waist?.moe\n                }}\n                {{ componentData?.data?.preferences?.height?.value }}\u00B1{{ componentData?.data?.preferences?.height?.moe }}\n              </p>\n            </div>\n            <div>\n              <p>{{ 'AUTO_DELEGATION.CELIBACY' | translate }} {{ componentData?.data?.preferences.celibacy }}+</p>\n              <p>{{ 'AUTO_DELEGATION.COOPERATION' | translate }} {{ componentData?.data?.preferences.cooperation }}+</p>\n              <p>{{ 'AUTO_DELEGATION.INTELLIGENCE' | translate }} {{ componentData?.data?.preferences.intelligence }}+</p>\n            </div>\n          </div>\n          <div>\n            <h4 class=\"text-right\">{{ 'AUTO_DELEGATION.PREFERENCES_PROFILE' | translate }}</h4>\n            <p class=\"text-right\">{{ componentData?.data?.preferencesProfile }}</p>\n            <div>\n              <h4 class=\"text-right\">{{ 'AUTO_DELEGATION.WEIGHT_HEIGHT_PREF' | translate }}</h4>\n              <p class=\"text-right\">{{ componentData?.data?.weight }}/{{ componentData?.data?.heightpref }}</p>\n            </div>\n          </div>\n        </div>\n        <div class=\"auto-delegation__profile-summary\">\n          <div>\n            <h4>\n              {{ 'AUTO_DELEGATION.PROFILE' | translate }} <br />\n              {{ 'AUTO_DELEGATION.SUMMARY' | translate }}:\n            </h4>\n            <div *ngFor=\"let item of componentData?.data?.profile\">\n              <p>{{ item }}</p>\n            </div>\n          </div>\n          <div class=\"auto-delegation__col-center\">\n            <h4 class=\"text-right\">{{ 'AUTO_DELEGATION.COMMUNICATION_STYLE' | translate }}</h4>\n            <p class=\"text-right\">{{ componentData?.data?.communicationStyle }}</p>\n            <div>\n              <h4 class=\"text-right\">{{ 'AUTO_DELEGATION.GOAL' | translate }}</h4>\n              <p class=\"text-right\">{{ componentData?.data?.goal }}</p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{font-size:clamp(0px,3.2dvw,15px)}:host *{box-sizing:border-box}.auto-delegation{-webkit-backdrop-filter:blur(.625em);backdrop-filter:blur(.625em);background:#d3d3d333;color:#fff;padding:1.625em 2.75em 2.25em;width:28.125em;margin:0 auto;border-radius:1.5625em;font-family:Gilroy;overflow-y:scroll;max-height:95vh}.auto-delegation__header{display:flex;justify-content:space-between;align-items:flex-start}.auto-delegation__details{display:flex;justify-content:space-between;align-items:center}.auto-delegation__avatar{width:3.75em;height:3.75em;border-radius:50%;object-fit:cover}.auto-delegation__wapper{padding-bottom:.375em}.auto-delegation__info{display:flex;gap:.75em;align-items:center;width:18.75em;height:4.6875em}.auto-delegation__title{font-size:1.875em;font-weight:400;padding-bottom:.5em;font-family:Calistoga;width:13.75em}.auto-delegation__name{font-size:.875em;font-weight:600;font-family:Gilroy}.auto-delegation__menu{cursor:pointer}.auto-delegation__location{font-size:.875em;font-weight:400;font-family:Gilroy;color:#ccc}.auto-delegation__meeting{width:100%;height:100%}.auto-delegation__meetings-count,.auto-delegation__meetings-duration{font-family:Gilroy;font-size:1.0625em;font-weight:400}.auto-delegation__price{text-align:end}.auto-delegation__price-value{display:flex;justify-content:flex-end;align-items:flex-start;gap:.25em}.auto-delegation__price-number{font-size:2.25em;font-weight:400}.auto-delegation__price-market{font-size:.5em;color:#8e8e8e}.auto-delegation__lists-features{padding-left:.9375em}.auto-delegation__lists{list-style:none;display:flex;justify-content:space-between;align-items:flex-start}.auto-delegation__action{border-radius:2em;background-color:#2b2929;display:flex;align-items:center;margin-top:.3125em;padding:0;height:3.4375em;justify-content:space-between}.auto-delegation__action__timer{border:.0625em solid gray;border-radius:100%;height:3.125em;width:3.125em;font-size:.875em;color:#f39c12}.auto-delegation__summary,.auto-delegation__preferences{margin-top:1em;font-size:.875em;line-height:1.5}.auto-delegation__preferences-summary{font-size:.75em;color:#aaa}.auto-delegation__glowing-text{font-family:Calistoga;font-size:1.5em;font-weight:800;color:#fff;text-align:center;margin-right:1.25em;text-shadow:0 0 .3125em #ff89ac,0 0 .625em #ff89ac,0 0 1.25em #ff89ac,0 0 2.5em #ff2475,0 0 5em #ff2475;-webkit-text-fill-color:#fff;cursor:pointer}.auto-delegation__close-button{display:flex;align-items:center;background:linear-gradient(228deg,#101113 10%,#2b2f33);padding:.625em;border-radius:100%;border:.0625em solid black;margin-right:.3125em;cursor:pointer}.auto-delegation__close-icon{width:1.375em;height:1.375em}.auto-delegation__dropDown{margin-top:.9375em;margin-bottom:.625em;display:flex;justify-content:center}.auto-delegation__dropDown>span{font-family:Gilroy;cursor:pointer;font-size:.625em;color:#8e8e8e}.auto-delegation__profile-summary-container{margin-top:1.25em}.auto-delegation__profile{overflow:hidden}.auto-delegation__profile-header,.auto-delegation__profile-summary{display:flex;justify-content:space-between}.auto-delegation__profile-header>div,.auto-delegation__profile-summary>div{text-align:left;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:11.25em}.auto-delegation__profile-summary div h4{font-weight:500;font-family:Gilroy;font-size:1em;margin-bottom:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.auto-delegation__profile-summary div p{color:#8e8e8e;font-size:.85em;font-weight:400;font-family:Gilroy;margin:.125em!important;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.auto-delegation__countdown{position:relative;width:4.375em;height:4.375em;right:.75em}.auto-delegation__countdown-background-image{background:linear-gradient(274deg,#232323 50%,#2b2f33);box-shadow:.01em -.0525em 1.53em #82676e,.49em .49em 1.715em #141415;border:2px solid #464646;border-radius:100%;position:absolute;top:.6em;left:.9em;width:3.2em;height:3.2em}.auto-delegation__countdown-active-stroke{position:absolute;width:3.5em;height:3.5em;top:.6em;left:.6em;animation-duration:.8s;transform:rotate(90deg)}.auto-delegation__countdown-number{height:3em;width:3em;display:flex;justify-content:center;align-items:center;background:linear-gradient(66deg,#101113 12%,#2b2f33);box-shadow:inset -.49em -.49em 1.715em #453d3f,inset .49em .49em 1.715em #141415;border:2px solid #333333;border-radius:100%;position:absolute;top:50%;left:57%;transform:translate(-50%,-50%);font-weight:600;font-size:.6em;color:#fff}.auto-delegation__col-center{display:flex;flex-direction:column;justify-content:center}.auto-delegation__animated-path{transition:stroke-dashoffset 1s linear}.gradient-text{background:linear-gradient(to top,#efc5d1,#fe638e);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.auto-delegation:before{content:\"\";position:absolute;inset:0;border-radius:1.5625em;padding:.125em;background:linear-gradient(to top,transparent,transparent,#ccabc4);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;z-index:-1}.red-text{font-family:Gilroy;margin-top:.5em;margin-bottom:0;font-size:1.0625em;color:#f4446c;font-weight:600}.text-right{text-align:end}.overflow{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media (max-width: 768px){:host{font-size:calc(clamp(0px,3.2dvw,15px)*.8)}}.edit-radus{border-radius:5.5625em!important}.edit-radus:before{border-radius:5.5625em!important}::-webkit-scrollbar{width:0;background:transparent}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i2.PopupModalService }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [MODAL_DATA]
-                }] }], propDecorators: { childModalElementRef: [{
-                type: ViewChild,
-                args: ['childModalElementRef']
-            }], countdown: [{
-                type: Input
-            }], expandedBaseCard: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], menuItems: [{
-                type: Input
-            }], event: [{
-                type: Output
-            }] } });
-
-var VisualManagerModalEventTypes;
-(function (VisualManagerModalEventTypes) {
-    VisualManagerModalEventTypes["Click"] = "click";
-    VisualManagerModalEventTypes["Close"] = "close";
-})(VisualManagerModalEventTypes || (VisualManagerModalEventTypes = {}));
-
-var VisualManagerModalEventValue;
-(function (VisualManagerModalEventValue) {
-    VisualManagerModalEventValue["Apply"] = "apply";
-    VisualManagerModalEventValue["Reset"] = "reset";
-    VisualManagerModalEventValue["AddPreference"] = "add-preference";
-    VisualManagerModalEventValue["RemovePreference"] = "remove-preference";
-    VisualManagerModalEventValue["Close"] = "close";
-})(VisualManagerModalEventValue || (VisualManagerModalEventValue = {}));
-
-class LibVisualManagerModalComponent {
-    get selectedItems() {
-        return this.preferences.filter((p) => p.isSelected);
-    }
-    get deselectedItems() {
-        return this.preferences.filter((p) => !p.isSelected);
-    }
-    constructor(changeDetectorRef, popupModalService, modalData) {
-        this.changeDetectorRef = changeDetectorRef;
-        this.popupModalService = popupModalService;
-        this.modalData = modalData;
-        this.event = new EventEmitter();
-        this.componentData = null;
-        this.preferences = [];
-        this.originalPreferences = [];
-        this.preferenceControls = new Map();
-        if (modalData) {
-            this.componentData = modalData;
-        }
-    }
-    ngOnInit() {
-        if (!this.componentData) {
-            this.componentData = {
-                data: this.data || { preferences: [] },
-            };
-        }
-        // Create a deep copy for working state
-        this.preferences = JSON.parse(JSON.stringify(this.componentData.data.preferences || []));
-        // Keep original for reset
-        this.originalPreferences = JSON.parse(JSON.stringify(this.componentData.data.preferences || []));
-        // Create FormControls for each preference name
-        this.preferences.forEach((preference) => {
-            this.preferenceControls.set(preference.id, new FormControl(preference.name));
-        });
-    }
-    ngAfterViewInit() {
-        if (this.childModalElementRef) {
-            this.popupModalService.setChildModalElementRef(this.childModalElementRef);
-        }
-    }
-    togglePreference(preference, event) {
-        if (event) {
-            event.preventDefault();
-            event.stopPropagation();
-        }
-        const index = this.preferences.findIndex((p) => p.id === preference.id);
-        if (index !== -1) {
-            const wasSelected = this.preferences[index].isSelected;
-            this.preferences[index].isSelected = !wasSelected;
-            // Force change detection to update the view
-            this.changeDetectorRef.detectChanges();
-            const eventValue = this.preferences[index].isSelected
-                ? VisualManagerModalEventValue.AddPreference
-                : VisualManagerModalEventValue.RemovePreference;
-            // Emit event but don't close the modal - user can continue toggling items
-            if (this.data) {
-                this.event.emit({
-                    type: VisualManagerModalEventTypes.Click,
-                    value: eventValue,
-                    data: { preferenceId: preference.id, preferences: this.preferences },
-                });
-            }
-        }
-    }
-    apply() {
-        if (this.data) {
-            this.event.emit({
-                type: VisualManagerModalEventTypes.Click,
-                value: VisualManagerModalEventValue.Apply,
-                data: { preferences: this.preferences },
-            });
-        }
-        else {
-            this.popupModalService.hide({
-                type: VisualManagerModalEventTypes.Click,
-                value: VisualManagerModalEventValue.Apply,
-                data: { preferences: this.preferences },
-            });
+            this.componentData = modalData;
         }
     }
-    reset() {
-        // Reset to original state
-        this.preferences = JSON.parse(JSON.stringify(this.originalPreferences));
-        // Reset FormControls
-        this.preferences.forEach((preference) => {
-            const control = this.preferenceControls.get(preference.id);
-            if (control) {
-                control.setValue(preference.name);
-            }
-            else {
-                this.preferenceControls.set(preference.id, new FormControl(preference.name));
-            }
+    ngOnInit() {
+        if (!this.componentData) {
+            // Can use that component as child and pass Inputs
+            this.componentData = {
+                countdown: this.countdown,
+                expandedBaseCard: this.expandedBaseCard,
+                menuItems: this.menuItems,
+                data: this.data || null,
+            };
+        }
+    }
+    ngAfterViewInit() {
+        this.activeCountdownPathId = CommonOperations.randomString(100);
+        interval(1000)
+            .pipe(take(this.componentData?.countdown + 1))
+            .subscribe({
+            next: (elapsedSeconds) => {
+                this.currentCountdownAt = this.componentData?.countdown - elapsedSeconds;
+                this.strokeDashOffset = this.totalStrokeLength * ((this.componentData?.countdown - this.currentCountdownAt) / this.componentData?.countdown);
+                this.changeDetectorRef.detectChanges();
+            },
+            complete: () => {
+                if (this.data) {
+                    this.event.emit({ type: AutoDelegationEventTypes.Countdown, value: AutoDelegationEventValue.CountdownCompleted });
+                }
+                else {
+                    this.popupModalService.hide({ type: AutoDelegationEventTypes.Countdown, value: AutoDelegationEventValue.CountdownCompleted });
+                }
+            },
         });
-        this.changeDetectorRef.detectChanges();
+        this.popupModalService.setChildModalElementRef(this.childModalElementRef);
+    }
+    reject() {
         if (this.data) {
-            this.event.emit({
-                type: VisualManagerModalEventTypes.Click,
-                value: VisualManagerModalEventValue.Reset,
-                data: { preferences: this.preferences },
-            });
+            this.event.emit({ type: AutoDelegationEventTypes.Click, value: AutoDelegationEventValue.RequestRejected });
         }
         else {
-            this.popupModalService.hide({
-                type: VisualManagerModalEventTypes.Click,
-                value: VisualManagerModalEventValue.Reset,
-                data: { preferences: this.preferences },
-            });
+            this.popupModalService.hide({ type: AutoDelegationEventTypes.Click, value: AutoDelegationEventValue.RequestRejected });
         }
     }
-    close() {
+    accept() {
         if (this.data) {
-            this.event.emit({
-                type: VisualManagerModalEventTypes.Close,
-                value: VisualManagerModalEventValue.Close,
-            });
+            this.event.emit({ type: AutoDelegationEventTypes.Click, value: AutoDelegationEventValue.RequestAcceped });
         }
         else {
-            this.popupModalService.hide({
-                type: VisualManagerModalEventTypes.Close,
-                value: VisualManagerModalEventValue.Close,
-            });
-        }
-    }
-    onPreferenceNameChange(preference, newName) {
-        const index = this.preferences.findIndex((p) => p.id === preference.id);
-        if (index !== -1) {
-            this.preferences[index].name = newName || '';
-            const control = this.preferenceControls.get(preference.id);
-            if (control && control.value !== newName) {
-                control.setValue(newName || '', { emitEvent: false });
-            }
-            this.changeDetectorRef.detectChanges();
-        }
-    }
-    getPreferenceControl(preferenceId) {
-        return this.preferenceControls.get(preferenceId) || new FormControl('');
-    }
-    onDragStart(event, preference, isSelected) {
-        if (event.dataTransfer) {
-            event.dataTransfer.effectAllowed = 'move';
-            event.dataTransfer.setData('text/plain', JSON.stringify({ id: preference.id, isSelected }));
-        }
-        if (event.target) {
-            event.target.style.opacity = '0.5';
-        }
-    }
-    onDragEnd(event) {
-        if (event.target) {
-            event.target.style.opacity = '1';
-        }
-    }
-    onDragOver(event) {
-        event.preventDefault();
-        if (event.dataTransfer) {
-            event.dataTransfer.dropEffect = 'move';
-        }
-    }
-    onDrop(event, targetPreference, isSelected) {
-        event.preventDefault();
-        event.stopPropagation();
-        if (!event.dataTransfer) {
-            return;
-        }
-        const data = event.dataTransfer.getData('text/plain');
-        if (!data) {
-            return;
-        }
-        try {
-            const { id: draggedId, isSelected: draggedIsSelected } = JSON.parse(data);
-            // Only allow reordering within the same section (selected or deselected)
-            if (draggedIsSelected !== isSelected) {
-                return;
-            }
-            const draggedIndex = this.preferences.findIndex((p) => p.id === draggedId);
-            const targetIndex = this.preferences.findIndex((p) => p.id === targetPreference.id);
-            if (draggedIndex === -1 || targetIndex === -1 || draggedIndex === targetIndex) {
-                return;
-            }
-            // Reorder the items
-            const [draggedItem] = this.preferences.splice(draggedIndex, 1);
-            this.preferences.splice(targetIndex, 0, draggedItem);
-            this.changeDetectorRef.detectChanges();
-        }
-        catch (error) {
-            console.error('Error handling drop:', error);
+            this.popupModalService.hide({ type: AutoDelegationEventTypes.Click, value: AutoDelegationEventValue.RequestAcceped });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibVisualManagerModalComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2.PopupModalService }, { token: MODAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LibVisualManagerModalComponent, isStandalone: true, selector: "lib-visual-manager-modal", inputs: { data: "data" }, outputs: { event: "event" }, providers: [LibModalComponent], viewQueries: [{ propertyName: "childModalElementRef", first: true, predicate: ["childModalElementRef"], descendants: true }], ngImport: i0, template: "<div class=\"visual-manager-modal\" #childModalElementRef>\n  <header class=\"visual-manager-modal__header\">\n    <div class=\"visual-manager-modal__header-left\">\n      <img class=\"visual-manager-modal__filter-icon\" src=\"assets/icons/filter-icon.svg\" alt=\"Filter icon\" />\n      <h2 class=\"visual-manager-modal__title\">{{ 'VISUAL_MANAGER_MODAL.TITLE' | translate }}</h2>\n    </div>\n    <button class=\"visual-manager-modal__close-button\" (click)=\"close()\">\n      <img class=\"visual-manager-modal__close-icon\" src=\"assets/icons/close-icon.svg\" alt=\"Close\" />\n    </button>\n  </header>\n\n  <div class=\"visual-manager-modal__content\">\n    <!-- Selected Items Section -->\n    @if (selectedItems.length > 0) {\n      <div class=\"visual-manager-modal__section\">\n        <ol class=\"visual-manager-modal__list visual-manager-modal__list--ordered\">\n          @for (preference of selectedItems; track preference.id; let i = $index) {\n            <li \n              class=\"visual-manager-modal__item\"\n              (dragover)=\"onDragOver($event)\"\n              (drop)=\"onDrop($event, preference, true)\"\n            >\n              <span class=\"visual-manager-modal__item-number\">{{ i + 1 }}</span>\n              <div class=\"visual-manager-modal__input-wrapper\">\n                <lib-input-field\n                  class=\"visual-manager-modal__item-name\"\n                  [formControl]=\"getPreferenceControl(preference.id)\"\n                  (valueChange)=\"onPreferenceNameChange(preference, $event)\"\n                ></lib-input-field>\n                <button class=\"visual-manager-modal__action-button1\" > </button>\n                <button\n                  class=\"visual-manager-modal__action-button\"\n                  (click)=\"togglePreference(preference, $event)\"\n                >\n                  <img class=\"visual-manager-modal__action-icon\" src=\"assets/icons/close-icon.svg\" alt=\"Remove\" />\n                </button>\n              </div>\n              <img \n                class=\"visual-manager-modal__drag-handle\" \n                src=\"assets/icons/drag-handle.svg\" \n                alt=\"Drag handle\"\n                draggable=\"true\"\n                (dragstart)=\"onDragStart($event, preference, true)\"\n                (dragend)=\"onDragEnd($event)\"\n              />\n            </li>\n          }\n        </ol>\n      </div>\n    }\n\n    <!-- Separator -->\n    @if (selectedItems.length > 0 && deselectedItems.length > 0) {\n      <div class=\"visual-manager-modal__separator\"></div>\n    }\n\n    <!-- Deselected Items Section -->\n    @if (deselectedItems.length > 0) {\n      <div class=\"visual-manager-modal__section\">\n        <ul class=\"visual-manager-modal__list\">\n          @for (preference of deselectedItems; track preference.id) {\n            <li \n              class=\"visual-manager-modal__item\"\n              (dragover)=\"onDragOver($event)\"\n              (drop)=\"onDrop($event, preference, false)\"\n            >\n              <div class=\"visual-manager-modal__input-wrapper\">\n                <lib-input-field\n                  class=\"visual-manager-modal__item-name\"\n                  [formControl]=\"getPreferenceControl(preference.id)\"\n                  (valueChange)=\"onPreferenceNameChange(preference, $event)\"\n                ></lib-input-field>\n                <button class=\"visual-manager-modal__action-button1\" > </button>\n                <button\n                  class=\"visual-manager-modal__action-button\"\n                  (click)=\"togglePreference(preference, $event)\"\n                >\n                  <img class=\"visual-manager-modal__action-icon\" src=\"assets/icons/plus.svg\" alt=\"Add\" />\n                </button>\n              </div>\n              <img \n                class=\"visual-manager-modal__drag-handle\" \n                src=\"assets/icons/drag-handle.svg\" \n                alt=\"Drag handle\"\n                draggable=\"true\"\n                (dragstart)=\"onDragStart($event, preference, false)\"\n                (dragend)=\"onDragEnd($event)\"\n              />\n            </li>\n          }\n        </ul>\n      </div>\n    }\n  </div>\n\n  <footer class=\"visual-manager-modal__footer\">\n    <lib-secondary-btn (click)=\"reset()\">\n      {{ 'VISUAL_MANAGER_MODAL.RESET' | translate }}\n    </lib-secondary-btn>\n    <lib-primary-btn (click)=\"apply()\">\n      {{ 'VISUAL_MANAGER_MODAL.APPLY' | translate }}\n    </lib-primary-btn>\n  </footer>\n</div>\n\n", styles: [":host{font-size:clamp(0px,3.2dvw,15px)}:host *{box-sizing:border-box}.visual-manager-modal{-webkit-backdrop-filter:blur(.625em);backdrop-filter:blur(.625em);background:linear-gradient(180deg,#323133,#1f1e20);color:#fff;padding:1.5em 2em;width:28.125em;margin:0 auto;border-radius:1.5625em;font-family:Gilroy;box-shadow:.5em .5em 1em #00000080,-.5em -.5em 1em #ffffff0d;position:relative;display:flex;flex-direction:column}.visual-manager-modal__header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.5em;padding-bottom:1em;border-bottom:1px solid rgba(255,255,255,.1);gap:.75em}.visual-manager-modal__header-left{display:flex;flex-direction:column;align-items:center;gap:.5em;flex:1}.visual-manager-modal__filter-icon{width:3em;height:3em;cursor:pointer;flex-shrink:0}.visual-manager-modal__title{font-size:1.25em;font-weight:500;font-family:Gilroy;margin:0;color:#fff}.visual-manager-modal__close-button{background:transparent;border:none;cursor:pointer;padding:.25em;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s}.visual-manager-modal__close-button:hover{background:#ffffff1a}.visual-manager-modal__close-icon{width:2em;height:2em;filter:brightness(0) saturate(100%) invert(39%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(98%) contrast(105%)}.visual-manager-modal__content{margin-bottom:1.5em;max-height:50vh;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:1em}.visual-manager-modal__section{display:flex;flex-direction:column;gap:.75em}.visual-manager-modal__section-label{font-size:.9em;font-weight:500;color:#4a9eff;margin-bottom:.25em}.visual-manager-modal__separator{height:1px;background:#ffffff1a;margin:.5em 0}.visual-manager-modal__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75em}.visual-manager-modal__list--ordered{list-style:none}.visual-manager-modal__item{display:flex;align-items:center;gap:.5em;width:100%}.visual-manager-modal__item-number{display:flex;align-items:center;justify-content:center;min-width:1.5em;height:1.5em;font-size:.9em;font-weight:500;color:#ffffffb3;flex-shrink:0}.visual-manager-modal__input-wrapper{position:relative;flex:1;min-width:0}.visual-manager-modal__item-name{width:100%}.visual-manager-modal__item-name ::ng-deep .content-wrapper{position:relative}.visual-manager-modal__item-name ::ng-deep .input-field,.visual-manager-modal__item-name ::ng-deep .input-field-readonly{padding-right:2.5em}.visual-manager-modal__action-button{position:absolute;right:.4em;top:50%;transform:translateY(-50%);background:linear-gradient(174.9deg,#595859cf -26.99%,#29252dcf 22.7% 100.94%);border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .2s;width:3em;height:3em;border-radius:50%;pointer-events:auto;-webkit-backdrop-filter:blur(.5326657891px);backdrop-filter:blur(.5326657891px);box-shadow:7.24px 6.58px 17.77px 1.65px #121212a6,0 0 2.45px #0000004d}.visual-manager-modal__action-button:active{opacity:.9;box-shadow:inset 2px 2px 4px #0006,inset -2px -2px 4px #ffffff14}.visual-manager-modal__action-button1{position:absolute;right:.4em;top:50%;transform:translateY(-50%);background:linear-gradient(174.9deg,#69686acf 28.4%,#29252dcf 92.06% 100.94%);border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .2s;width:3em;height:3em;border-radius:50%;pointer-events:auto;-webkit-backdrop-filter:blur(.5326657891px);backdrop-filter:blur(.5326657891px);box-shadow:0 2.56px 2.56px .82px #0000006e,0 0 10.65px 5.33px #4242429c}.visual-manager-modal__action-icon{width:1em;height:1em;display:block}.visual-manager-modal__drag-handle{width:1em;height:1em;cursor:grab;flex-shrink:0;opacity:.6;-webkit-user-select:none;user-select:none}.visual-manager-modal__drag-handle:active{cursor:grabbing}.visual-manager-modal__item.dragging{opacity:.5}.visual-manager-modal__footer{display:flex;justify-content:space-between;gap:1em;padding-top:1em;border-top:1px solid rgba(255,255,255,.1);margin-top:auto}.visual-manager-modal__footer lib-secondary-btn,.visual-manager-modal__footer lib-primary-btn{flex:1}.visual-manager-modal__content::-webkit-scrollbar{width:.5em}.visual-manager-modal__content::-webkit-scrollbar-track{background:#0003;border-radius:.25em}.visual-manager-modal__content::-webkit-scrollbar-thumb{background:#fff3;border-radius:.25em}.visual-manager-modal__content::-webkit-scrollbar-thumb:hover{background:#ffffff4d}@media (max-width: 768px){:host{font-size:calc(clamp(0px,3.2dvw,15px)*.8)}.visual-manager-modal{width:90%;padding:1.25em 1.5em}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2.PrimaryBtnComponent, selector: "lib-primary-btn", inputs: ["hoverOutline", "disabled", "type", "form", "label", "showArrowIcon", "disableTextShadow", "loading$"] }, { kind: "component", type: i2.SecondaryBtnComponent, selector: "lib-secondary-btn", inputs: ["hoverOutline", "disabled", "type", "form", "label", "showArrowIcon", "disableTextShadow", "loading$"] }, { kind: "ngmodule", type: InputFieldModule }, { kind: "component", type: i2.InputFieldComponent, selector: "lib-input-field,[lib-input-field]", inputs: ["name", "autocomplete", "label", "placeholder", "type", "readonly", "focus", "enableGoogleAddress", "locationAutocompleteConfig", "defaultLocation", "mask", "prefix", "suffix", "maxLength", "value", "address", "textarea", "resize", "counter", "patterns", "trimWhiteSpace", "disabled"], outputs: ["mapError", "locationChange", "keyDown", "onBlur"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibAutoDelegationModalComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2.PopupModalService }, { token: MODAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LibAutoDelegationModalComponent, isStandalone: true, selector: "lib-auto-delegation-modal", inputs: { countdown: "countdown", expandedBaseCard: "expandedBaseCard", data: "data", menuItems: "menuItems" }, outputs: { event: "event" }, providers: [LibModalComponent], viewQueries: [{ propertyName: "childModalElementRef", first: true, predicate: ["childModalElementRef"], descendants: true }], ngImport: i0, template: "<div class=\"auto-delegation\" [ngClass]=\"{ 'edit-radus': !componentData?.expandedBaseCard }\">\n  <header class=\"auto-delegation__header\">\n    <div class=\"auto-delegation__info\">\n      <img class=\"auto-delegation__avatar\" [src]=\"componentData?.data?.imgSrc\" alt=\"User Avatar\" />\n      <div class=\"auto-delegation__wapper overflow\">\n        <div class=\"auto-delegation__title overflow\">{{ componentData?.data?.title }}</div>\n        <span class=\"auto-delegation__name\">{{ componentData?.data?.name }}, </span>\n        <span class=\"auto-delegation__location\">{{ componentData?.data?.location }}</span>\n      </div>\n    </div>\n    @if (componentData?.menuItems?.length) {\n      <div class=\"auto-delegation__menu\">\n        <div>\n          <lib-menu-btn [disableTranslation]=\"true\" [menuItems]=\"componentData?.menuItems\">\n            <img height=\"25px\" width=\"5px\" src=\"assets/auto-delegation-modal/menu.svg\" alt=\"\" />\n          </lib-menu-btn>\n        </div>\n      </div>\n    }\n  </header>\n  <div class=\"auto-delegation__details\">\n    <div class=\"auto-delegation__meetings\">\n      <div class=\"auto-delegation__meetings-count gradient-text\">{{ componentData?.data?.meetings }} {{ 'AUTO_DELEGATION.MEETINGS' | translate }}</div>\n      <div class=\"auto-delegation__meetings-duration gradient-text\">{{ componentData?.data?.days }}</div>\n    </div>\n    <div class=\"auto-delegation__price\">\n      <div class=\"auto-delegation__price-value gradient-text\">\n        $\n        <div class=\"auto-delegation__price-number gradient-text\">{{ componentData?.data?.price }}</div>\n      </div>\n    </div>\n  </div>\n  <div class=\"auto-delegation__lists\">\n    <ul class=\"auto-delegation__lists-features\">\n      @for (opt of componentData?.data?.planOptions; track opt) {\n        <li class=\"auto-delegation__lists-feature\">{{ opt }}</li>\n      }\n    </ul>\n  </div>\n\n  <div class=\"auto-delegation__action\">\n    <div class=\"auto-delegation__action-timer\">\n      <div class=\"auto-delegation__countdown\">\n        <!-- Background Image -->\n        <img class=\"auto-delegation__countdown-background-image\" src=\"assets/auto-delegation-modal/timer-center-dot.svg\" />\n        <!-- SVG Countdown Animation -->\n        <svg class=\"auto-delegation__countdown-active-stroke\" width=\"100%\" height=\"100%\" viewBox=\"0 0 103 103\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g\n            class=\"auto-delegation__countdown-active-g\"\n            [attr.mask]=\"'url(#' + activeCountdownPathId + ')'\"\n            opacity=\"1\"\n            [style.transform]=\"'rotate(' + 0 + 'deg)'\"\n            style=\"transform-origin: center\"\n          >\n            <circle cx=\"50\" cy=\"50\" r=\"50\" fill=\"#FFB5E9\" />\n          </g>\n          <defs>\n            <mask [attr.id]=\"activeCountdownPathId\">\n              <circle\n                d=\"M 9.04 78.68 A 50 50 0 1 1 90.96 78.68\"\n                class=\"auto-delegation__animated-path\"\n                cx=\"50\"\n                cy=\"50\"\n                r=\"42.5\"\n                stroke=\"white\"\n                stroke-linecap=\"round\"\n                stroke-width=\"10.64\"\n                [attr.stroke-dasharray]=\"totalStrokeLength\"\n                [attr.stroke-dashoffset]=\"strokeDashOffset\"\n              />\n            </mask>\n          </defs>\n        </svg>\n\n        <!-- Countdown Timer -->\n        <div class=\"auto-delegation__countdown-number\">{{ currentCountdownAt }} s</div>\n      </div>\n    </div>\n\n    <div #childModalElementRef class=\"auto-delegation__glowing-text\" (click)=\"accept()\">{{ 'AUTO_DELEGATION.ACCEPT_REQUEST' | translate }}</div>\n    <div class=\"auto-delegation__close-button\" (click)=\"reject()\">\n      <img class=\"auto-delegation__close-icon\" src=\"assets/auto-delegation-modal/cross.svg\" alt=\"cross-icon\" />\n    </div>\n  </div>\n  <div class=\"auto-delegation__dropDown\">\n    <span (click)=\"componentData.expandedBaseCard = !componentData.expandedBaseCard\"\n      >{{ 'DASHBOARD.SEE_' + (componentData?.expandedBaseCard ? 'LESS' : 'MORE') | translate }}...\n    </span>\n  </div>\n\n  @if (componentData?.expandedBaseCard) {\n    <div class=\"auto-delegation__profile\" [@dropDownMenu]>\n      <div class=\"auto-delegation__profile-header\">\n        <div>\n          <h3 class=\"red-text\">{{ 'AUTO_DELEGATION.SCORE_PREFERRED' | translate }}</h3>\n          <p>{{ componentData?.data?.score }} / {{ componentData?.data?.preferred }}+</p>\n        </div>\n        <div>\n          <h3 class=\"red-text text-right\">{{ 'AUTO_DELEGATION.LIFE_TIME_FEE' | translate }}</h3>\n          <p class=\"text-right\">{{ componentData?.data?.lifeTimeFee }}</p>\n        </div>\n      </div>\n      <div class=\"auto-delegation__profile-header\">\n        <div>\n          <h3 class=\"red-text\">{{ 'AUTO_DELEGATION.LIFE_TIME_MEETUPS' | translate }}</h3>\n          <p>{{ componentData?.data?.lifeTimeMeetups }}</p>\n        </div>\n        <div>\n          <h3 class=\"red-text text-right\">{{ 'AUTO_DELEGATION.JOIN_DATE' | translate }}</h3>\n          <p class=\"text-right\">{{ componentData?.data?.joinDate }}</p>\n        </div>\n      </div>\n      <div class=\"auto-delegation__profile-summary-container\">\n        <div class=\"auto-delegation__profile-summary\">\n          <div>\n            <h4>{{ 'AUTO_DELEGATION.PREFERENCES' | translate }} <br />{{ 'AUTO_DELEGATION.SUMMARY' | translate }}:</h4>\n            <div>\n              <p>\n                {{ componentData?.data?.preferences?.bust?.value }}\u00B1{{ componentData?.data?.preferences?.bust?.moe }} {{ componentData?.data?.preferences?.waist?.value }}\u00B1{{\n                  componentData?.data?.preferences?.waist?.moe\n                }}\n                {{ componentData?.data?.preferences?.height?.value }}\u00B1{{ componentData?.data?.preferences?.height?.moe }}\n              </p>\n            </div>\n            <div>\n              <p>{{ 'AUTO_DELEGATION.CELIBACY' | translate }} {{ componentData?.data?.preferences.celibacy }}+</p>\n              <p>{{ 'AUTO_DELEGATION.COOPERATION' | translate }} {{ componentData?.data?.preferences.cooperation }}+</p>\n              <p>{{ 'AUTO_DELEGATION.INTELLIGENCE' | translate }} {{ componentData?.data?.preferences.intelligence }}+</p>\n            </div>\n          </div>\n          <div>\n            <h4 class=\"text-right\">{{ 'AUTO_DELEGATION.PREFERENCES_PROFILE' | translate }}</h4>\n            <p class=\"text-right\">{{ componentData?.data?.preferencesProfile }}</p>\n            <div>\n              <h4 class=\"text-right\">{{ 'AUTO_DELEGATION.WEIGHT_HEIGHT_PREF' | translate }}</h4>\n              <p class=\"text-right\">{{ componentData?.data?.weight }}/{{ componentData?.data?.heightpref }}</p>\n            </div>\n          </div>\n        </div>\n        <div class=\"auto-delegation__profile-summary\">\n          <div>\n            <h4>\n              {{ 'AUTO_DELEGATION.PROFILE' | translate }} <br />\n              {{ 'AUTO_DELEGATION.SUMMARY' | translate }}:\n            </h4>\n            <div *ngFor=\"let item of componentData?.data?.profile\">\n              <p>{{ item }}</p>\n            </div>\n          </div>\n          <div class=\"auto-delegation__col-center\">\n            <h4 class=\"text-right\">{{ 'AUTO_DELEGATION.COMMUNICATION_STYLE' | translate }}</h4>\n            <p class=\"text-right\">{{ componentData?.data?.communicationStyle }}</p>\n            <div>\n              <h4 class=\"text-right\">{{ 'AUTO_DELEGATION.GOAL' | translate }}</h4>\n              <p class=\"text-right\">{{ componentData?.data?.goal }}</p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{font-size:clamp(0px,3.2dvw,15px)}:host *{box-sizing:border-box}.auto-delegation{-webkit-backdrop-filter:blur(.625em);backdrop-filter:blur(.625em);background:#d3d3d333;color:#fff;padding:1.625em 2.75em 2.25em;width:28.125em;margin:0 auto;border-radius:1.5625em;font-family:Gilroy;overflow-y:scroll;max-height:95vh}.auto-delegation__header{display:flex;justify-content:space-between;align-items:flex-start}.auto-delegation__details{display:flex;justify-content:space-between;align-items:center}.auto-delegation__avatar{width:3.75em;height:3.75em;border-radius:50%;object-fit:cover}.auto-delegation__wapper{padding-bottom:.375em}.auto-delegation__info{display:flex;gap:.75em;align-items:center;width:18.75em;height:4.6875em}.auto-delegation__title{font-size:1.875em;font-weight:400;padding-bottom:.5em;font-family:Calistoga;width:13.75em}.auto-delegation__name{font-size:.875em;font-weight:600;font-family:Gilroy}.auto-delegation__menu{cursor:pointer}.auto-delegation__location{font-size:.875em;font-weight:400;font-family:Gilroy;color:#ccc}.auto-delegation__meeting{width:100%;height:100%}.auto-delegation__meetings-count,.auto-delegation__meetings-duration{font-family:Gilroy;font-size:1.0625em;font-weight:400}.auto-delegation__price{text-align:end}.auto-delegation__price-value{display:flex;justify-content:flex-end;align-items:flex-start;gap:.25em}.auto-delegation__price-number{font-size:2.25em;font-weight:400}.auto-delegation__price-market{font-size:.5em;color:#8e8e8e}.auto-delegation__lists-features{padding-left:.9375em}.auto-delegation__lists{list-style:none;display:flex;justify-content:space-between;align-items:flex-start}.auto-delegation__action{border-radius:2em;background-color:#2b2929;display:flex;align-items:center;margin-top:.3125em;padding:0;height:3.4375em;justify-content:space-between}.auto-delegation__action__timer{border:.0625em solid gray;border-radius:100%;height:3.125em;width:3.125em;font-size:.875em;color:#f39c12}.auto-delegation__summary,.auto-delegation__preferences{margin-top:1em;font-size:.875em;line-height:1.5}.auto-delegation__preferences-summary{font-size:.75em;color:#aaa}.auto-delegation__glowing-text{font-family:Calistoga;font-size:1.5em;font-weight:800;color:#fff;text-align:center;margin-right:1.25em;text-shadow:0 0 .3125em #ff89ac,0 0 .625em #ff89ac,0 0 1.25em #ff89ac,0 0 2.5em #ff2475,0 0 5em #ff2475;-webkit-text-fill-color:#fff;cursor:pointer}.auto-delegation__close-button{display:flex;align-items:center;background:linear-gradient(228deg,#101113 10%,#2b2f33);padding:.625em;border-radius:100%;border:.0625em solid black;margin-right:.3125em;cursor:pointer}.auto-delegation__close-icon{width:1.375em;height:1.375em}.auto-delegation__dropDown{margin-top:.9375em;margin-bottom:.625em;display:flex;justify-content:center}.auto-delegation__dropDown>span{font-family:Gilroy;cursor:pointer;font-size:.625em;color:#8e8e8e}.auto-delegation__profile-summary-container{margin-top:1.25em}.auto-delegation__profile{overflow:hidden}.auto-delegation__profile-header,.auto-delegation__profile-summary{display:flex;justify-content:space-between}.auto-delegation__profile-header>div,.auto-delegation__profile-summary>div{text-align:left;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:11.25em}.auto-delegation__profile-summary div h4{font-weight:500;font-family:Gilroy;font-size:1em;margin-bottom:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.auto-delegation__profile-summary div p{color:#8e8e8e;font-size:.85em;font-weight:400;font-family:Gilroy;margin:.125em!important;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.auto-delegation__countdown{position:relative;width:4.375em;height:4.375em;right:.75em}.auto-delegation__countdown-background-image{background:linear-gradient(274deg,#232323 50%,#2b2f33);box-shadow:.01em -.0525em 1.53em #82676e,.49em .49em 1.715em #141415;border:2px solid #464646;border-radius:100%;position:absolute;top:.6em;left:.9em;width:3.2em;height:3.2em}.auto-delegation__countdown-active-stroke{position:absolute;width:3.5em;height:3.5em;top:.6em;left:.6em;animation-duration:.8s;transform:rotate(90deg)}.auto-delegation__countdown-number{height:3em;width:3em;display:flex;justify-content:center;align-items:center;background:linear-gradient(66deg,#101113 12%,#2b2f33);box-shadow:inset -.49em -.49em 1.715em #453d3f,inset .49em .49em 1.715em #141415;border:2px solid #333333;border-radius:100%;position:absolute;top:50%;left:57%;transform:translate(-50%,-50%);font-weight:600;font-size:.6em;color:#fff}.auto-delegation__col-center{display:flex;flex-direction:column;justify-content:center}.auto-delegation__animated-path{transition:stroke-dashoffset 1s linear}.gradient-text{background:linear-gradient(to top,#efc5d1,#fe638e);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.auto-delegation:before{content:\"\";position:absolute;inset:0;border-radius:1.5625em;padding:.125em;background:linear-gradient(to top,transparent,transparent,#ccabc4);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;z-index:-1}.red-text{font-family:Gilroy;margin-top:.5em;margin-bottom:0;font-size:1.0625em;color:#f4446c;font-weight:600}.text-right{text-align:end}.overflow{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media (max-width: 768px){:host{font-size:calc(clamp(0px,3.2dvw,15px)*.8)}}.edit-radus{border-radius:5.5625em!important}.edit-radus:before{border-radius:5.5625em!important}::-webkit-scrollbar{width:0;background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: BaseCardModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2.MenuBtnComponent, selector: "lib-menu-btn", inputs: ["menuBtnIcon", "menuBtnTooltip", "menuBtnTooltipPosition", "menuBtnIconName", "menuBtnImgUrl", "menuBtnNotificationIconUrl", "menuDirection", "hasNotification", "menuItems", "disableTranslation", "listItem", "listItemIndex", "selectable", "overlayClass", "isUserMenu", "onlyCloseOnClickOutside", "hoverOutline", "disabled", "type", "form", "label", "showArrowIcon", "disableTextShadow", "loading$"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: PopperModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], animations: [SeeMoreAnimation] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibVisualManagerModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibAutoDelegationModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-visual-manager-modal', standalone: true, imports: [CommonModule, TranslateModule, ButtonsModule, InputFieldModule, ReactiveFormsModule], providers: [LibModalComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"visual-manager-modal\" #childModalElementRef>\n  <header class=\"visual-manager-modal__header\">\n    <div class=\"visual-manager-modal__header-left\">\n      <img class=\"visual-manager-modal__filter-icon\" src=\"assets/icons/filter-icon.svg\" alt=\"Filter icon\" />\n      <h2 class=\"visual-manager-modal__title\">{{ 'VISUAL_MANAGER_MODAL.TITLE' | translate }}</h2>\n    </div>\n    <button class=\"visual-manager-modal__close-button\" (click)=\"close()\">\n      <img class=\"visual-manager-modal__close-icon\" src=\"assets/icons/close-icon.svg\" alt=\"Close\" />\n    </button>\n  </header>\n\n  <div class=\"visual-manager-modal__content\">\n    <!-- Selected Items Section -->\n    @if (selectedItems.length > 0) {\n      <div class=\"visual-manager-modal__section\">\n        <ol class=\"visual-manager-modal__list visual-manager-modal__list--ordered\">\n          @for (preference of selectedItems; track preference.id; let i = $index) {\n            <li \n              class=\"visual-manager-modal__item\"\n              (dragover)=\"onDragOver($event)\"\n              (drop)=\"onDrop($event, preference, true)\"\n            >\n              <span class=\"visual-manager-modal__item-number\">{{ i + 1 }}</span>\n              <div class=\"visual-manager-modal__input-wrapper\">\n                <lib-input-field\n                  class=\"visual-manager-modal__item-name\"\n                  [formControl]=\"getPreferenceControl(preference.id)\"\n                  (valueChange)=\"onPreferenceNameChange(preference, $event)\"\n                ></lib-input-field>\n                <button class=\"visual-manager-modal__action-button1\" > </button>\n                <button\n                  class=\"visual-manager-modal__action-button\"\n                  (click)=\"togglePreference(preference, $event)\"\n                >\n                  <img class=\"visual-manager-modal__action-icon\" src=\"assets/icons/close-icon.svg\" alt=\"Remove\" />\n                </button>\n              </div>\n              <img \n                class=\"visual-manager-modal__drag-handle\" \n                src=\"assets/icons/drag-handle.svg\" \n                alt=\"Drag handle\"\n                draggable=\"true\"\n                (dragstart)=\"onDragStart($event, preference, true)\"\n                (dragend)=\"onDragEnd($event)\"\n              />\n            </li>\n          }\n        </ol>\n      </div>\n    }\n\n    <!-- Separator -->\n    @if (selectedItems.length > 0 && deselectedItems.length > 0) {\n      <div class=\"visual-manager-modal__separator\"></div>\n    }\n\n    <!-- Deselected Items Section -->\n    @if (deselectedItems.length > 0) {\n      <div class=\"visual-manager-modal__section\">\n        <ul class=\"visual-manager-modal__list\">\n          @for (preference of deselectedItems; track preference.id) {\n            <li \n              class=\"visual-manager-modal__item\"\n              (dragover)=\"onDragOver($event)\"\n              (drop)=\"onDrop($event, preference, false)\"\n            >\n              <div class=\"visual-manager-modal__input-wrapper\">\n                <lib-input-field\n                  class=\"visual-manager-modal__item-name\"\n                  [formControl]=\"getPreferenceControl(preference.id)\"\n                  (valueChange)=\"onPreferenceNameChange(preference, $event)\"\n                ></lib-input-field>\n                <button class=\"visual-manager-modal__action-button1\" > </button>\n                <button\n                  class=\"visual-manager-modal__action-button\"\n                  (click)=\"togglePreference(preference, $event)\"\n                >\n                  <img class=\"visual-manager-modal__action-icon\" src=\"assets/icons/plus.svg\" alt=\"Add\" />\n                </button>\n              </div>\n              <img \n                class=\"visual-manager-modal__drag-handle\" \n                src=\"assets/icons/drag-handle.svg\" \n                alt=\"Drag handle\"\n                draggable=\"true\"\n                (dragstart)=\"onDragStart($event, preference, false)\"\n                (dragend)=\"onDragEnd($event)\"\n              />\n            </li>\n          }\n        </ul>\n      </div>\n    }\n  </div>\n\n  <footer class=\"visual-manager-modal__footer\">\n    <lib-secondary-btn (click)=\"reset()\">\n      {{ 'VISUAL_MANAGER_MODAL.RESET' | translate }}\n    </lib-secondary-btn>\n    <lib-primary-btn (click)=\"apply()\">\n      {{ 'VISUAL_MANAGER_MODAL.APPLY' | translate }}\n    </lib-primary-btn>\n  </footer>\n</div>\n\n", styles: [":host{font-size:clamp(0px,3.2dvw,15px)}:host *{box-sizing:border-box}.visual-manager-modal{-webkit-backdrop-filter:blur(.625em);backdrop-filter:blur(.625em);background:linear-gradient(180deg,#323133,#1f1e20);color:#fff;padding:1.5em 2em;width:28.125em;margin:0 auto;border-radius:1.5625em;font-family:Gilroy;box-shadow:.5em .5em 1em #00000080,-.5em -.5em 1em #ffffff0d;position:relative;display:flex;flex-direction:column}.visual-manager-modal__header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.5em;padding-bottom:1em;border-bottom:1px solid rgba(255,255,255,.1);gap:.75em}.visual-manager-modal__header-left{display:flex;flex-direction:column;align-items:center;gap:.5em;flex:1}.visual-manager-modal__filter-icon{width:3em;height:3em;cursor:pointer;flex-shrink:0}.visual-manager-modal__title{font-size:1.25em;font-weight:500;font-family:Gilroy;margin:0;color:#fff}.visual-manager-modal__close-button{background:transparent;border:none;cursor:pointer;padding:.25em;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s}.visual-manager-modal__close-button:hover{background:#ffffff1a}.visual-manager-modal__close-icon{width:2em;height:2em;filter:brightness(0) saturate(100%) invert(39%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(98%) contrast(105%)}.visual-manager-modal__content{margin-bottom:1.5em;max-height:50vh;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:1em}.visual-manager-modal__section{display:flex;flex-direction:column;gap:.75em}.visual-manager-modal__section-label{font-size:.9em;font-weight:500;color:#4a9eff;margin-bottom:.25em}.visual-manager-modal__separator{height:1px;background:#ffffff1a;margin:.5em 0}.visual-manager-modal__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75em}.visual-manager-modal__list--ordered{list-style:none}.visual-manager-modal__item{display:flex;align-items:center;gap:.5em;width:100%}.visual-manager-modal__item-number{display:flex;align-items:center;justify-content:center;min-width:1.5em;height:1.5em;font-size:.9em;font-weight:500;color:#ffffffb3;flex-shrink:0}.visual-manager-modal__input-wrapper{position:relative;flex:1;min-width:0}.visual-manager-modal__item-name{width:100%}.visual-manager-modal__item-name ::ng-deep .content-wrapper{position:relative}.visual-manager-modal__item-name ::ng-deep .input-field,.visual-manager-modal__item-name ::ng-deep .input-field-readonly{padding-right:2.5em}.visual-manager-modal__action-button{position:absolute;right:.4em;top:50%;transform:translateY(-50%);background:linear-gradient(174.9deg,#595859cf -26.99%,#29252dcf 22.7% 100.94%);border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .2s;width:3em;height:3em;border-radius:50%;pointer-events:auto;-webkit-backdrop-filter:blur(.5326657891px);backdrop-filter:blur(.5326657891px);box-shadow:7.24px 6.58px 17.77px 1.65px #121212a6,0 0 2.45px #0000004d}.visual-manager-modal__action-button:active{opacity:.9;box-shadow:inset 2px 2px 4px #0006,inset -2px -2px 4px #ffffff14}.visual-manager-modal__action-button1{position:absolute;right:.4em;top:50%;transform:translateY(-50%);background:linear-gradient(174.9deg,#69686acf 28.4%,#29252dcf 92.06% 100.94%);border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .2s;width:3em;height:3em;border-radius:50%;pointer-events:auto;-webkit-backdrop-filter:blur(.5326657891px);backdrop-filter:blur(.5326657891px);box-shadow:0 2.56px 2.56px .82px #0000006e,0 0 10.65px 5.33px #4242429c}.visual-manager-modal__action-icon{width:1em;height:1em;display:block}.visual-manager-modal__drag-handle{width:1em;height:1em;cursor:grab;flex-shrink:0;opacity:.6;-webkit-user-select:none;user-select:none}.visual-manager-modal__drag-handle:active{cursor:grabbing}.visual-manager-modal__item.dragging{opacity:.5}.visual-manager-modal__footer{display:flex;justify-content:space-between;gap:1em;padding-top:1em;border-top:1px solid rgba(255,255,255,.1);margin-top:auto}.visual-manager-modal__footer lib-secondary-btn,.visual-manager-modal__footer lib-primary-btn{flex:1}.visual-manager-modal__content::-webkit-scrollbar{width:.5em}.visual-manager-modal__content::-webkit-scrollbar-track{background:#0003;border-radius:.25em}.visual-manager-modal__content::-webkit-scrollbar-thumb{background:#fff3;border-radius:.25em}.visual-manager-modal__content::-webkit-scrollbar-thumb:hover{background:#ffffff4d}@media (max-width: 768px){:host{font-size:calc(clamp(0px,3.2dvw,15px)*.8)}.visual-manager-modal{width:90%;padding:1.25em 1.5em}}\n"] }]
+            args: [{ selector: 'lib-auto-delegation-modal', animations: [SeeMoreAnimation], imports: [CommonModule, BaseCardModule, TranslateModule, ButtonsModule, MatMenuModule, MatButtonModule, PopperModule], providers: [LibModalComponent], template: "<div class=\"auto-delegation\" [ngClass]=\"{ 'edit-radus': !componentData?.expandedBaseCard }\">\n  <header class=\"auto-delegation__header\">\n    <div class=\"auto-delegation__info\">\n      <img class=\"auto-delegation__avatar\" [src]=\"componentData?.data?.imgSrc\" alt=\"User Avatar\" />\n      <div class=\"auto-delegation__wapper overflow\">\n        <div class=\"auto-delegation__title overflow\">{{ componentData?.data?.title }}</div>\n        <span class=\"auto-delegation__name\">{{ componentData?.data?.name }}, </span>\n        <span class=\"auto-delegation__location\">{{ componentData?.data?.location }}</span>\n      </div>\n    </div>\n    @if (componentData?.menuItems?.length) {\n      <div class=\"auto-delegation__menu\">\n        <div>\n          <lib-menu-btn [disableTranslation]=\"true\" [menuItems]=\"componentData?.menuItems\">\n            <img height=\"25px\" width=\"5px\" src=\"assets/auto-delegation-modal/menu.svg\" alt=\"\" />\n          </lib-menu-btn>\n        </div>\n      </div>\n    }\n  </header>\n  <div class=\"auto-delegation__details\">\n    <div class=\"auto-delegation__meetings\">\n      <div class=\"auto-delegation__meetings-count gradient-text\">{{ componentData?.data?.meetings }} {{ 'AUTO_DELEGATION.MEETINGS' | translate }}</div>\n      <div class=\"auto-delegation__meetings-duration gradient-text\">{{ componentData?.data?.days }}</div>\n    </div>\n    <div class=\"auto-delegation__price\">\n      <div class=\"auto-delegation__price-value gradient-text\">\n        $\n        <div class=\"auto-delegation__price-number gradient-text\">{{ componentData?.data?.price }}</div>\n      </div>\n    </div>\n  </div>\n  <div class=\"auto-delegation__lists\">\n    <ul class=\"auto-delegation__lists-features\">\n      @for (opt of componentData?.data?.planOptions; track opt) {\n        <li class=\"auto-delegation__lists-feature\">{{ opt }}</li>\n      }\n    </ul>\n  </div>\n\n  <div class=\"auto-delegation__action\">\n    <div class=\"auto-delegation__action-timer\">\n      <div class=\"auto-delegation__countdown\">\n        <!-- Background Image -->\n        <img class=\"auto-delegation__countdown-background-image\" src=\"assets/auto-delegation-modal/timer-center-dot.svg\" />\n        <!-- SVG Countdown Animation -->\n        <svg class=\"auto-delegation__countdown-active-stroke\" width=\"100%\" height=\"100%\" viewBox=\"0 0 103 103\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g\n            class=\"auto-delegation__countdown-active-g\"\n            [attr.mask]=\"'url(#' + activeCountdownPathId + ')'\"\n            opacity=\"1\"\n            [style.transform]=\"'rotate(' + 0 + 'deg)'\"\n            style=\"transform-origin: center\"\n          >\n            <circle cx=\"50\" cy=\"50\" r=\"50\" fill=\"#FFB5E9\" />\n          </g>\n          <defs>\n            <mask [attr.id]=\"activeCountdownPathId\">\n              <circle\n                d=\"M 9.04 78.68 A 50 50 0 1 1 90.96 78.68\"\n                class=\"auto-delegation__animated-path\"\n                cx=\"50\"\n                cy=\"50\"\n                r=\"42.5\"\n                stroke=\"white\"\n                stroke-linecap=\"round\"\n                stroke-width=\"10.64\"\n                [attr.stroke-dasharray]=\"totalStrokeLength\"\n                [attr.stroke-dashoffset]=\"strokeDashOffset\"\n              />\n            </mask>\n          </defs>\n        </svg>\n\n        <!-- Countdown Timer -->\n        <div class=\"auto-delegation__countdown-number\">{{ currentCountdownAt }} s</div>\n      </div>\n    </div>\n\n    <div #childModalElementRef class=\"auto-delegation__glowing-text\" (click)=\"accept()\">{{ 'AUTO_DELEGATION.ACCEPT_REQUEST' | translate }}</div>\n    <div class=\"auto-delegation__close-button\" (click)=\"reject()\">\n      <img class=\"auto-delegation__close-icon\" src=\"assets/auto-delegation-modal/cross.svg\" alt=\"cross-icon\" />\n    </div>\n  </div>\n  <div class=\"auto-delegation__dropDown\">\n    <span (click)=\"componentData.expandedBaseCard = !componentData.expandedBaseCard\"\n      >{{ 'DASHBOARD.SEE_' + (componentData?.expandedBaseCard ? 'LESS' : 'MORE') | translate }}...\n    </span>\n  </div>\n\n  @if (componentData?.expandedBaseCard) {\n    <div class=\"auto-delegation__profile\" [@dropDownMenu]>\n      <div class=\"auto-delegation__profile-header\">\n        <div>\n          <h3 class=\"red-text\">{{ 'AUTO_DELEGATION.SCORE_PREFERRED' | translate }}</h3>\n          <p>{{ componentData?.data?.score }} / {{ componentData?.data?.preferred }}+</p>\n        </div>\n        <div>\n          <h3 class=\"red-text text-right\">{{ 'AUTO_DELEGATION.LIFE_TIME_FEE' | translate }}</h3>\n          <p class=\"text-right\">{{ componentData?.data?.lifeTimeFee }}</p>\n        </div>\n      </div>\n      <div class=\"auto-delegation__profile-header\">\n        <div>\n          <h3 class=\"red-text\">{{ 'AUTO_DELEGATION.LIFE_TIME_MEETUPS' | translate }}</h3>\n          <p>{{ componentData?.data?.lifeTimeMeetups }}</p>\n        </div>\n        <div>\n          <h3 class=\"red-text text-right\">{{ 'AUTO_DELEGATION.JOIN_DATE' | translate }}</h3>\n          <p class=\"text-right\">{{ componentData?.data?.joinDate }}</p>\n        </div>\n      </div>\n      <div class=\"auto-delegation__profile-summary-container\">\n        <div class=\"auto-delegation__profile-summary\">\n          <div>\n            <h4>{{ 'AUTO_DELEGATION.PREFERENCES' | translate }} <br />{{ 'AUTO_DELEGATION.SUMMARY' | translate }}:</h4>\n            <div>\n              <p>\n                {{ componentData?.data?.preferences?.bust?.value }}\u00B1{{ componentData?.data?.preferences?.bust?.moe }} {{ componentData?.data?.preferences?.waist?.value }}\u00B1{{\n                  componentData?.data?.preferences?.waist?.moe\n                }}\n                {{ componentData?.data?.preferences?.height?.value }}\u00B1{{ componentData?.data?.preferences?.height?.moe }}\n              </p>\n            </div>\n            <div>\n              <p>{{ 'AUTO_DELEGATION.CELIBACY' | translate }} {{ componentData?.data?.preferences.celibacy }}+</p>\n              <p>{{ 'AUTO_DELEGATION.COOPERATION' | translate }} {{ componentData?.data?.preferences.cooperation }}+</p>\n              <p>{{ 'AUTO_DELEGATION.INTELLIGENCE' | translate }} {{ componentData?.data?.preferences.intelligence }}+</p>\n            </div>\n          </div>\n          <div>\n            <h4 class=\"text-right\">{{ 'AUTO_DELEGATION.PREFERENCES_PROFILE' | translate }}</h4>\n            <p class=\"text-right\">{{ componentData?.data?.preferencesProfile }}</p>\n            <div>\n              <h4 class=\"text-right\">{{ 'AUTO_DELEGATION.WEIGHT_HEIGHT_PREF' | translate }}</h4>\n              <p class=\"text-right\">{{ componentData?.data?.weight }}/{{ componentData?.data?.heightpref }}</p>\n            </div>\n          </div>\n        </div>\n        <div class=\"auto-delegation__profile-summary\">\n          <div>\n            <h4>\n              {{ 'AUTO_DELEGATION.PROFILE' | translate }} <br />\n              {{ 'AUTO_DELEGATION.SUMMARY' | translate }}:\n            </h4>\n            <div *ngFor=\"let item of componentData?.data?.profile\">\n              <p>{{ item }}</p>\n            </div>\n          </div>\n          <div class=\"auto-delegation__col-center\">\n            <h4 class=\"text-right\">{{ 'AUTO_DELEGATION.COMMUNICATION_STYLE' | translate }}</h4>\n            <p class=\"text-right\">{{ componentData?.data?.communicationStyle }}</p>\n            <div>\n              <h4 class=\"text-right\">{{ 'AUTO_DELEGATION.GOAL' | translate }}</h4>\n              <p class=\"text-right\">{{ componentData?.data?.goal }}</p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{font-size:clamp(0px,3.2dvw,15px)}:host *{box-sizing:border-box}.auto-delegation{-webkit-backdrop-filter:blur(.625em);backdrop-filter:blur(.625em);background:#d3d3d333;color:#fff;padding:1.625em 2.75em 2.25em;width:28.125em;margin:0 auto;border-radius:1.5625em;font-family:Gilroy;overflow-y:scroll;max-height:95vh}.auto-delegation__header{display:flex;justify-content:space-between;align-items:flex-start}.auto-delegation__details{display:flex;justify-content:space-between;align-items:center}.auto-delegation__avatar{width:3.75em;height:3.75em;border-radius:50%;object-fit:cover}.auto-delegation__wapper{padding-bottom:.375em}.auto-delegation__info{display:flex;gap:.75em;align-items:center;width:18.75em;height:4.6875em}.auto-delegation__title{font-size:1.875em;font-weight:400;padding-bottom:.5em;font-family:Calistoga;width:13.75em}.auto-delegation__name{font-size:.875em;font-weight:600;font-family:Gilroy}.auto-delegation__menu{cursor:pointer}.auto-delegation__location{font-size:.875em;font-weight:400;font-family:Gilroy;color:#ccc}.auto-delegation__meeting{width:100%;height:100%}.auto-delegation__meetings-count,.auto-delegation__meetings-duration{font-family:Gilroy;font-size:1.0625em;font-weight:400}.auto-delegation__price{text-align:end}.auto-delegation__price-value{display:flex;justify-content:flex-end;align-items:flex-start;gap:.25em}.auto-delegation__price-number{font-size:2.25em;font-weight:400}.auto-delegation__price-market{font-size:.5em;color:#8e8e8e}.auto-delegation__lists-features{padding-left:.9375em}.auto-delegation__lists{list-style:none;display:flex;justify-content:space-between;align-items:flex-start}.auto-delegation__action{border-radius:2em;background-color:#2b2929;display:flex;align-items:center;margin-top:.3125em;padding:0;height:3.4375em;justify-content:space-between}.auto-delegation__action__timer{border:.0625em solid gray;border-radius:100%;height:3.125em;width:3.125em;font-size:.875em;color:#f39c12}.auto-delegation__summary,.auto-delegation__preferences{margin-top:1em;font-size:.875em;line-height:1.5}.auto-delegation__preferences-summary{font-size:.75em;color:#aaa}.auto-delegation__glowing-text{font-family:Calistoga;font-size:1.5em;font-weight:800;color:#fff;text-align:center;margin-right:1.25em;text-shadow:0 0 .3125em #ff89ac,0 0 .625em #ff89ac,0 0 1.25em #ff89ac,0 0 2.5em #ff2475,0 0 5em #ff2475;-webkit-text-fill-color:#fff;cursor:pointer}.auto-delegation__close-button{display:flex;align-items:center;background:linear-gradient(228deg,#101113 10%,#2b2f33);padding:.625em;border-radius:100%;border:.0625em solid black;margin-right:.3125em;cursor:pointer}.auto-delegation__close-icon{width:1.375em;height:1.375em}.auto-delegation__dropDown{margin-top:.9375em;margin-bottom:.625em;display:flex;justify-content:center}.auto-delegation__dropDown>span{font-family:Gilroy;cursor:pointer;font-size:.625em;color:#8e8e8e}.auto-delegation__profile-summary-container{margin-top:1.25em}.auto-delegation__profile{overflow:hidden}.auto-delegation__profile-header,.auto-delegation__profile-summary{display:flex;justify-content:space-between}.auto-delegation__profile-header>div,.auto-delegation__profile-summary>div{text-align:left;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:11.25em}.auto-delegation__profile-summary div h4{font-weight:500;font-family:Gilroy;font-size:1em;margin-bottom:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.auto-delegation__profile-summary div p{color:#8e8e8e;font-size:.85em;font-weight:400;font-family:Gilroy;margin:.125em!important;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.auto-delegation__countdown{position:relative;width:4.375em;height:4.375em;right:.75em}.auto-delegation__countdown-background-image{background:linear-gradient(274deg,#232323 50%,#2b2f33);box-shadow:.01em -.0525em 1.53em #82676e,.49em .49em 1.715em #141415;border:2px solid #464646;border-radius:100%;position:absolute;top:.6em;left:.9em;width:3.2em;height:3.2em}.auto-delegation__countdown-active-stroke{position:absolute;width:3.5em;height:3.5em;top:.6em;left:.6em;animation-duration:.8s;transform:rotate(90deg)}.auto-delegation__countdown-number{height:3em;width:3em;display:flex;justify-content:center;align-items:center;background:linear-gradient(66deg,#101113 12%,#2b2f33);box-shadow:inset -.49em -.49em 1.715em #453d3f,inset .49em .49em 1.715em #141415;border:2px solid #333333;border-radius:100%;position:absolute;top:50%;left:57%;transform:translate(-50%,-50%);font-weight:600;font-size:.6em;color:#fff}.auto-delegation__col-center{display:flex;flex-direction:column;justify-content:center}.auto-delegation__animated-path{transition:stroke-dashoffset 1s linear}.gradient-text{background:linear-gradient(to top,#efc5d1,#fe638e);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.auto-delegation:before{content:\"\";position:absolute;inset:0;border-radius:1.5625em;padding:.125em;background:linear-gradient(to top,transparent,transparent,#ccabc4);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;z-index:-1}.red-text{font-family:Gilroy;margin-top:.5em;margin-bottom:0;font-size:1.0625em;color:#f4446c;font-weight:600}.text-right{text-align:end}.overflow{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media (max-width: 768px){:host{font-size:calc(clamp(0px,3.2dvw,15px)*.8)}}.edit-radus{border-radius:5.5625em!important}.edit-radus:before{border-radius:5.5625em!important}::-webkit-scrollbar{width:0;background:transparent}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i2.PopupModalService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -391,24 +365,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 }] }], propDecorators: { childModalElementRef: [{
                 type: ViewChild,
                 args: ['childModalElementRef']
+            }], countdown: [{
+                type: Input
+            }], expandedBaseCard: [{
+                type: Input
             }], data: [{
                 type: Input
+            }], menuItems: [{
+                type: Input
             }], event: [{
                 type: Output
             }] } });
 
-var Direction;
-(function (Direction) {
-    Direction["horizontal"] = "horizontal";
-    Direction["vertical"] = "vertical";
-})(Direction || (Direction = {}));
-
-var AgendaItemType;
-(function (AgendaItemType) {
-    AgendaItemType["DAY"] = "day";
-    AgendaItemType["AD"] = "ad";
-})(AgendaItemType || (AgendaItemType = {}));
-
 class AgendaDayCardComponent {
     constructor() {
         this.fullName = '';
@@ -568,24 +536,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 }]
         }] });
 
-var EventTypes;
-(function (EventTypes) {
-    EventTypes["DATE"] = "Date";
-    EventTypes["GOOGLE"] = "Google";
-    EventTypes["MICROSOFT"] = "Microsoft";
-    EventTypes["SYSTEM"] = "System";
-    EventTypes["USER"] = "User";
-    EventTypes["ITINERARY"] = "Itinerary";
-})(EventTypes || (EventTypes = {}));
-
-var RecurringTypes;
-(function (RecurringTypes) {
-    RecurringTypes["DAILY"] = "DAILY";
-    RecurringTypes["WEEKLY"] = "WEEKLY";
-    RecurringTypes["MONTHLY"] = "MONTHLY";
-    RecurringTypes["ANNUALLY"] = "ANNUALLY";
-})(RecurringTypes || (RecurringTypes = {}));
-
 const recurringOptions = [
     { title: 'CALENDAR.DOES_NOT_REPEAT', type: null, name: 'Does not repeat' },
     {
@@ -826,9 +776,8 @@ class FallbackTranslatePipe {
         const translated = this.translate.instant(key);
         return translated === key ? fallback : translated;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FallbackTranslatePipe, deps: [{ token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FallbackTranslatePipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: FallbackTranslatePipe, isStandalone: true, name: "fallbackTranslate" }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FallbackTranslatePipe, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FallbackTranslatePipe, decorators: [{
             type: Pipe,
@@ -836,12 +785,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                     name: 'fallbackTranslate',
                     standalone: true,
                 }]
-        }, {
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: i3.TranslateService }] });
+        }], ctorParameters: () => [{ type: i1$1.TranslateService }] });
 
 class LibEventInfoComponent {
     constructor(fallbackTranslatePipe, calendarUtilService) {
@@ -861,54 +805,17 @@ class LibEventInfoComponent {
         this.note = this.recurringException?.note || this.updatedRecurringException?.note || this.event.note;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibEventInfoComponent, deps: [{ token: FallbackTranslatePipe }, { token: CalendarUtilsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LibEventInfoComponent, isStandalone: true, selector: "lib-event-info", inputs: { event: "event", calendars: "calendars" }, ngImport: i0, template: "<div class=\"event-info-body\">\n  <div class=\"data-item\" *ngIf=\"event.allDay\">\n    <span><mat-icon class=\"all-day\">done_all</mat-icon> {{ 'CALENDAR.ALL_DAY' | translate }}</span>\n  </div>\n  <div class=\"data-item\">\n    <span> <mat-icon>event</mat-icon> {{ 'CALENDAR.STARTS' | translate }}</span>\n    <span class=\"event-time\">\n      {{ recurringException?.startDate || event.recurringStartDate || event.startDate | date: 'yyyy-MM-dd' }}\n      <span *ngIf=\"!event.allDay\"> - {{ event.startTime | date: 'h:mm a' }}</span>\n    </span>\n  </div>\n  <div class=\"data-item\">\n    <span><mat-icon>event_available</mat-icon> {{ 'CALENDAR.ENDS' | translate }}</span>\n    <span class=\"event-time\">\n      {{ recurringException?.endDate || event.recurringEndDate || event.endDate | date: 'yyyy-MM-dd' }}\n      <span *ngIf=\"!event.allDay\"> - {{ event.endTime | date: 'h:mm a' }}</span>\n    </span>\n  </div>\n\n  <div class=\"data-item\">\n    @if (event.recurringPattern?.type) {\n      <span><mat-icon>event_repeat</mat-icon> {{ 'CALENDAR.RECURRING' | translate }}</span>\n      <span class=\"recurring-type\">{{ 'CALENDAR.' + event.recurringPattern.type | translate }}</span>\n    } @else if (address) {\n      <span><mat-icon>location_on</mat-icon> {{ 'LOCATION.TITLE' | translate }}</span>\n      <span [innerHTML]=\"address\"></span>\n    } @else if (calendarAccount) {\n      <span><mat-icon>email</mat-icon> {{ 'CALENDAR.ACCOUNT' | translate }}</span>\n      <span [style.color]=\"calendarAccount.theme?.backgroundColor || ''\">{{ calendarAccount.email }}</span>\n    } @else if (note) {\n      <span><mat-icon>event_note</mat-icon> {{ 'FIELDS.NOTE' | translate }}</span>\n      <span class=\"event-note\" [innerHTML]=\"note\"></span>\n    }\n  </div>\n</div>\n", styles: [".text-style,.event-info-body .data-item{font-family:Gilroy-Regular,serif;font-style:normal;font-weight:500;font-size:16px}.event-info-body{padding:0 15px 20px;max-height:calc(var(--viewport-height) * 60);position:relative;display:block;overflow:auto}.event-info-body .data-item{margin-top:20px;display:flex}.event-info-body .data-item.centred{flex-direction:column;align-items:center;margin-bottom:10px}.event-info-body .data-item span{font-size:14px}.event-info-body .data-item span:first-child{min-width:85px}.event-info-body .data-item span:first-child .mat-icon{position:relative;top:-4px}.event-info-body .data-item span.event-time{display:flex;gap:5px}.event-info-body .data-item span .mat-icon{margin:0 5px 0 0}.event-info-body .data-item span:nth-child(1){display:flex;font-weight:500}.event-info-body .data-item span:nth-child(2){margin-left:20px;opacity:.7}.event-info-body .data-item span.recurring-type{background:var(--cyrano-pink-shade-2);color:#fff;padding:5px 10px;border-radius:30px;height:25px;margin-top:-5px}.event-info-body .data-item .mat-icon.all-day{color:var(--cyrano-pink-shade-1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LibEventInfoComponent, isStandalone: true, selector: "lib-event-info", inputs: { event: "event", calendars: "calendars" }, providers: [FallbackTranslatePipe, CalendarUtilsService], ngImport: i0, template: "<div class=\"event-info-body\">\n  <div class=\"data-item\" *ngIf=\"event.allDay\">\n    <span><mat-icon class=\"all-day\">done_all</mat-icon> {{ 'CALENDAR.ALL_DAY' | translate }}</span>\n  </div>\n  <div class=\"data-item\">\n    <span> <mat-icon>event</mat-icon> {{ 'CALENDAR.STARTS' | translate }}</span>\n    <span class=\"event-time\">\n      {{ recurringException?.startDate || event.recurringStartDate || event.startDate | date: 'yyyy-MM-dd' }}\n      <span *ngIf=\"!event.allDay\"> - {{ event.startTime | date: 'h:mm a' }}</span>\n    </span>\n  </div>\n  <div class=\"data-item\">\n    <span><mat-icon>event_available</mat-icon> {{ 'CALENDAR.ENDS' | translate }}</span>\n    <span class=\"event-time\">\n      {{ recurringException?.endDate || event.recurringEndDate || event.endDate | date: 'yyyy-MM-dd' }}\n      <span *ngIf=\"!event.allDay\"> - {{ event.endTime | date: 'h:mm a' }}</span>\n    </span>\n  </div>\n\n  <div class=\"data-item\">\n    @if (event.recurringPattern?.type) {\n      <span><mat-icon>event_repeat</mat-icon> {{ 'CALENDAR.RECURRING' | translate }}</span>\n      <span class=\"recurring-type\">{{ 'CALENDAR.' + event.recurringPattern.type | translate }}</span>\n    } @else if (address) {\n      <span><mat-icon>location_on</mat-icon> {{ 'LOCATION.TITLE' | translate }}</span>\n      <span [innerHTML]=\"address\"></span>\n    } @else if (calendarAccount) {\n      <span><mat-icon>email</mat-icon> {{ 'CALENDAR.ACCOUNT' | translate }}</span>\n      <span [style.color]=\"calendarAccount.theme?.backgroundColor || ''\">{{ calendarAccount.email }}</span>\n    } @else if (note) {\n      <span><mat-icon>event_note</mat-icon> {{ 'FIELDS.NOTE' | translate }}</span>\n      <span class=\"event-note\" [innerHTML]=\"note\"></span>\n    }\n  </div>\n</div>\n", styles: [".text-style,.event-info-body .data-item{font-family:Gilroy-Regular,serif;font-style:normal;font-weight:500;font-size:16px}.event-info-body{padding:0 15px 20px;max-height:calc(var(--viewport-height) * 60);position:relative;display:block;overflow:auto}.event-info-body .data-item{margin-top:20px;display:flex}.event-info-body .data-item.centred{flex-direction:column;align-items:center;margin-bottom:10px}.event-info-body .data-item span{font-size:14px}.event-info-body .data-item span:first-child{min-width:85px}.event-info-body .data-item span:first-child .mat-icon{position:relative;top:-4px}.event-info-body .data-item span.event-time{display:flex;gap:5px}.event-info-body .data-item span .mat-icon{margin:0 5px 0 0}.event-info-body .data-item span:nth-child(1){display:flex;font-weight:500}.event-info-body .data-item span:nth-child(2){margin-left:20px;opacity:.7}.event-info-body .data-item span.recurring-type{background:var(--cyrano-pink-shade-2);color:#fff;padding:5px 10px;border-radius:30px;height:25px;margin-top:-5px}.event-info-body .data-item .mat-icon.all-day{color:var(--cyrano-pink-shade-1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibEventInfoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-event-info', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, MatIconModule, FallbackTranslatePipe, TranslateModule], template: "<div class=\"event-info-body\">\n  <div class=\"data-item\" *ngIf=\"event.allDay\">\n    <span><mat-icon class=\"all-day\">done_all</mat-icon> {{ 'CALENDAR.ALL_DAY' | translate }}</span>\n  </div>\n  <div class=\"data-item\">\n    <span> <mat-icon>event</mat-icon> {{ 'CALENDAR.STARTS' | translate }}</span>\n    <span class=\"event-time\">\n      {{ recurringException?.startDate || event.recurringStartDate || event.startDate | date: 'yyyy-MM-dd' }}\n      <span *ngIf=\"!event.allDay\"> - {{ event.startTime | date: 'h:mm a' }}</span>\n    </span>\n  </div>\n  <div class=\"data-item\">\n    <span><mat-icon>event_available</mat-icon> {{ 'CALENDAR.ENDS' | translate }}</span>\n    <span class=\"event-time\">\n      {{ recurringException?.endDate || event.recurringEndDate || event.endDate | date: 'yyyy-MM-dd' }}\n      <span *ngIf=\"!event.allDay\"> - {{ event.endTime | date: 'h:mm a' }}</span>\n    </span>\n  </div>\n\n  <div class=\"data-item\">\n    @if (event.recurringPattern?.type) {\n      <span><mat-icon>event_repeat</mat-icon> {{ 'CALENDAR.RECURRING' | translate }}</span>\n      <span class=\"recurring-type\">{{ 'CALENDAR.' + event.recurringPattern.type | translate }}</span>\n    } @else if (address) {\n      <span><mat-icon>location_on</mat-icon> {{ 'LOCATION.TITLE' | translate }}</span>\n      <span [innerHTML]=\"address\"></span>\n    } @else if (calendarAccount) {\n      <span><mat-icon>email</mat-icon> {{ 'CALENDAR.ACCOUNT' | translate }}</span>\n      <span [style.color]=\"calendarAccount.theme?.backgroundColor || ''\">{{ calendarAccount.email }}</span>\n    } @else if (note) {\n      <span><mat-icon>event_note</mat-icon> {{ 'FIELDS.NOTE' | translate }}</span>\n      <span class=\"event-note\" [innerHTML]=\"note\"></span>\n    }\n  </div>\n</div>\n", styles: [".text-style,.event-info-body .data-item{font-family:Gilroy-Regular,serif;font-style:normal;font-weight:500;font-size:16px}.event-info-body{padding:0 15px 20px;max-height:calc(var(--viewport-height) * 60);position:relative;display:block;overflow:auto}.event-info-body .data-item{margin-top:20px;display:flex}.event-info-body .data-item.centred{flex-direction:column;align-items:center;margin-bottom:10px}.event-info-body .data-item span{font-size:14px}.event-info-body .data-item span:first-child{min-width:85px}.event-info-body .data-item span:first-child .mat-icon{position:relative;top:-4px}.event-info-body .data-item span.event-time{display:flex;gap:5px}.event-info-body .data-item span .mat-icon{margin:0 5px 0 0}.event-info-body .data-item span:nth-child(1){display:flex;font-weight:500}.event-info-body .data-item span:nth-child(2){margin-left:20px;opacity:.7}.event-info-body .data-item span.recurring-type{background:var(--cyrano-pink-shade-2);color:#fff;padding:5px 10px;border-radius:30px;height:25px;margin-top:-5px}.event-info-body .data-item .mat-icon.all-day{color:var(--cyrano-pink-shade-1)}\n"] }]
+            args: [{ selector: 'lib-event-info', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, MatIconModule, TranslateModule], providers: [FallbackTranslatePipe, CalendarUtilsService], template: "<div class=\"event-info-body\">\n  <div class=\"data-item\" *ngIf=\"event.allDay\">\n    <span><mat-icon class=\"all-day\">done_all</mat-icon> {{ 'CALENDAR.ALL_DAY' | translate }}</span>\n  </div>\n  <div class=\"data-item\">\n    <span> <mat-icon>event</mat-icon> {{ 'CALENDAR.STARTS' | translate }}</span>\n    <span class=\"event-time\">\n      {{ recurringException?.startDate || event.recurringStartDate || event.startDate | date: 'yyyy-MM-dd' }}\n      <span *ngIf=\"!event.allDay\"> - {{ event.startTime | date: 'h:mm a' }}</span>\n    </span>\n  </div>\n  <div class=\"data-item\">\n    <span><mat-icon>event_available</mat-icon> {{ 'CALENDAR.ENDS' | translate }}</span>\n    <span class=\"event-time\">\n      {{ recurringException?.endDate || event.recurringEndDate || event.endDate | date: 'yyyy-MM-dd' }}\n      <span *ngIf=\"!event.allDay\"> - {{ event.endTime | date: 'h:mm a' }}</span>\n    </span>\n  </div>\n\n  <div class=\"data-item\">\n    @if (event.recurringPattern?.type) {\n      <span><mat-icon>event_repeat</mat-icon> {{ 'CALENDAR.RECURRING' | translate }}</span>\n      <span class=\"recurring-type\">{{ 'CALENDAR.' + event.recurringPattern.type | translate }}</span>\n    } @else if (address) {\n      <span><mat-icon>location_on</mat-icon> {{ 'LOCATION.TITLE' | translate }}</span>\n      <span [innerHTML]=\"address\"></span>\n    } @else if (calendarAccount) {\n      <span><mat-icon>email</mat-icon> {{ 'CALENDAR.ACCOUNT' | translate }}</span>\n      <span [style.color]=\"calendarAccount.theme?.backgroundColor || ''\">{{ calendarAccount.email }}</span>\n    } @else if (note) {\n      <span><mat-icon>event_note</mat-icon> {{ 'FIELDS.NOTE' | translate }}</span>\n      <span class=\"event-note\" [innerHTML]=\"note\"></span>\n    }\n  </div>\n</div>\n", styles: [".text-style,.event-info-body .data-item{font-family:Gilroy-Regular,serif;font-style:normal;font-weight:500;font-size:16px}.event-info-body{padding:0 15px 20px;max-height:calc(var(--viewport-height) * 60);position:relative;display:block;overflow:auto}.event-info-body .data-item{margin-top:20px;display:flex}.event-info-body .data-item.centred{flex-direction:column;align-items:center;margin-bottom:10px}.event-info-body .data-item span{font-size:14px}.event-info-body .data-item span:first-child{min-width:85px}.event-info-body .data-item span:first-child .mat-icon{position:relative;top:-4px}.event-info-body .data-item span.event-time{display:flex;gap:5px}.event-info-body .data-item span .mat-icon{margin:0 5px 0 0}.event-info-body .data-item span:nth-child(1){display:flex;font-weight:500}.event-info-body .data-item span:nth-child(2){margin-left:20px;opacity:.7}.event-info-body .data-item span.recurring-type{background:var(--cyrano-pink-shade-2);color:#fff;padding:5px 10px;border-radius:30px;height:25px;margin-top:-5px}.event-info-body .data-item .mat-icon.all-day{color:var(--cyrano-pink-shade-1)}\n"] }]
         }], ctorParameters: () => [{ type: FallbackTranslatePipe }, { type: CalendarUtilsService }], propDecorators: { event: [{
                 type: Input
             }], calendars: [{
                 type: Input
             }] } });
 
-var FormFieldType;
-(function (FormFieldType) {
-    FormFieldType["date"] = "date";
-    FormFieldType["text"] = "text";
-    FormFieldType["textarea"] = "textarea";
-    FormFieldType["typeahead"] = "typeahead";
-    FormFieldType["multiselect"] = "multiselect";
-    FormFieldType["select"] = "select";
-    FormFieldType["checkbox"] = "checkbox";
-    FormFieldType["toggle"] = "toggle";
-    FormFieldType["radio"] = "radio";
-    FormFieldType["textlist"] = "textlist";
-    FormFieldType["number"] = "number";
-    FormFieldType["message"] = "message";
-    FormFieldType["time"] = "time";
-    FormFieldType["multifield"] = "multifield";
-    FormFieldType["action"] = "action";
-    FormFieldType["currency"] = "currency";
-    FormFieldType["banner"] = "banner";
-    FormFieldType["percentage"] = "percentage";
-    FormFieldType["multiselectdropdown"] = "multiselectdropdown";
-    FormFieldType["hyperlink"] = "hyperlink";
-    FormFieldType["injectable"] = "injectable";
-    FormFieldType["datetime"] = "datetime";
-    FormFieldType["rating"] = "rating";
-    FormFieldType["incrementer"] = "incrementer";
-    FormFieldType["range"] = "range";
-    FormFieldType["password"] = "password";
-})(FormFieldType || (FormFieldType = {}));
-
-var EditRecurringEventOptions;
-(function (EditRecurringEventOptions) {
-    EditRecurringEventOptions["CURRENT"] = "CURRENT";
-    EditRecurringEventOptions["FOLLOWING"] = "FOLLOWING";
-    EditRecurringEventOptions["ALL"] = "ALL";
-})(EditRecurringEventOptions || (EditRecurringEventOptions = {}));
-
 class LibEditRecurringEventComponent {
     constructor(fallbackTranslatePipe) {
         this.fallbackTranslatePipe = fallbackTranslatePipe;
@@ -927,11 +834,11 @@ class LibEditRecurringEventComponent {
         this.editOptionsCtrl.setValue(this.excludeCurrentInstance ? EditRecurringEventOptions.FOLLOWING : EditRecurringEventOptions.CURRENT);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibEditRecurringEventComponent, deps: [{ token: FallbackTranslatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LibEditRecurringEventComponent, isStandalone: true, selector: "lib-edit-recurring-event", inputs: { excludeCurrentInstance: "excludeCurrentInstance", editOptionsCtrl: "editOptionsCtrl" }, ngImport: i0, template: "@if (options) {\n  <div class=\"edit-recurring-options\">\n    <lib-form-field\n      class=\"recurring-edit-options\"\n      [formFieldControl]=\"editOptionsCtrl\"\n      [radioTranslateLabels]=\"true\"\n      [radioRippleEffect]=\"false\"\n      [options]=\"options\"\n      [type]=\"radioFieldType\"\n    ></lib-form-field>\n  </div>\n}\n", styles: [".edit-recurring-options{padding:20px 10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: InputFieldModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormFieldModule }, { kind: "component", type: i2.FormFieldComponent, selector: "lib-form-field", inputs: ["fieldName", "label", "placeholder", "message", "useTooltips", "descriptionText", "formFieldControl", "submitted", "required", "type", "plusIconUrl", "minusIconUrl", "maxLength", "max", "min", "pinValue", "dualKnobs", "reverseBarColor", "defaultValue", "noMargin", "options", "iconHtml", "invalidPatternMessage", "dateFormat", "currencySymbol", "hideCents", "isEditable", "rowEditConfirmationObsv", "errorInlineMode", "showLabelInRequiredErrorMessage", "decimalPosition", "hyperlinkTarget", "readOnly", "focus", "showRequiredIndicator", "maxDate", "minDate", "radioTranslateLabels", "radioDeselectable", "radioRippleEffect"], outputs: ["rowEdit", "focusOut", "valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LibEditRecurringEventComponent, isStandalone: true, selector: "lib-edit-recurring-event", inputs: { excludeCurrentInstance: "excludeCurrentInstance", editOptionsCtrl: "editOptionsCtrl" }, providers: [FallbackTranslatePipe], ngImport: i0, template: "@if (options) {\n  <div class=\"edit-recurring-options\">\n    <lib-form-field\n      class=\"recurring-edit-options\"\n      [formFieldControl]=\"editOptionsCtrl\"\n      [radioTranslateLabels]=\"true\"\n      [radioRippleEffect]=\"false\"\n      [options]=\"options\"\n      [type]=\"radioFieldType\"\n    ></lib-form-field>\n  </div>\n}\n", styles: [".edit-recurring-options{padding:20px 10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: InputFieldModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormFieldModule }, { kind: "component", type: i2.FormFieldComponent, selector: "lib-form-field", inputs: ["fieldName", "label", "placeholder", "message", "useTooltips", "descriptionText", "formFieldControl", "submitted", "required", "type", "plusIconUrl", "minusIconUrl", "maxLength", "max", "min", "pinValue", "dualKnobs", "reverseBarColor", "defaultValue", "noMargin", "options", "iconHtml", "invalidPatternMessage", "dateFormat", "currencySymbol", "hideCents", "isEditable", "rowEditConfirmationObsv", "errorInlineMode", "showLabelInRequiredErrorMessage", "decimalPosition", "hyperlinkTarget", "readOnly", "focus", "showRequiredIndicator", "maxDate", "minDate", "radioTranslateLabels", "radioDeselectable", "radioRippleEffect"], outputs: ["rowEdit", "focusOut", "valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibEditRecurringEventComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-edit-recurring-event', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FallbackTranslatePipe, TranslateModule, InputFieldModule, FormsModule, ReactiveFormsModule, FormFieldModule], template: "@if (options) {\n  <div class=\"edit-recurring-options\">\n    <lib-form-field\n      class=\"recurring-edit-options\"\n      [formFieldControl]=\"editOptionsCtrl\"\n      [radioTranslateLabels]=\"true\"\n      [radioRippleEffect]=\"false\"\n      [options]=\"options\"\n      [type]=\"radioFieldType\"\n    ></lib-form-field>\n  </div>\n}\n", styles: [".edit-recurring-options{padding:20px 10px}\n"] }]
+            args: [{ selector: 'lib-edit-recurring-event', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, TranslateModule, InputFieldModule, FormsModule, ReactiveFormsModule, FormFieldModule], providers: [FallbackTranslatePipe], template: "@if (options) {\n  <div class=\"edit-recurring-options\">\n    <lib-form-field\n      class=\"recurring-edit-options\"\n      [formFieldControl]=\"editOptionsCtrl\"\n      [radioTranslateLabels]=\"true\"\n      [radioRippleEffect]=\"false\"\n      [options]=\"options\"\n      [type]=\"radioFieldType\"\n    ></lib-form-field>\n  </div>\n}\n", styles: [".edit-recurring-options{padding:20px 10px}\n"] }]
         }], ctorParameters: () => [{ type: FallbackTranslatePipe }], propDecorators: { excludeCurrentInstance: [{
                 type: Input
             }], editOptionsCtrl: [{
@@ -1173,13 +1080,13 @@ class LibEventFormComponent extends BaseComponent {
             this.submitFormEvent(this._draggedEvent, this.draggedEvent);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibEventFormComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.FormBuilder }, { token: CalendarUtilsService }, { token: FallbackTranslatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LibEventFormComponent, isStandalone: false, selector: "lib-event-form", inputs: { calendars: "calendars", event: "event", draggedEvent: "draggedEvent" }, outputs: { updateRecurringEvent: "updateRecurringEvent", updateDraggedEvent: "updateDraggedEvent", delete: "delete", closeForm: "closeForm", submitForm: "submitForm" }, usesInheritance: true, ngImport: i0, template: "<lib-bottom-modal\n  [title]=\"modalTitle\"\n  [(isOpen)]=\"openModal\"\n  [(showConfirm)]=\"showConfirm\"\n  [confirmButton]=\"'CONFIRM.YES' | fallbackTranslate: 'Yes'\"\n  [confirmCancelButton]=\"'CONFIRM.No' | fallbackTranslate: 'No'\"\n  [confirmationTitle]=\"'CONFIRM.ARE_YOU_SURE' | fallbackTranslate: 'Confirm Deletion'\"\n  [confirmationMsg]=\"'CONFIRM.ARE_YOU_SURE_MESSAGE' | fallbackTranslate: 'Sure you want to delete?'\"\n  [showCloseBtn]=\"!cancelButtonTitle && editMode\"\n  [customClass]=\"'calendar-event-modal'\"\n  [loading]=\"loading$ | async\"\n  [validModal]=\"(!form || form.valid) && (loading$ | async) !== true\"\n  [submitButtonTitle]=\"submitButtonTitle\"\n  [secondaryButtonTitle]=\"secondaryButtonTitle\"\n  [cancelButtonTitle]=\"cancelButtonTitle\"\n  (secondaryButtonClick)=\"onModalSecondaryButtonClick()\"\n  (closeModal)=\"resetModal()\"\n  (submitModal)=\"onSubmitModal()\"\n  (confirmEvent)=\"onDeleteConfirm()\"\n>\n  <div class=\"event-modal\">\n    <lib-event-info [event]=\"event\" [calendars]=\"calendars\" *ngIf=\"!form && editMode && !openRecurringOptions\"></lib-event-info>\n    <lib-edit-recurring-event [editOptionsCtrl]=\"editOptionsCtrl\" [excludeCurrentInstance]=\"recurringTypeChanged\" *ngIf=\"openRecurringOptions\"></lib-edit-recurring-event>\n    <ng-content></ng-content>\n    <form [formGroup]=\"form\" *ngIf=\"form && !openRecurringOptions\" autocomplete=\"off\" appFocusInvalidInput (ngSubmit)=\"saveEvent()\" (keyup.enter)=\"saveEvent()\" id=\"event-form\">\n      <div class=\"form-body\">\n        <div class=\"form-row center-content\">\n          <div class=\"event-title-field\">\n            <lib-input-field\n              maxLength=\"2000\"\n              formControlName=\"title\"\n              type=\"text\"\n              [readonly]=\"loading$ | async\"\n              [label]=\"'CALENDAR.TITLE_FIELD' | fallbackTranslate: 'Title'\"\n              [trimWhiteSpace]=\"false\"\n            ></lib-input-field>\n            <lib-error-message class=\"input-error event-input-field-error\" [config]=\"{ control: form.controls['title'] }\"></lib-error-message>\n          </div>\n        </div>\n        <div class=\"form-row event-dates\">\n          <div class=\"input-field-container input-field-container-group\">\n            <div class=\"event-date-container\" [ngClass]=\"{ 'input-field-container-full-row': !form.controls['allDay'].value }\">\n              <lib-input-date-field\n                class=\"event-date\"\n                formControlName=\"startDate\"\n                [readonly]=\"loading$ | async\"\n                [hieActions]=\"true\"\n                [showIcon]=\"true\"\n                [label]=\"'CALENDAR.START_DATE' | fallbackTranslate: 'Start Date'\"\n              ></lib-input-date-field>\n              <lib-error-message class=\"input-error event-input-field-error\" [config]=\"{ control: form.controls['startDate'] }\"></lib-error-message>\n            </div>\n            @if (form.controls['allDay'].value) {\n              <lib-input-date-field\n                class=\"event-date event-end-date\"\n                formControlName=\"endDate\"\n                [disabled]=\"loading$ | async\"\n                [hieActions]=\"true\"\n                [showIcon]=\"true\"\n                [label]=\"'CALENDAR.END_DATE' | fallbackTranslate: 'End Date'\"\n              ></lib-input-date-field>\n              <lib-error-message class=\"input-error event-input-field-error\" [config]=\"{ control: form.controls['endDate'] }\"></lib-error-message>\n            }\n          </div>\n        </div>\n\n        @if (!form.controls['allDay'].value) {\n          <div class=\"form-row\">\n            <div class=\"input-field-container input-field-container-group time-fields-group\">\n              <div class=\"time-field\">\n                <lib-input-time-field\n                  formControlName=\"startTime\"\n                  [showIcon]=\"true\"\n                  [startDate]=\"eventStart\"\n                  [interval]=\"15\"\n                  [disabled]=\"loading$ | async\"\n                  [label]=\"'CALENDAR.STARTS' | fallbackTranslate: 'Starts'\"\n                ></lib-input-time-field>\n                <lib-error-message class=\"input-error event-input-field-error\" [config]=\"{ control: form.controls['startTime'] }\"></lib-error-message>\n              </div>\n              <div class=\"time-field\">\n                <lib-input-time-field\n                  class=\"end-time\"\n                  formControlName=\"endTime\"\n                  [interval]=\"15\"\n                  [showIcon]=\"true\"\n                  [displaySlotTime]=\"true\"\n                  [fromTime]=\"\n                    form.controls.startTime.value && form.controls.startTime.value['slotValue'] ? form.controls.startTime.value['slotValue'] : form.controls.startTime.value\n                  \"\n                  [startDate]=\"eventStart\"\n                  [disabled]=\"loading$ | async\"\n                  [label]=\"'CALENDAR.ENDS' | fallbackTranslate: 'Ends'\"\n                ></lib-input-time-field>\n                <lib-error-message class=\"input-error event-input-field-error\" [config]=\"{ control: form.controls['endTime'] }\"></lib-error-message>\n              </div>\n            </div>\n          </div>\n        }\n\n        <div class=\"form-row recurring\">\n          <div class=\"recurring-select\" formGroupName=\"recurringPattern\">\n            <lib-input-field-select\n              formControlName=\"type\"\n              [optionLabel]=\"(recurringOptions[0].title | fallbackTranslate: 'noTrnslations') === 'noTrnslations' ? 'name' : 'title'\"\n              [optionValue]=\"'type'\"\n              [options]=\"recurringOptions\"\n              [disabled]=\"loading$ | async\"\n            >\n            </lib-input-field-select>\n          </div>\n          <div class=\"allDay-container\">\n            <ion-item class=\"no-shadow allDay\">\n              <label>\n                <lib-dashed-checkbox formControlName=\"allDay\" [disabled]=\"loading$ | async\"></lib-dashed-checkbox>\n                <span>{{ 'CALENDAR.ALL_DAY' | fallbackTranslate: 'All day' }}</span>\n              </label>\n            </ion-item>\n          </div>\n        </div>\n\n        <div class=\"form-row address\">\n          <div class=\"input-field-container\">\n            <lib-input-field\n              maxLength=\"2000\"\n              [trimWhiteSpace]=\"false\"\n              formControlName=\"address\"\n              [enableGoogleAddress]=\"true\"\n              [address]=\"form.controls['address'].value\"\n              (locationChange)=\"onLocationChange($event)\"\n              [readonly]=\"loading$ | async\"\n              [label]=\"'FIELDS.ADD_LOCATION' | fallbackTranslate: 'Location'\"\n            >\n            </lib-input-field>\n            <lib-error-message class=\"input-error\" [config]=\"{ control: form.controls['address'] }\"></lib-error-message>\n          </div>\n        </div>\n\n        <div class=\"form-row\">\n          <div class=\"event-note-field\">\n            <lib-input-field\n              formControlName=\"note\"\n              [textarea]=\"true\"\n              [label]=\"'FIELDS.ADD_DESCRIPTION' | fallbackTranslate: 'Description'\"\n              maxLength=\"2000\"\n              [readonly]=\"loading$ | async\"\n            ></lib-input-field>\n          </div>\n        </div>\n      </div>\n    </form>\n  </div>\n</lib-bottom-modal>\n", styles: [".event-modal{--input-width: 100%;--input-height: 48px;--border-radius: 100px;--input-icon-color: #fe3c72;--input-font-color: #fff;--dropdown-background: linear-gradient(191.18deg, #27242c 61.33%, #0c0b0e 101.43%);--input-font-family: \"Gilroy-Regular\", serif;--label-color: grey;--input-field-box-shadow: inset 17px 22px 20px 2.5px rgba(17, 16, 20, .7), inset -2px -2px 8px rgba(203, 199, 209, .5);--input-number-filed-font: var(--font-family);--textarea-height: 100px !important;position:relative;display:block;width:100%;padding:0 20px 10px;max-height:72vh;overflow:auto}.event-modal .form-row{display:flex;flex-direction:row;margin-bottom:10px}.event-modal .form-row.form-footer{align-items:flex-end;justify-content:flex-end;margin-bottom:-15px}.event-modal .form-row.form-footer lib-primary-btn{width:100px}.event-modal .form-row.form-row-error{margin:-10px 0 0;padding:0;height:20px}.event-modal .form-row.recurring{margin:12px 0;display:flex}.event-modal .form-row.recurring .allDay-container,.event-modal .form-row.recurring .recurring-select{width:50%}.event-modal .form-row.recurring .recurring-select lib-input-field-select{width:100%}.event-modal .form-row.recurring .allDay-container{display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-end;margin-top:-10px}.event-modal form{padding:5px 5px 0}.event-modal form .form-body{max-width:100%;position:relative;display:block}.event-modal ion-item ion-label{font-family:Gilroy-Regular,serif!important}.event-modal ion-item ion-label:not(.allDay){display:flex!important;flex-direction:row;align-items:center;justify-content:center}.event-modal ion-item.allDay{margin-top:-10px;width:fit-content;--min-height: 50px}.event-modal ion-item.allDay label{display:flex;gap:10px;align-items:center;font-family:Gilroy-Regular,serif;cursor:pointer}.event-modal ion-item.allDay lib-dashed-checkbox{--size: 24px;--color: var(--cyrano-pink-shade-1)}.event-modal .event-title-field,.event-modal .event-note-field{position:relative;display:block;width:100%;padding-top:10px}.event-modal .event-title-field lib-input-field,.event-modal .event-note-field lib-input-field{position:relative;width:100%;min-width:100%}.event-modal .input-field-container{padding-top:2px;width:100%}.event-modal .input-field-container.input-field-container-group{display:flex;gap:5px}.event-modal .input-field-container.input-field-container-group div{width:50%}.event-modal .input-field-container.input-field-container-group div.input-field-container-full-row{width:100%}.event-modal .input-field-container .time-fields{display:flex;gap:10px}.event-modal .input-field-container lib-input-field{width:100%}.event-modal .field-error{position:relative;display:block;width:100%}@media screen and (max-width: 500px){.event-modal .event-date-container{margin-bottom:15px}.event-modal .input-field-container-group{display:flex;flex-direction:column}.event-modal .input-field-container-group div{width:100%!important}.event-modal .input-field-container-group.time-fields-group{flex-direction:row}.event-modal .form-row.recurring{display:block}.event-modal .form-row.recurring .allDay-container,.event-modal .form-row.recurring .recurring-select{width:100%}.event-modal .form-row.recurring .allDay-container{display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-end}.event-modal .form-row.recurring .allDay-container ion-item.allDay{padding-left:0;margin-top:10px}.event-modal .form-row.address{margin-top:-20px}.event-modal .form-row.event-dates{margin-bottom:0}}@media screen and (max-width: 350px){.event-modal .input-placeholder.input-placeholder-date .time-placeholder{margin-left:0}}.event-modal .event-input-field-error{margin-top:-20px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i2.DashedCheckboxComponent, selector: "lib-dashed-checkbox", inputs: ["checked", "disabled"], outputs: ["toggle"] }, { kind: "component", type: i2.InputDateFieldComponent, selector: "lib-input-date-field", inputs: ["label", "defaultDate", "maxDate", "minDate", "showTime", "hieActions", "readonly", "defaultDayHighlight", "showIcon", "timeOnly", "view", "disabled", "dateFormat", "placeholder", "appendTo", "stepMinute", "mask", "styleClass", "timeFormat"], outputs: ["focusEvent"] }, { kind: "component", type: i2.InputFieldComponent, selector: "lib-input-field,[lib-input-field]", inputs: ["name", "autocomplete", "label", "placeholder", "type", "readonly", "focus", "enableGoogleAddress", "locationAutocompleteConfig", "defaultLocation", "mask", "prefix", "suffix", "maxLength", "value", "address", "textarea", "resize", "counter", "patterns", "trimWhiteSpace", "disabled"], outputs: ["mapError", "locationChange", "keyDown", "onBlur"] }, { kind: "component", type: i2.InputFieldSelectComponent, selector: "lib-input-field-select", inputs: ["multiple", "label", "placeholder", "optionLabel", "optionValue", "options", "optionsTemplates", "filterBy", "enableFilter", "readonly", "disabled", "showClear", "editable", "withTemplate", "enableTranslation"], outputs: ["valueChange"] }, { kind: "component", type: i2.InputTimeFieldComponent, selector: "lib-input-time-field", inputs: ["startDate", "interval", "displaySlotTime", "fromTime", "format", "label", "readonly", "showIcon", "disabled"], outputs: ["focusEvent"] }, { kind: "component", type: i2.BottomModalComponent, selector: "lib-bottom-modal", inputs: ["breakpoints", "initialBreakpoint", "isOpen", "canDismiss", "showArrow", "showBackBtn", "showConfirm", "showCloseBtn", "loading", "showHeaderSeparator", "title", "confirmationTitle", "confirmationMsg", "confirmButton", "confirmCancelButton", "description", "secondaryButtonTitle", "submitButtonTitle", "cancelButtonTitle", "validModal", "adaptToContentHeight", "customClass"], outputs: ["isOpenChange", "breakpointChange", "closeModal", "submitModal", "secondaryButtonClick", "backClick", "showConfirmChange", "confirmEvent"] }, { kind: "component", type: i2.LibErrorMessageComponent, selector: "lib-error-message", inputs: ["config"] }, { kind: "component", type: LibEventInfoComponent, selector: "lib-event-info", inputs: ["event", "calendars"] }, { kind: "component", type: LibEditRecurringEventComponent, selector: "lib-edit-recurring-event", inputs: ["excludeCurrentInstance", "editOptionsCtrl"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: FallbackTranslatePipe, name: "fallbackTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibEventFormComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.FormBuilder }, { token: CalendarUtilsService }, { token: FallbackTranslatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LibEventFormComponent, isStandalone: false, selector: "lib-event-form", inputs: { calendars: "calendars", event: "event", draggedEvent: "draggedEvent" }, outputs: { updateRecurringEvent: "updateRecurringEvent", updateDraggedEvent: "updateDraggedEvent", delete: "delete", closeForm: "closeForm", submitForm: "submitForm" }, usesInheritance: true, ngImport: i0, template: "<lib-bottom-modal\n  [title]=\"modalTitle\"\n  [(isOpen)]=\"openModal\"\n  [(showConfirm)]=\"showConfirm\"\n  [confirmButton]=\"'CONFIRM.YES' | fallbackTranslate: 'Yes'\"\n  [confirmCancelButton]=\"'CONFIRM.No' | fallbackTranslate: 'No'\"\n  [confirmationTitle]=\"'CONFIRM.ARE_YOU_SURE' | fallbackTranslate: 'Confirm Deletion'\"\n  [confirmationMsg]=\"'CONFIRM.ARE_YOU_SURE_MESSAGE' | fallbackTranslate: 'Sure you want to delete?'\"\n  [showCloseBtn]=\"!cancelButtonTitle && editMode\"\n  [customClass]=\"'calendar-event-modal'\"\n  [loading]=\"loading$ | async\"\n  [validModal]=\"(!form || form.valid) && (loading$ | async) !== true\"\n  [submitButtonTitle]=\"submitButtonTitle\"\n  [secondaryButtonTitle]=\"secondaryButtonTitle\"\n  [cancelButtonTitle]=\"cancelButtonTitle\"\n  (secondaryButtonClick)=\"onModalSecondaryButtonClick()\"\n  (closeModal)=\"resetModal()\"\n  (submitModal)=\"onSubmitModal()\"\n  (confirmEvent)=\"onDeleteConfirm()\"\n>\n  <div class=\"event-modal\">\n    <lib-event-info [event]=\"event\" [calendars]=\"calendars\" *ngIf=\"!form && editMode && !openRecurringOptions\"></lib-event-info>\n    <lib-edit-recurring-event [editOptionsCtrl]=\"editOptionsCtrl\" [excludeCurrentInstance]=\"recurringTypeChanged\" *ngIf=\"openRecurringOptions\"></lib-edit-recurring-event>\n    <ng-content></ng-content>\n    <form [formGroup]=\"form\" *ngIf=\"form && !openRecurringOptions\" autocomplete=\"off\" appFocusInvalidInput (ngSubmit)=\"saveEvent()\" (keyup.enter)=\"saveEvent()\" id=\"event-form\">\n      <div class=\"form-body\">\n        <div class=\"form-row center-content\">\n          <div class=\"event-title-field\">\n            <lib-input-field\n              maxLength=\"2000\"\n              formControlName=\"title\"\n              type=\"text\"\n              [readonly]=\"loading$ | async\"\n              [label]=\"'CALENDAR.TITLE_FIELD' | fallbackTranslate: 'Title'\"\n              [trimWhiteSpace]=\"false\"\n            ></lib-input-field>\n            <lib-error-message class=\"input-error event-input-field-error\" [config]=\"{ control: form.controls['title'] }\"></lib-error-message>\n          </div>\n        </div>\n        <div class=\"form-row event-dates\">\n          <div class=\"input-field-container input-field-container-group\">\n            <div class=\"event-date-container\" [ngClass]=\"{ 'input-field-container-full-row': !form.controls['allDay'].value }\">\n              <lib-input-date-field\n                class=\"event-date\"\n                formControlName=\"startDate\"\n                [readonly]=\"loading$ | async\"\n                [hieActions]=\"true\"\n                [showIcon]=\"true\"\n                [label]=\"'CALENDAR.START_DATE' | fallbackTranslate: 'Start Date'\"\n              ></lib-input-date-field>\n              <lib-error-message class=\"input-error event-input-field-error\" [config]=\"{ control: form.controls['startDate'] }\"></lib-error-message>\n            </div>\n            @if (form.controls['allDay'].value) {\n              <lib-input-date-field\n                class=\"event-date event-end-date\"\n                formControlName=\"endDate\"\n                [disabled]=\"loading$ | async\"\n                [hieActions]=\"true\"\n                [showIcon]=\"true\"\n                [label]=\"'CALENDAR.END_DATE' | fallbackTranslate: 'End Date'\"\n              ></lib-input-date-field>\n              <lib-error-message class=\"input-error event-input-field-error\" [config]=\"{ control: form.controls['endDate'] }\"></lib-error-message>\n            }\n          </div>\n        </div>\n\n        @if (!form.controls['allDay'].value) {\n          <div class=\"form-row\">\n            <div class=\"input-field-container input-field-container-group time-fields-group\">\n              <div class=\"time-field\">\n                <lib-input-time-field\n                  formControlName=\"startTime\"\n                  [showIcon]=\"true\"\n                  [startDate]=\"eventStart\"\n                  [interval]=\"15\"\n                  [disabled]=\"loading$ | async\"\n                  [label]=\"'CALENDAR.STARTS' | fallbackTranslate: 'Starts'\"\n                ></lib-input-time-field>\n                <lib-error-message class=\"input-error event-input-field-error\" [config]=\"{ control: form.controls['startTime'] }\"></lib-error-message>\n              </div>\n              <div class=\"time-field\">\n                <lib-input-time-field\n                  class=\"end-time\"\n                  formControlName=\"endTime\"\n                  [interval]=\"15\"\n                  [showIcon]=\"true\"\n                  [displaySlotTime]=\"true\"\n                  [fromTime]=\"\n                    form.controls.startTime.value && form.controls.startTime.value['slotValue'] ? form.controls.startTime.value['slotValue'] : form.controls.startTime.value\n                  \"\n                  [startDate]=\"eventStart\"\n                  [disabled]=\"loading$ | async\"\n                  [label]=\"'CALENDAR.ENDS' | fallbackTranslate: 'Ends'\"\n                ></lib-input-time-field>\n                <lib-error-message class=\"input-error event-input-field-error\" [config]=\"{ control: form.controls['endTime'] }\"></lib-error-message>\n              </div>\n            </div>\n          </div>\n        }\n\n        <div class=\"form-row recurring\">\n          <div class=\"recurring-select\" formGroupName=\"recurringPattern\">\n            <lib-input-field-select\n              formControlName=\"type\"\n              [optionLabel]=\"(recurringOptions[0].title | fallbackTranslate: 'noTrnslations') === 'noTrnslations' ? 'name' : 'title'\"\n              [optionValue]=\"'type'\"\n              [options]=\"recurringOptions\"\n              [disabled]=\"loading$ | async\"\n            >\n            </lib-input-field-select>\n          </div>\n          <div class=\"allDay-container\">\n            <ion-item class=\"no-shadow allDay\">\n              <label>\n                <lib-dashed-checkbox formControlName=\"allDay\" [disabled]=\"loading$ | async\"></lib-dashed-checkbox>\n                <span>{{ 'CALENDAR.ALL_DAY' | fallbackTranslate: 'All day' }}</span>\n              </label>\n            </ion-item>\n          </div>\n        </div>\n\n        <div class=\"form-row address\">\n          <div class=\"input-field-container\">\n            <lib-input-field\n              maxLength=\"2000\"\n              [trimWhiteSpace]=\"false\"\n              formControlName=\"address\"\n              [enableGoogleAddress]=\"true\"\n              [address]=\"form.controls['address'].value\"\n              (locationChange)=\"onLocationChange($event)\"\n              [readonly]=\"loading$ | async\"\n              [label]=\"'FIELDS.ADD_LOCATION' | fallbackTranslate: 'Location'\"\n            >\n            </lib-input-field>\n            <lib-error-message class=\"input-error\" [config]=\"{ control: form.controls['address'] }\"></lib-error-message>\n          </div>\n        </div>\n\n        <div class=\"form-row\">\n          <div class=\"event-note-field\">\n            <lib-input-field\n              formControlName=\"note\"\n              [textarea]=\"true\"\n              [label]=\"'FIELDS.ADD_DESCRIPTION' | fallbackTranslate: 'Description'\"\n              maxLength=\"2000\"\n              [readonly]=\"loading$ | async\"\n            ></lib-input-field>\n          </div>\n        </div>\n      </div>\n    </form>\n  </div>\n</lib-bottom-modal>\n", styles: [".event-modal{--input-width: 100%;--input-height: 48px;--border-radius: 100px;--input-icon-color: #fe3c72;--input-font-color: #fff;--dropdown-background: linear-gradient(191.18deg, #27242c 61.33%, #0c0b0e 101.43%);--input-font-family: \"Gilroy-Regular\", serif;--label-color: grey;--input-field-box-shadow: inset 17px 22px 20px 2.5px rgba(17, 16, 20, .7), inset -2px -2px 8px rgba(203, 199, 209, .5);--input-number-filed-font: var(--font-family);--textarea-height: 100px !important;position:relative;display:block;width:100%;padding:0 20px 10px;max-height:72vh;overflow:auto}.event-modal .form-row{display:flex;flex-direction:row;margin-bottom:10px}.event-modal .form-row.form-footer{align-items:flex-end;justify-content:flex-end;margin-bottom:-15px}.event-modal .form-row.form-footer lib-primary-btn{width:100px}.event-modal .form-row.form-row-error{margin:-10px 0 0;padding:0;height:20px}.event-modal .form-row.recurring{margin:12px 0;display:flex}.event-modal .form-row.recurring .allDay-container,.event-modal .form-row.recurring .recurring-select{width:50%}.event-modal .form-row.recurring .recurring-select lib-input-field-select{width:100%}.event-modal .form-row.recurring .allDay-container{display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-end;margin-top:-10px}.event-modal form{padding:5px 5px 0}.event-modal form .form-body{max-width:100%;position:relative;display:block}.event-modal ion-item ion-label{font-family:Gilroy-Regular,serif!important}.event-modal ion-item ion-label:not(.allDay){display:flex!important;flex-direction:row;align-items:center;justify-content:center}.event-modal ion-item.allDay{margin-top:-10px;width:fit-content;--min-height: 50px}.event-modal ion-item.allDay label{display:flex;gap:10px;align-items:center;font-family:Gilroy-Regular,serif;cursor:pointer}.event-modal ion-item.allDay lib-dashed-checkbox{--size: 24px;--color: var(--cyrano-pink-shade-1)}.event-modal .event-title-field,.event-modal .event-note-field{position:relative;display:block;width:100%;padding-top:10px}.event-modal .event-title-field lib-input-field,.event-modal .event-note-field lib-input-field{position:relative;width:100%;min-width:100%}.event-modal .input-field-container{padding-top:2px;width:100%}.event-modal .input-field-container.input-field-container-group{display:flex;gap:5px}.event-modal .input-field-container.input-field-container-group div{width:50%}.event-modal .input-field-container.input-field-container-group div.input-field-container-full-row{width:100%}.event-modal .input-field-container .time-fields{display:flex;gap:10px}.event-modal .input-field-container lib-input-field{width:100%}.event-modal .field-error{position:relative;display:block;width:100%}@media screen and (max-width: 500px){.event-modal .event-date-container{margin-bottom:15px}.event-modal .input-field-container-group{display:flex;flex-direction:column}.event-modal .input-field-container-group div{width:100%!important}.event-modal .input-field-container-group.time-fields-group{flex-direction:row}.event-modal .form-row.recurring{display:block}.event-modal .form-row.recurring .allDay-container,.event-modal .form-row.recurring .recurring-select{width:100%}.event-modal .form-row.recurring .allDay-container{display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-end}.event-modal .form-row.recurring .allDay-container ion-item.allDay{padding-left:0;margin-top:10px}.event-modal .form-row.address{margin-top:-20px}.event-modal .form-row.event-dates{margin-bottom:0}}@media screen and (max-width: 350px){.event-modal .input-placeholder.input-placeholder-date .time-placeholder{margin-left:0}}.event-modal .event-input-field-error{margin-top:-20px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i2.DashedCheckboxComponent, selector: "lib-dashed-checkbox", inputs: ["checked", "disabled"], outputs: ["toggle"] }, { kind: "component", type: i2.InputDateFieldComponent, selector: "lib-input-date-field", inputs: ["label", "defaultDate", "maxDate", "minDate", "showTime", "hieActions", "readonly", "defaultDayHighlight", "showIcon", "timeOnly", "view", "disabled", "dateFormat", "placeholder", "appendTo", "stepMinute", "mask", "styleClass", "timeFormat"], outputs: ["focusEvent"] }, { kind: "component", type: i2.InputFieldComponent, selector: "lib-input-field,[lib-input-field]", inputs: ["name", "autocomplete", "label", "placeholder", "type", "readonly", "focus", "enableGoogleAddress", "locationAutocompleteConfig", "defaultLocation", "mask", "prefix", "suffix", "maxLength", "value", "address", "textarea", "resize", "counter", "patterns", "trimWhiteSpace", "disabled"], outputs: ["mapError", "locationChange", "keyDown", "onBlur"] }, { kind: "component", type: i2.InputFieldSelectComponent, selector: "lib-input-field-select", inputs: ["multiple", "label", "placeholder", "optionLabel", "optionValue", "options", "optionsTemplates", "filterBy", "enableFilter", "readonly", "disabled", "showClear", "editable", "withTemplate", "enableTranslation"], outputs: ["valueChange"] }, { kind: "component", type: i2.InputTimeFieldComponent, selector: "lib-input-time-field", inputs: ["startDate", "interval", "displaySlotTime", "fromTime", "format", "label", "readonly", "showIcon", "disabled"], outputs: ["focusEvent"] }, { kind: "component", type: i2.BottomModalComponent, selector: "lib-bottom-modal", inputs: ["breakpoints", "initialBreakpoint", "isOpen", "canDismiss", "showArrow", "showBackBtn", "showConfirm", "showCloseBtn", "loading", "showHeaderSeparator", "title", "confirmationTitle", "confirmationMsg", "confirmButton", "confirmCancelButton", "description", "secondaryButtonTitle", "submitButtonTitle", "cancelButtonTitle", "validModal", "adaptToContentHeight", "customClass"], outputs: ["isOpenChange", "breakpointChange", "closeModal", "submitModal", "secondaryButtonClick", "backClick", "showConfirmChange", "confirmEvent"] }, { kind: "component", type: i2.LibErrorMessageComponent, selector: "lib-error-message", inputs: ["config"] }, { kind: "component", type: LibEventInfoComponent, selector: "lib-event-info", inputs: ["event", "calendars"] }, { kind: "component", type: LibEditRecurringEventComponent, selector: "lib-edit-recurring-event", inputs: ["excludeCurrentInstance", "editOptionsCtrl"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: FallbackTranslatePipe, name: "fallbackTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibEventFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-event-form', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<lib-bottom-modal\n  [title]=\"modalTitle\"\n  [(isOpen)]=\"openModal\"\n  [(showConfirm)]=\"showConfirm\"\n  [confirmButton]=\"'CONFIRM.YES' | fallbackTranslate: 'Yes'\"\n  [confirmCancelButton]=\"'CONFIRM.No' | fallbackTranslate: 'No'\"\n  [confirmationTitle]=\"'CONFIRM.ARE_YOU_SURE' | fallbackTranslate: 'Confirm Deletion'\"\n  [confirmationMsg]=\"'CONFIRM.ARE_YOU_SURE_MESSAGE' | fallbackTranslate: 'Sure you want to delete?'\"\n  [showCloseBtn]=\"!cancelButtonTitle && editMode\"\n  [customClass]=\"'calendar-event-modal'\"\n  [loading]=\"loading$ | async\"\n  [validModal]=\"(!form || form.valid) && (loading$ | async) !== true\"\n  [submitButtonTitle]=\"submitButtonTitle\"\n  [secondaryButtonTitle]=\"secondaryButtonTitle\"\n  [cancelButtonTitle]=\"cancelButtonTitle\"\n  (secondaryButtonClick)=\"onModalSecondaryButtonClick()\"\n  (closeModal)=\"resetModal()\"\n  (submitModal)=\"onSubmitModal()\"\n  (confirmEvent)=\"onDeleteConfirm()\"\n>\n  <div class=\"event-modal\">\n    <lib-event-info [event]=\"event\" [calendars]=\"calendars\" *ngIf=\"!form && editMode && !openRecurringOptions\"></lib-event-info>\n    <lib-edit-recurring-event [editOptionsCtrl]=\"editOptionsCtrl\" [excludeCurrentInstance]=\"recurringTypeChanged\" *ngIf=\"openRecurringOptions\"></lib-edit-recurring-event>\n    <ng-content></ng-content>\n    <form [formGroup]=\"form\" *ngIf=\"form && !openRecurringOptions\" autocomplete=\"off\" appFocusInvalidInput (ngSubmit)=\"saveEvent()\" (keyup.enter)=\"saveEvent()\" id=\"event-form\">\n      <div class=\"form-body\">\n        <div class=\"form-row center-content\">\n          <div class=\"event-title-field\">\n            <lib-input-field\n              maxLength=\"2000\"\n              formControlName=\"title\"\n              type=\"text\"\n              [readonly]=\"loading$ | async\"\n              [label]=\"'CALENDAR.TITLE_FIELD' | fallbackTranslate: 'Title'\"\n              [trimWhiteSpace]=\"false\"\n            ></lib-input-field>\n            <lib-error-message class=\"input-error event-input-field-error\" [config]=\"{ control: form.controls['title'] }\"></lib-error-message>\n          </div>\n        </div>\n        <div class=\"form-row event-dates\">\n          <div class=\"input-field-container input-field-container-group\">\n            <div class=\"event-date-container\" [ngClass]=\"{ 'input-field-container-full-row': !form.controls['allDay'].value }\">\n              <lib-input-date-field\n                class=\"event-date\"\n                formControlName=\"startDate\"\n                [readonly]=\"loading$ | async\"\n                [hieActions]=\"true\"\n                [showIcon]=\"true\"\n                [label]=\"'CALENDAR.START_DATE' | fallbackTranslate: 'Start Date'\"\n              ></lib-input-date-field>\n              <lib-error-message class=\"input-error event-input-field-error\" [config]=\"{ control: form.controls['startDate'] }\"></lib-error-message>\n            </div>\n            @if (form.controls['allDay'].value) {\n              <lib-input-date-field\n                class=\"event-date event-end-date\"\n                formControlName=\"endDate\"\n                [disabled]=\"loading$ | async\"\n                [hieActions]=\"true\"\n                [showIcon]=\"true\"\n                [label]=\"'CALENDAR.END_DATE' | fallbackTranslate: 'End Date'\"\n              ></lib-input-date-field>\n              <lib-error-message class=\"input-error event-input-field-error\" [config]=\"{ control: form.controls['endDate'] }\"></lib-error-message>\n            }\n          </div>\n        </div>\n\n        @if (!form.controls['allDay'].value) {\n          <div class=\"form-row\">\n            <div class=\"input-field-container input-field-container-group time-fields-group\">\n              <div class=\"time-field\">\n                <lib-input-time-field\n                  formControlName=\"startTime\"\n                  [showIcon]=\"true\"\n                  [startDate]=\"eventStart\"\n                  [interval]=\"15\"\n                  [disabled]=\"loading$ | async\"\n                  [label]=\"'CALENDAR.STARTS' | fallbackTranslate: 'Starts'\"\n                ></lib-input-time-field>\n                <lib-error-message class=\"input-error event-input-field-error\" [config]=\"{ control: form.controls['startTime'] }\"></lib-error-message>\n              </div>\n              <div class=\"time-field\">\n                <lib-input-time-field\n                  class=\"end-time\"\n                  formControlName=\"endTime\"\n                  [interval]=\"15\"\n                  [showIcon]=\"true\"\n                  [displaySlotTime]=\"true\"\n                  [fromTime]=\"\n                    form.controls.startTime.value && form.controls.startTime.value['slotValue'] ? form.controls.startTime.value['slotValue'] : form.controls.startTime.value\n                  \"\n                  [startDate]=\"eventStart\"\n                  [disabled]=\"loading$ | async\"\n                  [label]=\"'CALENDAR.ENDS' | fallbackTranslate: 'Ends'\"\n                ></lib-input-time-field>\n                <lib-error-message class=\"input-error event-input-field-error\" [config]=\"{ control: form.controls['endTime'] }\"></lib-error-message>\n              </div>\n            </div>\n          </div>\n        }\n\n        <div class=\"form-row recurring\">\n          <div class=\"recurring-select\" formGroupName=\"recurringPattern\">\n            <lib-input-field-select\n              formControlName=\"type\"\n              [optionLabel]=\"(recurringOptions[0].title | fallbackTranslate: 'noTrnslations') === 'noTrnslations' ? 'name' : 'title'\"\n              [optionValue]=\"'type'\"\n              [options]=\"recurringOptions\"\n              [disabled]=\"loading$ | async\"\n            >\n            </lib-input-field-select>\n          </div>\n          <div class=\"allDay-container\">\n            <ion-item class=\"no-shadow allDay\">\n              <label>\n                <lib-dashed-checkbox formControlName=\"allDay\" [disabled]=\"loading$ | async\"></lib-dashed-checkbox>\n                <span>{{ 'CALENDAR.ALL_DAY' | fallbackTranslate: 'All day' }}</span>\n              </label>\n            </ion-item>\n          </div>\n        </div>\n\n        <div class=\"form-row address\">\n          <div class=\"input-field-container\">\n            <lib-input-field\n              maxLength=\"2000\"\n              [trimWhiteSpace]=\"false\"\n              formControlName=\"address\"\n              [enableGoogleAddress]=\"true\"\n              [address]=\"form.controls['address'].value\"\n              (locationChange)=\"onLocationChange($event)\"\n              [readonly]=\"loading$ | async\"\n              [label]=\"'FIELDS.ADD_LOCATION' | fallbackTranslate: 'Location'\"\n            >\n            </lib-input-field>\n            <lib-error-message class=\"input-error\" [config]=\"{ control: form.controls['address'] }\"></lib-error-message>\n          </div>\n        </div>\n\n        <div class=\"form-row\">\n          <div class=\"event-note-field\">\n            <lib-input-field\n              formControlName=\"note\"\n              [textarea]=\"true\"\n              [label]=\"'FIELDS.ADD_DESCRIPTION' | fallbackTranslate: 'Description'\"\n              maxLength=\"2000\"\n              [readonly]=\"loading$ | async\"\n            ></lib-input-field>\n          </div>\n        </div>\n      </div>\n    </form>\n  </div>\n</lib-bottom-modal>\n", styles: [".event-modal{--input-width: 100%;--input-height: 48px;--border-radius: 100px;--input-icon-color: #fe3c72;--input-font-color: #fff;--dropdown-background: linear-gradient(191.18deg, #27242c 61.33%, #0c0b0e 101.43%);--input-font-family: \"Gilroy-Regular\", serif;--label-color: grey;--input-field-box-shadow: inset 17px 22px 20px 2.5px rgba(17, 16, 20, .7), inset -2px -2px 8px rgba(203, 199, 209, .5);--input-number-filed-font: var(--font-family);--textarea-height: 100px !important;position:relative;display:block;width:100%;padding:0 20px 10px;max-height:72vh;overflow:auto}.event-modal .form-row{display:flex;flex-direction:row;margin-bottom:10px}.event-modal .form-row.form-footer{align-items:flex-end;justify-content:flex-end;margin-bottom:-15px}.event-modal .form-row.form-footer lib-primary-btn{width:100px}.event-modal .form-row.form-row-error{margin:-10px 0 0;padding:0;height:20px}.event-modal .form-row.recurring{margin:12px 0;display:flex}.event-modal .form-row.recurring .allDay-container,.event-modal .form-row.recurring .recurring-select{width:50%}.event-modal .form-row.recurring .recurring-select lib-input-field-select{width:100%}.event-modal .form-row.recurring .allDay-container{display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-end;margin-top:-10px}.event-modal form{padding:5px 5px 0}.event-modal form .form-body{max-width:100%;position:relative;display:block}.event-modal ion-item ion-label{font-family:Gilroy-Regular,serif!important}.event-modal ion-item ion-label:not(.allDay){display:flex!important;flex-direction:row;align-items:center;justify-content:center}.event-modal ion-item.allDay{margin-top:-10px;width:fit-content;--min-height: 50px}.event-modal ion-item.allDay label{display:flex;gap:10px;align-items:center;font-family:Gilroy-Regular,serif;cursor:pointer}.event-modal ion-item.allDay lib-dashed-checkbox{--size: 24px;--color: var(--cyrano-pink-shade-1)}.event-modal .event-title-field,.event-modal .event-note-field{position:relative;display:block;width:100%;padding-top:10px}.event-modal .event-title-field lib-input-field,.event-modal .event-note-field lib-input-field{position:relative;width:100%;min-width:100%}.event-modal .input-field-container{padding-top:2px;width:100%}.event-modal .input-field-container.input-field-container-group{display:flex;gap:5px}.event-modal .input-field-container.input-field-container-group div{width:50%}.event-modal .input-field-container.input-field-container-group div.input-field-container-full-row{width:100%}.event-modal .input-field-container .time-fields{display:flex;gap:10px}.event-modal .input-field-container lib-input-field{width:100%}.event-modal .field-error{position:relative;display:block;width:100%}@media screen and (max-width: 500px){.event-modal .event-date-container{margin-bottom:15px}.event-modal .input-field-container-group{display:flex;flex-direction:column}.event-modal .input-field-container-group div{width:100%!important}.event-modal .input-field-container-group.time-fields-group{flex-direction:row}.event-modal .form-row.recurring{display:block}.event-modal .form-row.recurring .allDay-container,.event-modal .form-row.recurring .recurring-select{width:100%}.event-modal .form-row.recurring .allDay-container{display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-end}.event-modal .form-row.recurring .allDay-container ion-item.allDay{padding-left:0;margin-top:10px}.event-modal .form-row.address{margin-top:-20px}.event-modal .form-row.event-dates{margin-bottom:0}}@media screen and (max-width: 350px){.event-modal .input-placeholder.input-placeholder-date .time-placeholder{margin-left:0}}.event-modal .event-input-field-error{margin-top:-20px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.FormBuilder }, { type: CalendarUtilsService }, { type: FallbackTranslatePipe }], propDecorators: { calendars: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.FormBuilder }, { type: CalendarUtilsService }, { type: FallbackTranslatePipe }], propDecorators: { calendars: [{
                 type: Input
             }], event: [{
                 type: Input
@@ -1227,7 +1134,7 @@ class LibEventFormModule {
             LibEventInfoComponent,
             LibEditRecurringEventComponent,
             BaseComponent], exports: [LibEventFormComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibEventFormModule, providers: [CalendarUtilsService], imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibEventFormModule, providers: [CalendarUtilsService, FallbackTranslatePipe], imports: [CommonModule,
             IonicModule,
             TranslateModule,
             FormsModule,
@@ -1270,29 +1177,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                         LibEditRecurringEventComponent,
                         BaseComponent,
                     ],
-                    providers: [CalendarUtilsService],
+                    providers: [CalendarUtilsService, FallbackTranslatePipe],
                 }]
         }] });
 
-var CalendarAccountEnum;
-(function (CalendarAccountEnum) {
-    CalendarAccountEnum["GOOGLE"] = "Google";
-    CalendarAccountEnum["MICROSOFT"] = "Microsoft";
-})(CalendarAccountEnum || (CalendarAccountEnum = {}));
-
-var CalendarAccountIconsEnum;
-(function (CalendarAccountIconsEnum) {
-    CalendarAccountIconsEnum["Google"] = "googleCalender";
-    CalendarAccountIconsEnum["Microsoft"] = "microsoft";
-})(CalendarAccountIconsEnum || (CalendarAccountIconsEnum = {}));
-
-var ScheduleDateStatus;
-(function (ScheduleDateStatus) {
-    ScheduleDateStatus["Suggested"] = "suggested";
-    ScheduleDateStatus["Canceled"] = "canceled";
-    ScheduleDateStatus["Pending"] = "pending";
-})(ScheduleDateStatus || (ScheduleDateStatus = {}));
-
 const mockSchedule = [
     {
         day: 'Mon',
@@ -1476,7 +1364,7 @@ class LibSchedulerComponent {
         this.cdr.detectChanges();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibSchedulerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LibSchedulerComponent, isStandalone: true, selector: "lib-scheduler", inputs: { adsTemplate: "adsTemplate", loading$: "loading$", emptyMessage: "emptyMessage", displayBookedStatuses: "displayBookedStatuses", displayEmptyDays: "displayEmptyDays", events$: "events$", startDate: "startDate", endDate: "endDate", default: "default" }, outputs: { bookEvent: "bookEvent", removeSuggestion: "removeSuggestion" }, ngImport: i0, template: "<div class=\"scheduler-container\" *ngIf=\"(loading$ | async) !== true; else loadingScheduler\">\n  <div class=\"title f-lg f-gilroy-regular\" *ngIf=\"displayBookedStatuses\">{{ bookedCount }} {{ 'BOOKED' | translate }} - {{ suggestedCount }} {{ 'SUGGESTED' | translate }}</div>\n  <ng-container *ngTemplateOutlet=\"adsTemplate\"></ng-container>\n  <div class=\"content wrapper\" libDraggableScroll direction=\"vertical\" *ngIf=\"bookedCount > 0 || suggestedCount > 0 || displayEmptyDays; else emptyScheduler\">\n    @for (eventDay of eventsDays; let dayIndex = $index; track eventDay) {\n      <div class=\"block\">\n        <div class=\"day\">\n          <div class=\"day_name f-md f-gilroy-regular\">{{ eventDay.day }} <lib-section-separator></lib-section-separator></div>\n          @for (event of eventDay.events; let eventIndex = $index; track event) {\n            <div class=\"day-event\" *ngIf=\"event.suggestions?.length > 0\">\n              <div class=\"main_block\" [class.expanded]=\"event.expanded && !event.booked\">\n                <div class=\"event-header\" (click)=\"toggleExpand(dayIndex, eventIndex)\">\n                  <img src=\"assets/scheduler/arrow.svg\" class=\"show_more\" />\n                  <div class=\"time f-calistoga f-lg\">{{ event.start | date: 'h a' }}</div>\n                  <div class=\"wrapper\">\n                    <div class=\"free_time f-gilroy-regular f-md\">\n                      ~{{ event.hours }}\n                      <span [class.booked]=\"event.booked\">\n                        {{ (event.booked ? 'BOOKED' : 'FREE') | translate }}\n                      </span>\n                    </div>\n                    <div class=\"suggestions-count f-gilroy-regular f-sm\" *ngIf=\"event.suggestions?.length > 0\">\n                      <div>{{ event.suggestions.length }} {{ 'EVENT_SUGGETIONS_MSG' | translate }}</div>\n                    </div>\n                  </div>\n                </div>\n                @for (suggestion of event.suggestions; let suggestedIndex = $index; track suggestion) {\n                  <div class=\"suggestion_items\">\n                    <div class=\"suggested-by-wrapper\">\n                      @for (profile of suggestion?.profiles; track profile) {\n                        <div class=\"suggested-by\">\n                          <img class=\"profile\" [src]=\"profile?.img || 'assets/icons/default-profile.svg'\" />\n                          @if (profile?.suggested) {\n                            <img class=\"heart\" src=\"assets/scheduler/heart.svg\" />\n                          } @else if (profile?.cancelled) {\n                            <img class=\"heart\" src=\"assets/scheduler/cancel_active.svg\" />\n                          }\n                        </div>\n                      }\n                      <span class=\"schedule-title\"> {{ suggestion.title }} </span>\n                    </div>\n                    <div class=\"icons\">\n                      <img [src]=\"'assets/scheduler/cancel' + (suggestion.canceled ? '_active' : '') + '.svg'\" (click)=\"cancelSuggestion(dayIndex, eventIndex, suggestedIndex)\" />\n                      <img [src]=\"'assets/scheduler/accept' + (suggestion.checked ? '_active' : '') + '.svg'\" (click)=\"acceptSuggestion(dayIndex, eventIndex, suggestedIndex)\" />\n                    </div>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n  <ng-template #emptyScheduler>\n    <lib-section-separator></lib-section-separator>\n    <div class=\"empty-messsage messsage f-lg f-gilroy-regular\">{{ emptyMessage }}</div>\n  </ng-template>\n</div>\n\n<ng-template #loadingScheduler>\n  <div class=\"scheduler-container\">\n    <div class=\"content\">\n      @for (eventDay of eventsDays; let dayIndex = $index; track eventDay) {\n        <div class=\"block\">\n          <div class=\"day\">\n            <div class=\"day_name f-md f-gilroy-regular\">{{ eventDay.day }} <lib-section-separator></lib-section-separator></div>\n            <p-skeleton width=\"100%\" height=\"20px\" borderRadius=\"20px\"></p-skeleton>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".scheduler-container{position:relative;border-radius:16px}.scheduler-container .title{text-align:center;font-weight:500;margin-top:20px}.scheduler-container .empty-messsage{margin-bottom:40px}.scheduler-container .content{display:flex;flex-direction:column;row-gap:3px}.scheduler-container .content .block{position:relative;z-index:1}.scheduler-container .content .block .day{display:flex;flex-direction:column;row-gap:3px}.scheduler-container .content .block .day .day_name{color:#ebebf599;font-weight:500;display:flex;align-items:center}.scheduler-container .content .block .day .day_name lib-section-separator{width:-webkit-fill-available;--margin-top: .1rem;--margin-bottom: .1rem;margin:0 20px}.scheduler-container .content .block .day .day-event{background:linear-gradient(162deg,#c35a8b -9%,#524b57 32%);padding:2px 2px 0;border-radius:15px}.scheduler-container .content .block .day .day-event .main_block{border-radius:15px;background:linear-gradient(90deg,#fe3c7299 -9%,#3a323f 14%);padding:8px 10px;color:#ebebf599;box-shadow:-1px -3px 8px #ffffff1a}.scheduler-container .content .block .day .day-event .main_block .show_more{width:20px;height:20px;transition:.3s;transform:rotate(-90deg)}.scheduler-container .content .block .day .day-event .main_block .time{color:var(--ion-text-color, #fff5f5)}.scheduler-container .content .block .day .day-event .main_block .free_time{font-weight:500}.scheduler-container .content .block .day .day-event .main_block .free_time .blocked{color:#fe3c72}.scheduler-container .content .block .day .day-event .main_block .event-header{cursor:pointer;display:flex;align-items:center;column-gap:10px}.scheduler-container .content .block .day .day-event .main_block .icons{display:flex;column-gap:10px;padding-right:10px}.scheduler-container .content .block .day .day-event .main_block .icons img{width:25px;height:25px;cursor:pointer}.scheduler-container .content .block .day .day-event .main_block .suggestion_items{transition:.3s;height:0;overflow:hidden;display:flex;justify-content:space-between;margin-top:0}.scheduler-container .content .block .day .day-event .main_block .suggestion_items .suggested-by-wrapper{display:flex;align-items:center}.scheduler-container .content .block .day .day-event .main_block .suggestion_items .suggested-by-wrapper .schedule-title{padding-left:30px}.scheduler-container .content .block .day .day-event .main_block .suggestion_items .suggested-by-wrapper .suggested-by{border:2px solid #28252d;width:25px;height:25px;position:relative;border-radius:50%}.scheduler-container .content .block .day .day-event .main_block .suggestion_items .suggested-by-wrapper .suggested-by .profile{position:absolute;width:100%;height:100%;border-radius:50%}.scheduler-container .content .block .day .day-event .main_block .suggestion_items .suggested-by-wrapper .suggested-by .heart{width:25px;height:25px;position:absolute;top:-4px;right:-12px}.scheduler-container .content .block .day .day-event .main_block .wrapper{flex-direction:row;flex-grow:1;display:flex;justify-content:space-between}.scheduler-container .content .block .day .day-event .main_block.expanded .suggestion_items{transition:.3s;height:30px;margin-top:10px}.scheduler-container .content .block .day .day-event .main_block.expanded .show_more{transition:.3s;transform:rotate(0)}.scheduler-container .content .block .day .day-event .booked{pointer-events:none;color:var(--cyrano-pink-shade-1)}@media (max-width: 576px){.scheduler-container .title{margin-top:10px;font-size:10.25px}.scheduler-container .empty-messsage{font-size:8px}.scheduler-container .content,.scheduler-container .content .block .day{row-gap:3px}.scheduler-container .content .block .day .day_name{font-size:8px}.scheduler-container .content .block .day .day-event{margin-bottom:5px}.scheduler-container .content .block .day .day-event .main_block{padding:5px;border-radius:12px}.scheduler-container .content .block .day .day-event .main_block .show_more{width:12px;height:12px}.scheduler-container .content .block .day .day-event .main_block .wrapper{flex-direction:row;display:flex;justify-content:space-between}.scheduler-container .content .block .day .day-event .main_block .time{margin-right:5px;font-size:12px;font-size:10px;justify-content:space-between}.scheduler-container .content .block .day .day-event .main_block .suggestions-count{text-align:right;font-weight:500;line-height:9.42px;letter-spacing:.07px;font-size:8px;padding-right:10px}.scheduler-container .content .block .day .day-event .main_block .free_time{font-size:10.25px}.scheduler-container .content .block .day .day-event .main_block .event-header{column-gap:5px}.scheduler-container .content .block .day .day-event .main_block .icons img{width:10px;height:10px}.scheduler-container .content .block .day .day-event .main_block .suggestion_items{padding-left:23px;font-size:8px;letter-spacing:.07px}.scheduler-container .content .block .day .day-event .expanded .suggestion_items{height:10px;margin-top:7px}}.day-event .main_block:has(.blocked) .suggestion_items{height:0!important;margin-top:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: SectionSeparatorComponent, selector: "lib-section-separator" }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2$2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LibSchedulerComponent, isStandalone: true, selector: "lib-scheduler", inputs: { adsTemplate: "adsTemplate", loading$: "loading$", emptyMessage: "emptyMessage", displayBookedStatuses: "displayBookedStatuses", displayEmptyDays: "displayEmptyDays", events$: "events$", startDate: "startDate", endDate: "endDate", default: "default" }, outputs: { bookEvent: "bookEvent", removeSuggestion: "removeSuggestion" }, ngImport: i0, template: "<div class=\"scheduler-container\" *ngIf=\"(loading$ | async) !== true; else loadingScheduler\">\n  <div class=\"title f-lg f-gilroy-regular\" *ngIf=\"displayBookedStatuses\">{{ bookedCount }} {{ 'BOOKED' | translate }} - {{ suggestedCount }} {{ 'SUGGESTED' | translate }}</div>\n  <ng-container *ngTemplateOutlet=\"adsTemplate\"></ng-container>\n  <div class=\"content wrapper\" libDraggableScroll direction=\"vertical\" *ngIf=\"bookedCount > 0 || suggestedCount > 0 || displayEmptyDays; else emptyScheduler\">\n    @for (eventDay of eventsDays; let dayIndex = $index; track eventDay) {\n      <div class=\"block\">\n        <div class=\"day\">\n          <div class=\"day_name f-md f-gilroy-regular\">{{ eventDay.day }} <lib-section-separator></lib-section-separator></div>\n          @for (event of eventDay.events; let eventIndex = $index; track event) {\n            <div class=\"day-event\" *ngIf=\"event.suggestions?.length > 0\">\n              <div class=\"main_block\" [class.expanded]=\"event.expanded && !event.booked\">\n                <div class=\"event-header\" (click)=\"toggleExpand(dayIndex, eventIndex)\">\n                  <img src=\"assets/scheduler/arrow.svg\" class=\"show_more\" />\n                  <div class=\"time f-calistoga f-lg\">{{ event.start | date: 'h a' }}</div>\n                  <div class=\"wrapper\">\n                    <div class=\"free_time f-gilroy-regular f-md\">\n                      ~{{ event.hours }}\n                      <span [class.booked]=\"event.booked\">\n                        {{ (event.booked ? 'BOOKED' : 'FREE') | translate }}\n                      </span>\n                    </div>\n                    <div class=\"suggestions-count f-gilroy-regular f-sm\" *ngIf=\"event.suggestions?.length > 0\">\n                      <div>{{ event.suggestions.length }} {{ 'EVENT_SUGGETIONS_MSG' | translate }}</div>\n                    </div>\n                  </div>\n                </div>\n                @for (suggestion of event.suggestions; let suggestedIndex = $index; track suggestion) {\n                  <div class=\"suggestion_items\">\n                    <div class=\"suggested-by-wrapper\">\n                      @for (profile of suggestion?.profiles; track profile) {\n                        <div class=\"suggested-by\">\n                          <img class=\"profile\" [src]=\"profile?.img || 'assets/icons/default-profile.svg'\" />\n                          @if (profile?.suggested) {\n                            <img class=\"heart\" src=\"assets/scheduler/heart.svg\" />\n                          } @else if (profile?.cancelled) {\n                            <img class=\"heart\" src=\"assets/scheduler/cancel_active.svg\" />\n                          }\n                        </div>\n                      }\n                      <span class=\"schedule-title\"> {{ suggestion.title }} </span>\n                    </div>\n                    <div class=\"icons\">\n                      <img [src]=\"'assets/scheduler/cancel' + (suggestion.canceled ? '_active' : '') + '.svg'\" (click)=\"cancelSuggestion(dayIndex, eventIndex, suggestedIndex)\" />\n                      <img [src]=\"'assets/scheduler/accept' + (suggestion.checked ? '_active' : '') + '.svg'\" (click)=\"acceptSuggestion(dayIndex, eventIndex, suggestedIndex)\" />\n                    </div>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n  <ng-template #emptyScheduler>\n    <lib-section-separator></lib-section-separator>\n    <div class=\"empty-messsage messsage f-lg f-gilroy-regular\">{{ emptyMessage }}</div>\n  </ng-template>\n</div>\n\n<ng-template #loadingScheduler>\n  <div class=\"scheduler-container\">\n    <div class=\"content\">\n      @for (eventDay of eventsDays; let dayIndex = $index; track eventDay) {\n        <div class=\"block\">\n          <div class=\"day\">\n            <div class=\"day_name f-md f-gilroy-regular\">{{ eventDay.day }} <lib-section-separator></lib-section-separator></div>\n            <p-skeleton width=\"100%\" height=\"20px\" borderRadius=\"20px\"></p-skeleton>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".scheduler-container{position:relative;border-radius:16px}.scheduler-container .title{text-align:center;font-weight:500;margin-top:20px}.scheduler-container .empty-messsage{margin-bottom:40px}.scheduler-container .content{display:flex;flex-direction:column;row-gap:3px}.scheduler-container .content .block{position:relative;z-index:1}.scheduler-container .content .block .day{display:flex;flex-direction:column;row-gap:3px}.scheduler-container .content .block .day .day_name{color:#ebebf599;font-weight:500;display:flex;align-items:center}.scheduler-container .content .block .day .day_name lib-section-separator{width:-webkit-fill-available;--margin-top: .1rem;--margin-bottom: .1rem;margin:0 20px}.scheduler-container .content .block .day .day-event{background:linear-gradient(162deg,#c35a8b -9%,#524b57 32%);padding:2px 2px 0;border-radius:15px}.scheduler-container .content .block .day .day-event .main_block{border-radius:15px;background:linear-gradient(90deg,#fe3c7299 -9%,#3a323f 14%);padding:8px 10px;color:#ebebf599;box-shadow:-1px -3px 8px #ffffff1a}.scheduler-container .content .block .day .day-event .main_block .show_more{width:20px;height:20px;transition:.3s;transform:rotate(-90deg)}.scheduler-container .content .block .day .day-event .main_block .time{color:var(--ion-text-color, #fff5f5)}.scheduler-container .content .block .day .day-event .main_block .free_time{font-weight:500}.scheduler-container .content .block .day .day-event .main_block .free_time .blocked{color:#fe3c72}.scheduler-container .content .block .day .day-event .main_block .event-header{cursor:pointer;display:flex;align-items:center;column-gap:10px}.scheduler-container .content .block .day .day-event .main_block .icons{display:flex;column-gap:10px;padding-right:10px}.scheduler-container .content .block .day .day-event .main_block .icons img{width:25px;height:25px;cursor:pointer}.scheduler-container .content .block .day .day-event .main_block .suggestion_items{transition:.3s;height:0;overflow:hidden;display:flex;justify-content:space-between;margin-top:0}.scheduler-container .content .block .day .day-event .main_block .suggestion_items .suggested-by-wrapper{display:flex;align-items:center}.scheduler-container .content .block .day .day-event .main_block .suggestion_items .suggested-by-wrapper .schedule-title{padding-left:30px}.scheduler-container .content .block .day .day-event .main_block .suggestion_items .suggested-by-wrapper .suggested-by{border:2px solid #28252d;width:25px;height:25px;position:relative;border-radius:50%}.scheduler-container .content .block .day .day-event .main_block .suggestion_items .suggested-by-wrapper .suggested-by .profile{position:absolute;width:100%;height:100%;border-radius:50%}.scheduler-container .content .block .day .day-event .main_block .suggestion_items .suggested-by-wrapper .suggested-by .heart{width:25px;height:25px;position:absolute;top:-4px;right:-12px}.scheduler-container .content .block .day .day-event .main_block .wrapper{flex-direction:row;flex-grow:1;display:flex;justify-content:space-between}.scheduler-container .content .block .day .day-event .main_block.expanded .suggestion_items{transition:.3s;height:30px;margin-top:10px}.scheduler-container .content .block .day .day-event .main_block.expanded .show_more{transition:.3s;transform:rotate(0)}.scheduler-container .content .block .day .day-event .booked{pointer-events:none;color:var(--cyrano-pink-shade-1)}@media (max-width: 576px){.scheduler-container .title{margin-top:10px;font-size:10.25px}.scheduler-container .empty-messsage{font-size:8px}.scheduler-container .content,.scheduler-container .content .block .day{row-gap:3px}.scheduler-container .content .block .day .day_name{font-size:8px}.scheduler-container .content .block .day .day-event{margin-bottom:5px}.scheduler-container .content .block .day .day-event .main_block{padding:5px;border-radius:12px}.scheduler-container .content .block .day .day-event .main_block .show_more{width:12px;height:12px}.scheduler-container .content .block .day .day-event .main_block .wrapper{flex-direction:row;display:flex;justify-content:space-between}.scheduler-container .content .block .day .day-event .main_block .time{margin-right:5px;font-size:12px;font-size:10px;justify-content:space-between}.scheduler-container .content .block .day .day-event .main_block .suggestions-count{text-align:right;font-weight:500;line-height:9.42px;letter-spacing:.07px;font-size:8px;padding-right:10px}.scheduler-container .content .block .day .day-event .main_block .free_time{font-size:10.25px}.scheduler-container .content .block .day .day-event .main_block .event-header{column-gap:5px}.scheduler-container .content .block .day .day-event .main_block .icons img{width:10px;height:10px}.scheduler-container .content .block .day .day-event .main_block .suggestion_items{padding-left:23px;font-size:8px;letter-spacing:.07px}.scheduler-container .content .block .day .day-event .expanded .suggestion_items{height:10px;margin-top:7px}}.day-event .main_block:has(.blocked) .suggestion_items{height:0!important;margin-top:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: SectionSeparatorComponent, selector: "lib-section-separator" }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2$2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibSchedulerComponent, decorators: [{
             type: Component,
@@ -1526,26 +1414,12 @@ const innerProgressTealColors = {
 const progressDefaultColors = {
     primary: '#FE3C72',
     secondary: '#E15561',
-    tertiary: '#FE3C3C',
-    gradientPrimary: '#f0788d',
-    gradientSecondary: '#f84776',
-    complete: '#ff858f',
-    incomplete: '#E15561',
-};
-
-var INNER_CIRCLE_STATE;
-(function (INNER_CIRCLE_STATE) {
-    INNER_CIRCLE_STATE["Waiting"] = "waiting";
-    INNER_CIRCLE_STATE["Quiet"] = "quiet";
-    INNER_CIRCLE_STATE["Unresponsive"] = "unresponsive";
-    INNER_CIRCLE_STATE["Redelegation"] = "redelegation";
-})(INNER_CIRCLE_STATE || (INNER_CIRCLE_STATE = {}));
-
-var CircleVariable;
-(function (CircleVariable) {
-    CircleVariable["Partial"] = "partial";
-    CircleVariable["Complete"] = "complete";
-})(CircleVariable || (CircleVariable = {}));
+    tertiary: '#FE3C3C',
+    gradientPrimary: '#f0788d',
+    gradientSecondary: '#f84776',
+    complete: '#ff858f',
+    incomplete: '#E15561',
+};
 
 class CircleProgressComponent {
     set config(newConfig) {
@@ -1710,11 +1584,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 type: Output
             }] } });
 
-var LocalStorageKeys;
-(function (LocalStorageKeys) {
-    LocalStorageKeys["LongPressForSendImmediately"] = "longPressForSendImmediately";
-})(LocalStorageKeys || (LocalStorageKeys = {}));
-
 class AbstractCacheService {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AbstractCacheService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AbstractCacheService }); }
@@ -1723,7 +1592,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
             type: Injectable
         }] });
 
-class ChatService {
+let ChatService$1 = class ChatService {
     constructor(cacheService) {
         this.cacheService = cacheService;
     }
@@ -1772,8 +1641,8 @@ class ChatService {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ChatService, deps: [{ token: AbstractCacheService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ChatService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ChatService, decorators: [{
+};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ChatService$1, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1850,13 +1719,13 @@ class LibMessageModalComponent {
             longPressEnabled: this.toggleLongPress.value,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibMessageModalComponent, deps: [{ token: i1$1.FormBuilder }, { token: i2.PopupModalService }, { token: ChatService }, { token: MODAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LibMessageModalComponent, isStandalone: false, selector: "lib-message-modal", viewQueries: [{ propertyName: "toggleTemplate", first: true, predicate: ["toggleTemplate"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"message-modal\">\r\n  <header class=\"message-modal__header\">\r\n    <div class=\"message-modal__info\">\r\n      <div class=\"message-modal__title\">Send Message</div>\r\n    </div>\r\n  </header>\r\n  <form class=\"message-modal__radio-btn\" [formGroup]=\"formTime\">\r\n    <lib-form-field [formFieldControl]=\"messageType\" [radioTranslateLabels]=\"true\" [options]=\"options\" [type]=\"type\"></lib-form-field>\r\n    @if (messageType?.value === 'specify_time') {\r\n      <lib-input-date-field [formControlName]=\"'time'\" label=\"\" [timeOnly]=\"true\" [showIcon]=\"true\"></lib-input-date-field>\r\n    }\r\n  </form>\r\n  <div>\r\n    <lib-primary-btn (click)=\"onSubmit()\" [disabled]=\"formTime.valid\">Send</lib-primary-btn>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #toggleTemplate>\r\n  <div class=\"long-press-toggle\">\r\n    <lib-toggle [formControl]=\"toggleLongPress\"></lib-toggle>\r\n    <div class=\"long-press-toggle__text\">{{ 'MESSAGE_MODAL.LONG_PRESS' | translate }}</div>\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{font-size:clamp(0px,3.2dvw,12px)}:host *{box-sizing:border-box}:host lib-toggle{font-size:.6em}.long-press-toggle{margin:10px;display:flex}.long-press-toggle__text{margin-left:.8em;font-size:1.1em;font-family:Gilroy}.message-modal{-webkit-backdrop-filter:blur(.625em);backdrop-filter:blur(.625em);background:linear-gradient(transparent,#b0b0b01f 15%);margin:auto;color:#fff;padding:1.5em 2.5em;width:27em;border-radius:3.6625em;font-family:Gilroy;display:flex;flex-direction:column;gap:17px}.message-modal__header{display:flex;justify-content:center;align-items:flex-start}.message-modal__title{font-size:1.875em;font-weight:300;font-family:Calistoga;color:#fff5f5}.message-modal__radio-btn{display:flex;flex-direction:column}.message-modal:before{content:\"\";position:absolute;inset:0;border-radius:3.6625em;padding:.125em;background:linear-gradient(to top,transparent,transparent,#ccabc4);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;z-index:-1}.overflow{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media (max-width: 768px){:host{font-size:calc(clamp(0px,3.2dvw,12px)*.8)}}\n"], dependencies: [{ kind: "component", type: i2.FormFieldComponent, selector: "lib-form-field", inputs: ["fieldName", "label", "placeholder", "message", "useTooltips", "descriptionText", "formFieldControl", "submitted", "required", "type", "plusIconUrl", "minusIconUrl", "maxLength", "max", "min", "pinValue", "dualKnobs", "reverseBarColor", "defaultValue", "noMargin", "options", "iconHtml", "invalidPatternMessage", "dateFormat", "currencySymbol", "hideCents", "isEditable", "rowEditConfirmationObsv", "errorInlineMode", "showLabelInRequiredErrorMessage", "decimalPosition", "hyperlinkTarget", "readOnly", "focus", "showRequiredIndicator", "maxDate", "minDate", "radioTranslateLabels", "radioDeselectable", "radioRippleEffect"], outputs: ["rowEdit", "focusOut", "valueChange"] }, { kind: "component", type: i2.PrimaryBtnComponent, selector: "lib-primary-btn", inputs: ["hoverOutline", "disabled", "type", "form", "label", "showArrowIcon", "disableTextShadow", "loading$"] }, { kind: "component", type: i2.InputDateFieldComponent, selector: "lib-input-date-field", inputs: ["label", "defaultDate", "maxDate", "minDate", "showTime", "hieActions", "readonly", "defaultDayHighlight", "showIcon", "timeOnly", "view", "disabled", "dateFormat", "placeholder", "appendTo", "stepMinute", "mask", "styleClass", "timeFormat"], outputs: ["focusEvent"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.ToggleComponent, selector: "lib-toggle", inputs: ["disabled", "toggleState", "variant", "left", "right", "thumbImg", "multipleOptions"], outputs: ["toggleStateChange"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibMessageModalComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2.PopupModalService }, { token: ChatService$1 }, { token: MODAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LibMessageModalComponent, isStandalone: false, selector: "lib-message-modal", viewQueries: [{ propertyName: "toggleTemplate", first: true, predicate: ["toggleTemplate"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"message-modal\">\r\n  <header class=\"message-modal__header\">\r\n    <div class=\"message-modal__info\">\r\n      <div class=\"message-modal__title\">Send Message</div>\r\n    </div>\r\n  </header>\r\n  <form class=\"message-modal__radio-btn\" [formGroup]=\"formTime\">\r\n    <lib-form-field [formFieldControl]=\"messageType\" [radioTranslateLabels]=\"true\" [options]=\"options\" [type]=\"type\"></lib-form-field>\r\n    @if (messageType?.value === 'specify_time') {\r\n      <lib-input-date-field [formControlName]=\"'time'\" label=\"\" [timeOnly]=\"true\" [showIcon]=\"true\"></lib-input-date-field>\r\n    }\r\n  </form>\r\n  <div>\r\n    <lib-primary-btn (click)=\"onSubmit()\" [disabled]=\"formTime.valid\">Send</lib-primary-btn>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #toggleTemplate>\r\n  <div class=\"long-press-toggle\">\r\n    <lib-toggle [formControl]=\"toggleLongPress\"></lib-toggle>\r\n    <div class=\"long-press-toggle__text\">{{ 'MESSAGE_MODAL.LONG_PRESS' | translate }}</div>\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{font-size:clamp(0px,3.2dvw,12px)}:host *{box-sizing:border-box}:host lib-toggle{font-size:.6em}.long-press-toggle{margin:10px;display:flex}.long-press-toggle__text{margin-left:.8em;font-size:1.1em;font-family:Gilroy}.message-modal{-webkit-backdrop-filter:blur(.625em);backdrop-filter:blur(.625em);background:linear-gradient(transparent,#b0b0b01f 15%);margin:auto;color:#fff;padding:1.5em 2.5em;width:27em;border-radius:3.6625em;font-family:Gilroy;display:flex;flex-direction:column;gap:17px}.message-modal__header{display:flex;justify-content:center;align-items:flex-start}.message-modal__title{font-size:1.875em;font-weight:300;font-family:Calistoga;color:#fff5f5}.message-modal__radio-btn{display:flex;flex-direction:column}.message-modal:before{content:\"\";position:absolute;inset:0;border-radius:3.6625em;padding:.125em;background:linear-gradient(to top,transparent,transparent,#ccabc4);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;z-index:-1}.overflow{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media (max-width: 768px){:host{font-size:calc(clamp(0px,3.2dvw,12px)*.8)}}\n"], dependencies: [{ kind: "component", type: i2.FormFieldComponent, selector: "lib-form-field", inputs: ["fieldName", "label", "placeholder", "message", "useTooltips", "descriptionText", "formFieldControl", "submitted", "required", "type", "plusIconUrl", "minusIconUrl", "maxLength", "max", "min", "pinValue", "dualKnobs", "reverseBarColor", "defaultValue", "noMargin", "options", "iconHtml", "invalidPatternMessage", "dateFormat", "currencySymbol", "hideCents", "isEditable", "rowEditConfirmationObsv", "errorInlineMode", "showLabelInRequiredErrorMessage", "decimalPosition", "hyperlinkTarget", "readOnly", "focus", "showRequiredIndicator", "maxDate", "minDate", "radioTranslateLabels", "radioDeselectable", "radioRippleEffect"], outputs: ["rowEdit", "focusOut", "valueChange"] }, { kind: "component", type: i2.PrimaryBtnComponent, selector: "lib-primary-btn", inputs: ["hoverOutline", "disabled", "type", "form", "label", "showArrowIcon", "disableTextShadow", "loading$"] }, { kind: "component", type: i2.InputDateFieldComponent, selector: "lib-input-date-field", inputs: ["label", "defaultDate", "maxDate", "minDate", "showTime", "hieActions", "readonly", "defaultDayHighlight", "showIcon", "timeOnly", "view", "disabled", "dateFormat", "placeholder", "appendTo", "stepMinute", "mask", "styleClass", "timeFormat"], outputs: ["focusEvent"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.ToggleComponent, selector: "lib-toggle", inputs: ["disabled", "toggleState", "variant", "left", "right", "thumbImg", "multipleOptions"], outputs: ["toggleStateChange"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibMessageModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-message-modal', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"message-modal\">\r\n  <header class=\"message-modal__header\">\r\n    <div class=\"message-modal__info\">\r\n      <div class=\"message-modal__title\">Send Message</div>\r\n    </div>\r\n  </header>\r\n  <form class=\"message-modal__radio-btn\" [formGroup]=\"formTime\">\r\n    <lib-form-field [formFieldControl]=\"messageType\" [radioTranslateLabels]=\"true\" [options]=\"options\" [type]=\"type\"></lib-form-field>\r\n    @if (messageType?.value === 'specify_time') {\r\n      <lib-input-date-field [formControlName]=\"'time'\" label=\"\" [timeOnly]=\"true\" [showIcon]=\"true\"></lib-input-date-field>\r\n    }\r\n  </form>\r\n  <div>\r\n    <lib-primary-btn (click)=\"onSubmit()\" [disabled]=\"formTime.valid\">Send</lib-primary-btn>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #toggleTemplate>\r\n  <div class=\"long-press-toggle\">\r\n    <lib-toggle [formControl]=\"toggleLongPress\"></lib-toggle>\r\n    <div class=\"long-press-toggle__text\">{{ 'MESSAGE_MODAL.LONG_PRESS' | translate }}</div>\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{font-size:clamp(0px,3.2dvw,12px)}:host *{box-sizing:border-box}:host lib-toggle{font-size:.6em}.long-press-toggle{margin:10px;display:flex}.long-press-toggle__text{margin-left:.8em;font-size:1.1em;font-family:Gilroy}.message-modal{-webkit-backdrop-filter:blur(.625em);backdrop-filter:blur(.625em);background:linear-gradient(transparent,#b0b0b01f 15%);margin:auto;color:#fff;padding:1.5em 2.5em;width:27em;border-radius:3.6625em;font-family:Gilroy;display:flex;flex-direction:column;gap:17px}.message-modal__header{display:flex;justify-content:center;align-items:flex-start}.message-modal__title{font-size:1.875em;font-weight:300;font-family:Calistoga;color:#fff5f5}.message-modal__radio-btn{display:flex;flex-direction:column}.message-modal:before{content:\"\";position:absolute;inset:0;border-radius:3.6625em;padding:.125em;background:linear-gradient(to top,transparent,transparent,#ccabc4);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;z-index:-1}.overflow{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media (max-width: 768px){:host{font-size:calc(clamp(0px,3.2dvw,12px)*.8)}}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: i2.PopupModalService }, { type: ChatService }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i2.PopupModalService }, { type: ChatService$1 }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -1866,19 +1735,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 args: ['toggleTemplate', { static: true }]
             }] } });
 
-var SenderTypes;
-(function (SenderTypes) {
-    SenderTypes["USER"] = "user";
-    SenderTypes["OTHER"] = "other";
-})(SenderTypes || (SenderTypes = {}));
-
-var SendMessageType;
-(function (SendMessageType) {
-    SendMessageType["INMEDIATELY"] = "send_immediately";
-    SendMessageType["AFTER"] = "send_after";
-    SendMessageType["SPECIFIC"] = "specify_time";
-})(SendMessageType || (SendMessageType = {}));
-
 class GifSelectorService {
     constructor() {
         this.http = inject(HttpClient);
@@ -1975,7 +1831,7 @@ class GifSelectorComponent {
         this.selectGif.emit(url);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: GifSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: GifSelectorComponent, isStandalone: true, selector: "lib-gif-selector", outputs: { selectGif: "selectGif" }, ngImport: i0, template: "<form [formGroup]=\"form\" autocomplete=\"off\" libFocusInvalidInput *ngIf=\"form\">\n  <input type=\"text\" formControlName=\"gifTerm\" />\n  <div\n    infiniteScroll\n    [infiniteScrollDistance]=\"distance\"\n    [infiniteScrollThrottle]=\"throttle\"\n    [scrollWindow]=\"false\"\n    (scrolled)=\"onScrollGifs()\"\n    class=\"gifs-container\"\n    style=\"display: flex; gap: 1px; flex-wrap: wrap\"\n  >\n    <img [src]=\"gif.media_formats.nanogif.url\" class=\"gif\" *ngFor=\"let gif of gifs\" (click)=\"onGifClick(gif.media_formats.nanogif.url)\" />\n  </div>\n</form>\n", styles: [":host{width:100%;height:100%;font-size:clamp(0px,3.2dvw,15px)}:host form{border-radius:1em 1em 0 0;background-color:#000;width:100%;height:100%}:host form input[type=text]{height:2em;margin:0;font-size:.8em}:host form .gifs-container{height:calc(100% - 3em);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:center}:host form .gifs-container .gif{flex:2 1 auto;width:auto;max-width:33%;max-height:13em;height:fit-content;object-fit:contain;object-position:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: InfiniteScrollModule }, { kind: "directive", type: i2$3.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: GifSelectorComponent, isStandalone: true, selector: "lib-gif-selector", outputs: { selectGif: "selectGif" }, ngImport: i0, template: "<form [formGroup]=\"form\" autocomplete=\"off\" libFocusInvalidInput *ngIf=\"form\">\n  <input type=\"text\" formControlName=\"gifTerm\" />\n  <div\n    infiniteScroll\n    [infiniteScrollDistance]=\"distance\"\n    [infiniteScrollThrottle]=\"throttle\"\n    [scrollWindow]=\"false\"\n    (scrolled)=\"onScrollGifs()\"\n    class=\"gifs-container\"\n    style=\"display: flex; gap: 1px; flex-wrap: wrap\"\n  >\n    <img [src]=\"gif.media_formats.nanogif.url\" class=\"gif\" *ngFor=\"let gif of gifs\" (click)=\"onGifClick(gif.media_formats.nanogif.url)\" />\n  </div>\n</form>\n", styles: [":host{width:100%;height:100%;font-size:clamp(0px,3.2dvw,15px)}:host form{border-radius:1em 1em 0 0;background-color:#000;width:100%;height:100%}:host form input[type=text]{height:2em;margin:0;font-size:.8em}:host form .gifs-container{height:calc(100% - 3em);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:center}:host form .gifs-container .gif{flex:2 1 auto;width:auto;max-width:33%;max-height:13em;height:fit-content;object-fit:contain;object-position:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: InfiniteScrollModule }, { kind: "directive", type: i2$3.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: GifSelectorComponent, decorators: [{
             type: Component,
@@ -2003,7 +1859,7 @@ class ChatComponent {
         this.cdr = inject(ChangeDetectorRef);
         this.elementRef = inject(ElementRef);
         this.popupModalService = inject(PopupModalService);
-        this.chatService = inject(ChatService);
+        this.chatService = inject(ChatService$1);
         this.renderer = inject(Renderer2);
         this.scrollThreshold = 200;
         this.messages = [];
@@ -2230,7 +2086,7 @@ class ChatComponent {
                 useExisting: ChatComponent,
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "emojiPickerRef", first: true, predicate: ["emojiPicker"], descendants: true }, { propertyName: "scrollableContainer", first: true, predicate: ["scrollableContainer"], descendants: true }, { propertyName: "chatInput", first: true, predicate: ["chatInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"chat-component\">\n  <div class=\"chat-container\">\n    <div class=\"go-button\" *ngIf=\"isAtStartChat\" (click)=\"scrollToBottom()\">\u2193</div>\n    <div\n      class=\"dateMessages\"\n      #scrollableContainer\n      infiniteScroll\n      [infiniteScrollDistance]=\"distance\"\n      [infiniteScrollThrottle]=\"throttle\"\n      [scrollWindow]=\"false\"\n      (scrolledUp)=\"onScrollChats()\"\n      (scroll)=\"onScrollMessages($event)\"\n    >\n      <div class=\"chat-item-container chat-item-container_init\">\n        <div class=\"date-message\">\n          <span>{{ prospectJoinDate ? (prospectJoinDate | date: 'MMM d, HH:mm') : '-' }}</span>\n        </div>\n        <div class=\"chat-item init-chat\">\n          <div class=\"chat-item_text\">{{ 'CHAT.INITIAL_TEXT' | translate }}</div>\n        </div>\n      </div>\n      <div\n        *ngFor=\"let dateMessage of messages\"\n        class=\"chat-item-container\"\n        [class.chat-item-container_user]=\"dateMessage.message.sender === 'user'\"\n        [class.chat-item-container_other]=\"dateMessage.message.sender === 'other'\"\n      >\n        <div class=\"date-message\" *ngIf=\"dateMessage.isFirstMessage && includeTime\">\n          <span>{{ dateMessage.date | date: 'MMM d' }}</span>\n        </div>\n        <div class=\"chat-item\" [class.user-chat]=\"dateMessage.message.sender === 'user'\" [class.other-chat]=\"dateMessage.message.sender === 'other'\">\n          @if (dateMessage.message.message !== '') {\n            <div class=\"chat-item_text\">{{ dateMessage.message.message }}</div>\n          } @else if (dateMessage.message.attachments[0].url !== '') {\n            <img class=\"chat-item_image\" [src]=\"dateMessage.message.attachments[0].url\" alt=\"\" />\n          }\n          <div class=\"chat-item_timestamp\" *ngIf=\"includeTime\">\n            {{ dateMessage.message.timestamp | date: 'shortTime' }}\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"bottom-gradient-fade\"></div>\n  </div>\n  <form autocomplete=\"off\" libFocusInvalidInput *ngIf=\"textControl\" class=\"message-sender\">\n    <lib-input-field\n      #chatInput\n      [formControl]=\"textControl\"\n      [value]=\"newTextMessage\"\n      [label]=\"\"\n      [textarea]=\"true\"\n      placeholder=\"Send Message to Client Prospect\"\n      (keyDown)=\"onKeyDown($event)\"\n      [maxLength]=\"maxLength\"\n    >\n    </lib-input-field>\n    <div class=\"chat-buttons\">\n      <div class=\"send\" libLongPress [longPressEnabled]=\"longPressEnabled\" (shortPress)=\"onSendText()\" (longPress)=\"onLongPress()\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 23 22\" fill=\"none\">\n          <g filter=\"url(#filter0_d_748_3387)\">\n            <path\n              d=\"M14.6311 17.0545L18.3229 5.85996C18.692 4.77867 17.646 3.69738 16.6001 4.07901L5.77092 7.89533C4.54033 8.34056 4.54033 10.1215 5.83244 10.5032L9.46266 11.5208C10.2625 11.7753 10.9394 12.4113 11.1239 13.2381L12.1084 16.9908C12.4776 18.3266 14.2004 18.3266 14.6311 17.0545Z\"\n              fill=\"url(#paint0_linear_748_3387)\"\n            />\n          </g>\n          <defs>\n            <filter id=\"filter0_d_748_3387\" x=\"0.85553\" y=\"0.000732422\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n              <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n              <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\n              <feOffset />\n              <feGaussianBlur stdDeviation=\"2\" />\n              <feComposite in2=\"hardAlpha\" operator=\"out\" />\n              <feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 0.0961538 0 0 0 0 0.593269 0 0 0 1 0\" />\n              <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_748_3387\" />\n              <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_748_3387\" result=\"shape\" />\n            </filter>\n            <linearGradient id=\"paint0_linear_748_3387\" x1=\"18.5134\" y1=\"2.81097\" x2=\"0.162773\" y2=\"35.3556\" gradientUnits=\"userSpaceOnUse\">\n              <stop stop-color=\"#FE3C72\" />\n              <stop offset=\"0.384615\" stop-color=\"#FFB5E9\" />\n            </linearGradient>\n          </defs>\n        </svg>\n      </div>\n      <lib-popup customClass=\"message-modal-container\" [isOpen]=\"toggleMessageModal\" [modalComponent]=\"ModalComponent\" [modalComponentData]=\"{ modal: {} }\"> </lib-popup>\n      <div\n        [ngClass]=\"{ 'emoji-picker-trigger': true, active: emojiVisibility }\"\n        [name]=\"emojiPickerConfig?.pickerIcon ? '' : 'body-outline'\"\n        (click)=\"handleEmojiPickerClick()\"\n        [src]=\"emojiPickerConfig?.pickerIcon\"\n        class=\"emoji\"\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" fill=\"none\" overflow=\"auto\">\n          <g>\n            <mask id=\"path-1-outside-1_422_3414\" maskUnits=\"userSpaceOnUse\" x=\"-0.72551\" y=\"-0.713776\" fill=\"url(#paint0_linear_748_3387)\">\n              <path\n                d=\"M5.13057 0.286224C7.81253 0.286224 9.98665 2.53373 9.98665 5.30623C9.98665 8.07823 7.81205 10.3252 5.13057 10.3252C2.44861 10.3257 0.27449 8.07823 0.27449 5.30623C0.27449 2.53373 2.44861 0.286224 5.13057 0.286224ZM5.13057 1.03908C4.58476 1.03296 4.0432 1.1388 3.53723 1.35049C3.03126 1.56218 2.57092 1.8755 2.18287 2.27233C1.79482 2.66915 1.48675 3.1416 1.2765 3.66233C1.06625 4.18305 0.95799 4.74172 0.95799 5.30598C0.95799 5.87025 1.06625 6.42891 1.2765 6.94964C1.48675 7.47036 1.79482 7.94281 2.18287 8.33964C2.57092 8.73646 3.03126 9.04979 3.53723 9.26147C4.0432 9.47316 4.58476 9.57901 5.13057 9.57289C6.21752 9.5607 7.25594 9.10579 8.02039 8.30691C8.78485 7.50804 9.21362 6.42969 9.21362 5.30598C9.21362 4.18228 8.78485 3.10393 8.02039 2.30505C7.25594 1.50618 6.21752 1.05126 5.13057 1.03908ZM3.41283 6.70302C3.61718 6.97193 3.87803 7.18925 4.17563 7.33855C4.47323 7.48785 4.79978 7.56522 5.13057 7.56479C5.461 7.5652 5.78721 7.48798 6.08453 7.33895C6.38186 7.18992 6.64253 6.97298 6.84685 6.70453C6.8765 6.66574 6.91325 6.63337 6.955 6.60926C6.99675 6.58515 7.04268 6.56978 7.09018 6.56403C7.13767 6.55827 7.1858 6.56224 7.23181 6.57571C7.27782 6.58919 7.32082 6.6119 7.35834 6.64254C7.39586 6.67319 7.42717 6.71118 7.45049 6.75434C7.47381 6.7975 7.48868 6.84498 7.49425 6.89408C7.49982 6.94318 7.49598 6.99293 7.48294 7.0405C7.46991 7.08806 7.44795 7.13251 7.4183 7.1713C7.14582 7.52897 6.79833 7.818 6.40202 8.01658C6.00572 8.21516 5.57097 8.3181 5.13057 8.31764C4.68953 8.31808 4.25416 8.21484 3.8574 8.01572C3.46064 7.8166 3.11287 7.52681 2.84042 7.16828C2.81083 7.12943 2.78894 7.08493 2.77599 7.03733C2.76304 6.98973 2.75929 6.93996 2.76495 6.89086C2.77061 6.84176 2.78556 6.7943 2.80897 6.75117C2.83237 6.70805 2.86376 6.67011 2.90135 6.63953C2.93893 6.60895 2.98198 6.58632 3.02802 6.57293C3.07407 6.55955 3.12221 6.55567 3.16971 6.56152C3.21721 6.56737 3.26312 6.58283 3.30484 6.60702C3.34655 6.63122 3.38325 6.66367 3.41283 6.70252V6.70302ZM3.67404 3.67506C3.75515 3.67268 3.83589 3.68715 3.9115 3.7176C3.98711 3.74805 4.05604 3.79386 4.11422 3.85233C4.17241 3.9108 4.21866 3.98073 4.25024 4.058C4.28182 4.13527 4.29809 4.2183 4.29809 4.30218C4.29809 4.38606 4.28182 4.46909 4.25024 4.54636C4.21866 4.62363 4.17241 4.69356 4.11422 4.75203C4.05604 4.8105 3.98711 4.85631 3.9115 4.88676C3.83589 4.91721 3.75515 4.93168 3.67404 4.92931C3.51612 4.92469 3.36616 4.85659 3.25604 4.73948C3.14592 4.62238 3.08431 4.4655 3.08431 4.30218C3.08431 4.13886 3.14592 3.98198 3.25604 3.86488C3.36616 3.74777 3.51612 3.67968 3.67404 3.67506ZM6.5871 3.67506C6.66821 3.67268 6.74896 3.68715 6.82457 3.7176C6.90018 3.74805 6.96911 3.79386 7.02729 3.85233C7.08547 3.9108 7.13172 3.98073 7.1633 4.058C7.19488 4.13527 7.21116 4.2183 7.21116 4.30218C7.21116 4.38606 7.19488 4.46909 7.1633 4.54636C7.13172 4.62363 7.08547 4.69356 7.02729 4.75203C6.96911 4.8105 6.90018 4.85631 6.82457 4.88676C6.74896 4.91721 6.66821 4.93168 6.5871 4.92931C6.42918 4.92469 6.27923 4.85659 6.16911 4.73948C6.05898 4.62238 5.99738 4.4655 5.99738 4.30218C5.99738 4.13886 6.05898 3.98198 6.16911 3.86488C6.27923 3.74777 6.42918 3.67968 6.5871 3.67506Z\"\n              />\n            </mask>\n            <path\n              _ngcontent-ng-c433636891=\"\"\n              d=\"M5.13057 0.286224C7.81253 0.286224 9.98665 2.53373 9.98665 5.30623C9.98665 8.07823 7.81205 10.3252 5.13057 10.3252C2.44861 10.3257 0.27449 8.07823 0.27449 5.30623C0.27449 2.53373 2.44861 0.286224 5.13057 0.286224ZM5.13057 1.03908C4.58476 1.03296 4.0432 1.1388 3.53723 1.35049C3.03126 1.56218 2.57092 1.8755 2.18287 2.27233C1.79482 2.66915 1.48675 3.1416 1.2765 3.66233C1.06625 4.18305 0.95799 4.74172 0.95799 5.30598C0.95799 5.87025 1.06625 6.42891 1.2765 6.94964C1.48675 7.47036 1.79482 7.94281 2.18287 8.33964C2.57092 8.73646 3.03126 9.04979 3.53723 9.26147C4.0432 9.47316 4.58476 9.57901 5.13057 9.57289C6.21752 9.5607 7.25594 9.10579 8.02039 8.30691C8.78485 7.50804 9.21362 6.42969 9.21362 5.30598C9.21362 4.18228 8.78485 3.10393 8.02039 2.30505C7.25594 1.50618 6.21752 1.05126 5.13057 1.03908ZM3.41283 6.70302C3.61718 6.97193 3.87803 7.18925 4.17563 7.33855C4.47323 7.48785 4.79978 7.56522 5.13057 7.56479C5.461 7.5652 5.78721 7.48798 6.08453 7.33895C6.38186 7.18992 6.64253 6.97298 6.84685 6.70453C6.8765 6.66574 6.91325 6.63337 6.955 6.60926C6.99675 6.58515 7.04268 6.56978 7.09018 6.56403C7.13767 6.55827 7.1858 6.56224 7.23181 6.57571C7.27782 6.58919 7.32082 6.6119 7.35834 6.64254C7.39586 6.67319 7.42717 6.71118 7.45049 6.75434C7.47381 6.7975 7.48868 6.84498 7.49425 6.89408C7.49982 6.94318 7.49598 6.99293 7.48294 7.0405C7.46991 7.08806 7.44795 7.13251 7.4183 7.1713C7.14582 7.52897 6.79833 7.818 6.40202 8.01658C6.00572 8.21516 5.57097 8.3181 5.13057 8.31764C4.68953 8.31808 4.25416 8.21484 3.8574 8.01572C3.46064 7.8166 3.11287 7.52681 2.84042 7.16828C2.81083 7.12943 2.78894 7.08493 2.77599 7.03733C2.76304 6.98973 2.75929 6.93996 2.76495 6.89086C2.77061 6.84176 2.78556 6.7943 2.80897 6.75117C2.83237 6.70805 2.86376 6.67011 2.90135 6.63953C2.93893 6.60895 2.98198 6.58632 3.02802 6.57293C3.07407 6.55955 3.12221 6.55567 3.16971 6.56152C3.21721 6.56737 3.26312 6.58283 3.30484 6.60702C3.34655 6.63122 3.38325 6.66367 3.41283 6.70252V6.70302ZM3.67404 3.67506C3.75515 3.67268 3.83589 3.68715 3.9115 3.7176C3.98711 3.74805 4.05604 3.79386 4.11422 3.85233C4.17241 3.9108 4.21866 3.98073 4.25024 4.058C4.28182 4.13527 4.29809 4.2183 4.29809 4.30218C4.29809 4.38606 4.28182 4.46909 4.25024 4.54636C4.21866 4.62363 4.17241 4.69356 4.11422 4.75203C4.05604 4.8105 3.98711 4.85631 3.9115 4.88676C3.83589 4.91721 3.75515 4.93168 3.67404 4.92931C3.51612 4.92469 3.36616 4.85659 3.25604 4.73948C3.14592 4.62238 3.08431 4.4655 3.08431 4.30218C3.08431 4.13886 3.14592 3.98198 3.25604 3.86488C3.36616 3.74777 3.51612 3.67968 3.67404 3.67506ZM6.5871 3.67506C6.66821 3.67268 6.74896 3.68715 6.82457 3.7176C6.90018 3.74805 6.96911 3.79386 7.02729 3.85233C7.08547 3.9108 7.13172 3.98073 7.1633 4.058C7.19488 4.13527 7.21116 4.2183 7.21116 4.30218C7.21116 4.38606 7.19488 4.46909 7.1633 4.54636C7.13172 4.62363 7.08547 4.69356 7.02729 4.75203C6.96911 4.8105 6.90018 4.85631 6.82457 4.88676C6.74896 4.91721 6.66821 4.93168 6.5871 4.92931C6.42918 4.92469 6.27923 4.85659 6.16911 4.73948C6.05898 4.62238 5.99738 4.4655 5.99738 4.30218C5.99738 4.13886 6.05898 3.98198 6.16911 3.86488C6.27923 3.74777 6.42918 3.67968 6.5871 3.67506Z\"\n              fill=\"url(#paint0_linear_748_3387)\"\n            ></path>\n            <path\n              _ngcontent-ng-c433636891=\"\"\n              d=\"M5.13057 0.286224C7.81253 0.286224 9.98665 2.53373 9.98665 5.30623C9.98665 8.07823 7.81205 10.3252 5.13057 10.3252C2.44861 10.3257 0.27449 8.07823 0.27449 5.30623C0.27449 2.53373 2.44861 0.286224 5.13057 0.286224ZM5.13057 1.03908C4.58476 1.03296 4.0432 1.1388 3.53723 1.35049C3.03126 1.56218 2.57092 1.8755 2.18287 2.27233C1.79482 2.66915 1.48675 3.1416 1.2765 3.66233C1.06625 4.18305 0.95799 4.74172 0.95799 5.30598C0.95799 5.87025 1.06625 6.42891 1.2765 6.94964C1.48675 7.47036 1.79482 7.94281 2.18287 8.33964C2.57092 8.73646 3.03126 9.04979 3.53723 9.26147C4.0432 9.47316 4.58476 9.57901 5.13057 9.57289C6.21752 9.5607 7.25594 9.10579 8.02039 8.30691C8.78485 7.50804 9.21362 6.42969 9.21362 5.30598C9.21362 4.18228 8.78485 3.10393 8.02039 2.30505C7.25594 1.50618 6.21752 1.05126 5.13057 1.03908ZM3.41283 6.70302C3.61718 6.97193 3.87803 7.18925 4.17563 7.33855C4.47323 7.48785 4.79978 7.56522 5.13057 7.56479C5.461 7.5652 5.78721 7.48798 6.08453 7.33895C6.38186 7.18992 6.64253 6.97298 6.84685 6.70453C6.8765 6.66574 6.91325 6.63337 6.955 6.60926C6.99675 6.58515 7.04268 6.56978 7.09018 6.56403C7.13767 6.55827 7.1858 6.56224 7.23181 6.57571C7.27782 6.58919 7.32082 6.6119 7.35834 6.64254C7.39586 6.67319 7.42717 6.71118 7.45049 6.75434C7.47381 6.7975 7.48868 6.84498 7.49425 6.89408C7.49982 6.94318 7.49598 6.99293 7.48294 7.0405C7.46991 7.08806 7.44795 7.13251 7.4183 7.1713C7.14582 7.52897 6.79833 7.818 6.40202 8.01658C6.00572 8.21516 5.57097 8.3181 5.13057 8.31764C4.68953 8.31808 4.25416 8.21484 3.8574 8.01572C3.46064 7.8166 3.11287 7.52681 2.84042 7.16828C2.81083 7.12943 2.78894 7.08493 2.77599 7.03733C2.76304 6.98973 2.75929 6.93996 2.76495 6.89086C2.77061 6.84176 2.78556 6.7943 2.80897 6.75117C2.83237 6.70805 2.86376 6.67011 2.90135 6.63953C2.93893 6.60895 2.98198 6.58632 3.02802 6.57293C3.07407 6.55955 3.12221 6.55567 3.16971 6.56152C3.21721 6.56737 3.26312 6.58283 3.30484 6.60702C3.34655 6.63122 3.38325 6.66367 3.41283 6.70252V6.70302ZM3.67404 3.67506C3.75515 3.67268 3.83589 3.68715 3.9115 3.7176C3.98711 3.74805 4.05604 3.79386 4.11422 3.85233C4.17241 3.9108 4.21866 3.98073 4.25024 4.058C4.28182 4.13527 4.29809 4.2183 4.29809 4.30218C4.29809 4.38606 4.28182 4.46909 4.25024 4.54636C4.21866 4.62363 4.17241 4.69356 4.11422 4.75203C4.05604 4.8105 3.98711 4.85631 3.9115 4.88676C3.83589 4.91721 3.75515 4.93168 3.67404 4.92931C3.51612 4.92469 3.36616 4.85659 3.25604 4.73948C3.14592 4.62238 3.08431 4.4655 3.08431 4.30218C3.08431 4.13886 3.14592 3.98198 3.25604 3.86488C3.36616 3.74777 3.51612 3.67968 3.67404 3.67506ZM6.5871 3.67506C6.66821 3.67268 6.74896 3.68715 6.82457 3.7176C6.90018 3.74805 6.96911 3.79386 7.02729 3.85233C7.08547 3.9108 7.13172 3.98073 7.1633 4.058C7.19488 4.13527 7.21116 4.2183 7.21116 4.30218C7.21116 4.38606 7.19488 4.46909 7.1633 4.54636C7.13172 4.62363 7.08547 4.69356 7.02729 4.75203C6.96911 4.8105 6.90018 4.85631 6.82457 4.88676C6.74896 4.91721 6.66821 4.93168 6.5871 4.92931C6.42918 4.92469 6.27923 4.85659 6.16911 4.73948C6.05898 4.62238 5.99738 4.4655 5.99738 4.30218C5.99738 4.13886 6.05898 3.98198 6.16911 3.86488C6.27923 3.74777 6.42918 3.67968 6.5871 3.67506Z\"\n              stroke=\"url(#paint0_linear_748_3387)\"\n              fill=\"url(#paint0_linear_748_3387)\"\n              stroke-width=\"0.492535\"\n              mask=\"url(#path-1-outside-1_422_3414)\"\n            ></path>\n          </g>\n          <defs xmlns=\"http://www.w3.org/2000/svg\">\n            <filter id=\"filter0_d_748_7685\" x=\"0\" y=\"0\" width=\"30\" height=\"30\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n              <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n              <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\n              <feOffset />\n              <feGaussianBlur stdDeviation=\"2\" />\n              <feComposite in2=\"hardAlpha\" operator=\"out\" />\n              <feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 0.0961538 0 0 0 0 0.593269 0 0 0 1 0\" />\n              <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_748_7685\" />\n              <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_748_7685\" result=\"shape\" />\n            </filter>\n            <linearGradient id=\"paint0_linear_748_7685\" x1=\"14.1509\" y1=\"3.43372\" x2=\"0.992799\" y2=\"26.7715\" gradientUnits=\"userSpaceOnUse\">\n              <stop stop-color=\"#FE3C72\" />\n              <stop offset=\"0.384615\" stop-color=\"#FFB5E9\" />\n            </linearGradient>\n            <linearGradient id=\"paint0_linear_748_3387\" x1=\"18.5134\" y1=\"2.81097\" x2=\"0.162773\" y2=\"35.3556\" gradientUnits=\"userSpaceOnUse\">\n              <stop stop-color=\"#FE3C72\" />\n              <stop offset=\"0.384615\" stop-color=\"#FFB5E9\" />\n            </linearGradient>\n          </defs>\n        </svg>\n      </div>\n      @if (enableGifPicker) {\n        <div class=\"gifs\" (click)=\"handleGifPickerClick()\"></div>\n        <div class=\"gifs\" *ngIf=\"includeGifMessage\" (click)=\"handleGifPickerClick()\">\n          <svg viewBox=\"0 0 11 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <g>\n              <path\n                d=\"M7.055 10.9995H4.899C3.2535 10.9995 2.4305 10.9995 1.859 10.6005C1.69694 10.4873 1.55167 10.3518 1.4275 10.198C1 9.66501 1 8.89801 1 7.36301V6.09051C1 4.60901 1 3.86801 1.2365 3.27651C1.617 2.32501 2.4215 1.57501 3.4415 1.22001C4.075 0.999512 4.87 0.999512 6.4585 0.999512C7.3665 0.999512 7.82 0.999512 8.1825 1.12551C8.7655 1.32851 9.225 1.75701 9.4425 2.30051C9.5775 2.63851 9.5775 3.06201 9.5775 3.90851V4.99951\"\n                stroke=\"url(#paint0_linear_748_3387)\"\n                stroke-width=\"0.75\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n              <path\n                d=\"M1 5.99951C1 5.07951 1.753 4.33301 2.682 4.33301C3.018 4.33301 3.414 4.39101 3.7405 4.30451C3.88281 4.26736 4.01278 4.19328 4.11726 4.08976C4.22174 3.98624 4.29703 3.85697 4.3355 3.71501C4.4225 3.39151 4.364 2.99901 4.364 2.66601C4.364 1.74601 5.117 0.999512 6.045 0.999512M6.046 8.99951H7.3075M4.833 6.92451C4.77 6.52451 4.6925 6.52401 4.028 6.49951H3.523C3.2445 6.49951 3.0185 6.72351 3.0185 6.99951V8.49951C3.0185 8.77551 3.2445 8.99951 3.5235 8.99951H4.4315C4.6265 8.99951 4.833 8.84301 4.833 8.64951V8.09951C4.833 8.04451 4.7765 7.94751 4.721 7.94751H4.159M6.046 6.49951H6.6765M6.6765 6.49951H7.3075M6.6765 6.49951V8.93701M10.2505 6.49951H8.989C8.7105 6.49951 8.4845 6.72351 8.4845 6.99951V7.74951M8.4845 7.74951V8.99951M8.4845 7.74951H9.746\"\n                stroke=\"url(#paint0_linear_748_3387)\"\n                stroke-width=\"0.75\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </g>\n            <defs xmlns=\"http://www.w3.org/2000/svg\">\n              <filter id=\"filter0_d_748_7685\" x=\"0\" y=\"0\" width=\"30\" height=\"30\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n                <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n                <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\n                <feOffset />\n                <feGaussianBlur stdDeviation=\"2\" />\n                <feComposite in2=\"hardAlpha\" operator=\"out\" />\n                <feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 0.0961538 0 0 0 0 0.593269 0 0 0 1 0\" />\n                <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_748_7685\" />\n                <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_748_7685\" result=\"shape\" />\n              </filter>\n              <linearGradient id=\"paint0_linear_748_7685\" x1=\"14.1509\" y1=\"3.43372\" x2=\"0.992799\" y2=\"26.7715\" gradientUnits=\"userSpaceOnUse\">\n                <stop stop-color=\"#FE3C72\" />\n                <stop offset=\"0.384615\" stop-color=\"#FFB5E9\" />\n              </linearGradient>\n              <linearGradient id=\"paint0_linear_748_3387\" x1=\"18.5134\" y1=\"2.81097\" x2=\"0.162773\" y2=\"35.3556\" gradientUnits=\"userSpaceOnUse\">\n                <stop stop-color=\"#FE3C72\" />\n                <stop offset=\"0.384615\" stop-color=\"#FFB5E9\" />\n              </linearGradient>\n            </defs>\n          </svg>\n        </div>\n      }\n    </div>\n    <div class=\"emoji-picker-space\" [ngStyle]=\"{ 'z-index': !(gifVisibility || emojiVisibility) ? -1 : 11 }\" (blur)=\"onBlurPickerSpace()\">\n      @if (gifVisibility && enableGifPicker) {\n        <lib-gif-selector (selectGif)=\"onGifClick($event)\"></lib-gif-selector>\n      }\n      @if (emojiPickerOpened) {\n        <emoji-picker #emojiPicker [ngStyle]=\"{ display: emojiVisibility ? '' : 'none' }\" emoji-version=\"15.0\" (emoji-click)=\"onEmojiclick($event)\"></emoji-picker>\n      }\n    </div>\n  </form>\n</div>\n", styles: [":host{--height-chat-conversation: 11em;--max-width-container: 27em;--color-background-dark: #1d1b21;--color-chat-other: #453945;--color-chat-user: #403b45;--color-chat-init: #fe3c72;--color-text-white: white;--color-text-gray: rgb(123, 123, 123);--color-background-emoji: #29252d;--color-gradient-start: #746b8381;--color-gradient-end: rgba(0, 0, 0, 0);font-size:clamp(0px,3.2dvw,15px);display:flex;flex-direction:column;width:100%;max-width:var(--max-width-container)}:host .chat-component{display:flex;flex-direction:column;position:relative}:host .chat-component .bottom-gradient-fade{position:absolute;bottom:0;left:0;width:100%;height:40px;background:linear-gradient(180deg,transparent,#27242c);z-index:1;pointer-events:none}:host .chat-component .chat-container{position:relative}:host .chat-component .chat-container .go-button{color:#fff;font-size:1em;position:absolute;bottom:.2em;right:.7em;background-color:var(--color-background-dark);border-radius:50%;width:2em;height:2em;display:flex;justify-content:center;align-items:center;z-index:10}:host .chat-component .chat-container .go-button:hover{cursor:pointer}:host .chat-component .chat-container .dateMessages{display:flex;flex-direction:column;gap:1em;padding-bottom:8px;padding-top:1.6em;height:var(--height-chat-conversation);width:var(--max-width-container);overflow-y:scroll}:host .chat-component .chat-container .dateMessages .chat-item-container{display:flex;flex-direction:column;gap:1em}:host .chat-component .chat-container .dateMessages .chat-item-container .date-message{width:100%;display:flex;justify-content:center;align-items:center;font-size:.861em}:host .chat-component .chat-container .dateMessages .chat-item-container .date-message span{background-color:#000;color:var(--color-text-white);border-radius:1em;padding:.5em}:host .chat-component .chat-container .dateMessages .chat-item-container_user{align-items:flex-end}:host .chat-component .chat-container .dateMessages .chat-item-container_other{align-items:flex-start}:host .chat-component .chat-container .dateMessages .chat-item-container_init{align-items:center}:host .chat-component .chat-container .dateMessages .chat-item{max-width:80%;min-height:3.5em;padding:1em;border-radius:1.076em;position:relative;box-shadow:0 4px 4px #00000040}:host .chat-component .chat-container .dateMessages .chat-item .chat-item_text{font-size:.861em;color:var(--color-text-white);word-break:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}:host .chat-component .chat-container .dateMessages .chat-item .chat-item_image{width:7em;height:auto}:host .chat-component .chat-container .dateMessages .chat-item .chat-item_timestamp{margin-top:.2em;font-size:.8em;color:var(--color-text-gray);text-align:end}:host .chat-component .chat-container .dateMessages .chat-item:before{content:\"\";position:absolute;inset:0;border-radius:1.076em;padding:.05em;background:linear-gradient(180deg,var(--color-gradient-start),var(--color-gradient-end) 50%);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}:host .chat-component .chat-container .dateMessages .other-chat{background-color:var(--color-chat-other);border-bottom-left-radius:0}:host .chat-component .chat-container .dateMessages .user-chat{background-color:var(--color-chat-user);border-bottom-right-radius:0}:host .chat-component .chat-container .dateMessages .init-chat{min-height:2em;padding:.7em;background-color:var(--color-chat-init)}:host .chat-component .chat-container .dateMessages .init-chat .chat-item_text{font-size:.761em;color:#000}:host .chat-component .chat-container .dateMessages .other-chat:before{border-bottom-left-radius:0!important}:host .chat-component .chat-container .dateMessages .user-chat:before{border-bottom-right-radius:0!important}:host .message-sender{position:relative}:host .message-sender lib-input-field{--input-font-size: calc(clamp(0px, 3.2dvw, 15px)*.8) ;--input-padding: calc(clamp(0px, 3.2dvw, 15px)*1.2) calc(clamp(0px, 3.2dvw, 15px)*3.5) calc(clamp(0px, 3.2dvw, 15px)*1.2) calc(clamp(0px, 3.2dvw, 15px)*1.6) ;--placeholder-font-size: calc(clamp(0px, 3.2dvw, 15px)*.8) ;--textarea-height: calc(clamp(0px, 3.2dvw, 15px)*7) }:host .message-sender .chat-buttons .send,:host .message-sender .chat-buttons .emoji,:host .message-sender .chat-buttons .attach,:host .message-sender .chat-buttons .gifs{position:absolute;right:.6em;width:1.7em;height:1.7em;border-radius:50%;z-index:10}:host .message-sender .chat-buttons .send:hover,:host .message-sender .chat-buttons .emoji:hover,:host .message-sender .chat-buttons .attach:hover,:host .message-sender .chat-buttons .gifs:hover{cursor:pointer}:host .message-sender .chat-buttons .send{top:.9em}:host .message-sender .chat-buttons .send svg{width:1.7em;height:1.9em}:host .message-sender .chat-buttons .emoji{top:3.1em}:host .message-sender .chat-buttons .emoji svg{overflow:visible;width:2.33em;height:1.848em}:host .message-sender .chat-buttons .emoji svg mask{width:.733em;height:1.466em}:host .message-sender .chat-buttons .attach{top:5em;background-color:#87ceeb}:host .message-sender .chat-buttons .gifs{top:5em}:host .message-sender .chat-buttons .gifs svg{width:1.166em;height:1.2984em;margin-left:.25em}:host .message-sender .emoji-picker-space{position:absolute;top:-12em;height:12em;width:100%}:host .message-sender .emoji-picker-space emoji-picker{--background: var(--color-background-emoji);height:100%;width:100%;--input-font-size: .8em;--input-font-color: var(--color-text-white)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.InputFieldComponent, selector: "lib-input-field,[lib-input-field]", inputs: ["name", "autocomplete", "label", "placeholder", "type", "readonly", "focus", "enableGoogleAddress", "locationAutocompleteConfig", "defaultLocation", "mask", "prefix", "suffix", "maxLength", "value", "address", "textarea", "resize", "counter", "patterns", "trimWhiteSpace", "disabled"], outputs: ["mapError", "locationChange", "keyDown", "onBlur"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: GifSelectorComponent, selector: "lib-gif-selector", outputs: ["selectGif"] }, { kind: "component", type: i2.LibModalComponent, selector: "lib-popup", inputs: ["isOpen", "icon", "title", "message", "extendedMessage", "cancelButton", "confirmButton", "checkboxText", "progBarCurrentStep", "progBarTotalSteps", "customClass", "backdropDismiss", "modalComponent", "modalComponentData"], outputs: ["modalConfirm", "modalDismiss", "afterCloseEvent"] }, { kind: "directive", type: i2$3.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "emojiPickerRef", first: true, predicate: ["emojiPicker"], descendants: true }, { propertyName: "scrollableContainer", first: true, predicate: ["scrollableContainer"], descendants: true }, { propertyName: "chatInput", first: true, predicate: ["chatInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"chat-component\">\n  <div class=\"chat-container\">\n    <div class=\"go-button\" *ngIf=\"isAtStartChat\" (click)=\"scrollToBottom()\">\u2193</div>\n    <div\n      class=\"dateMessages\"\n      #scrollableContainer\n      infiniteScroll\n      [infiniteScrollDistance]=\"distance\"\n      [infiniteScrollThrottle]=\"throttle\"\n      [scrollWindow]=\"false\"\n      (scrolledUp)=\"onScrollChats()\"\n      (scroll)=\"onScrollMessages($event)\"\n    >\n      <div class=\"chat-item-container chat-item-container_init\">\n        <div class=\"date-message\">\n          <span>{{ prospectJoinDate ? (prospectJoinDate | date: 'MMM d, HH:mm') : '-' }}</span>\n        </div>\n        <div class=\"chat-item init-chat\">\n          <div class=\"chat-item_text\">{{ 'CHAT.INITIAL_TEXT' | translate }}</div>\n        </div>\n      </div>\n      <div\n        *ngFor=\"let dateMessage of messages\"\n        class=\"chat-item-container\"\n        [class.chat-item-container_user]=\"dateMessage.message.sender === 'user'\"\n        [class.chat-item-container_other]=\"dateMessage.message.sender === 'other'\"\n      >\n        <div class=\"date-message\" *ngIf=\"dateMessage.isFirstMessage && includeTime\">\n          <span>{{ dateMessage.date | date: 'MMM d' }}</span>\n        </div>\n        <div class=\"chat-item\" [class.user-chat]=\"dateMessage.message.sender === 'user'\" [class.other-chat]=\"dateMessage.message.sender === 'other'\">\n          @if (dateMessage.message.message !== '') {\n            <div class=\"chat-item_text\">{{ dateMessage.message.message }}</div>\n          } @else if (dateMessage.message.attachments[0].url !== '') {\n            <img class=\"chat-item_image\" [src]=\"dateMessage.message.attachments[0].url\" alt=\"\" />\n          }\n          <div class=\"chat-item_timestamp\" *ngIf=\"includeTime\">\n            {{ dateMessage.message.timestamp | date: 'shortTime' }}\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"bottom-gradient-fade\"></div>\n  </div>\n  <form autocomplete=\"off\" libFocusInvalidInput *ngIf=\"textControl\" class=\"message-sender\">\n    <lib-input-field\n      #chatInput\n      [formControl]=\"textControl\"\n      [value]=\"newTextMessage\"\n      [label]=\"\"\n      [textarea]=\"true\"\n      placeholder=\"Send Message to Client Prospect\"\n      (keyDown)=\"onKeyDown($event)\"\n      [maxLength]=\"maxLength\"\n    >\n    </lib-input-field>\n    <div class=\"chat-buttons\">\n      <div class=\"send\" libLongPress [longPressEnabled]=\"longPressEnabled\" (shortPress)=\"onSendText()\" (longPress)=\"onLongPress()\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 23 22\" fill=\"none\">\n          <g filter=\"url(#filter0_d_748_3387)\">\n            <path\n              d=\"M14.6311 17.0545L18.3229 5.85996C18.692 4.77867 17.646 3.69738 16.6001 4.07901L5.77092 7.89533C4.54033 8.34056 4.54033 10.1215 5.83244 10.5032L9.46266 11.5208C10.2625 11.7753 10.9394 12.4113 11.1239 13.2381L12.1084 16.9908C12.4776 18.3266 14.2004 18.3266 14.6311 17.0545Z\"\n              fill=\"url(#paint0_linear_748_3387)\"\n            />\n          </g>\n          <defs>\n            <filter id=\"filter0_d_748_3387\" x=\"0.85553\" y=\"0.000732422\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n              <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n              <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\n              <feOffset />\n              <feGaussianBlur stdDeviation=\"2\" />\n              <feComposite in2=\"hardAlpha\" operator=\"out\" />\n              <feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 0.0961538 0 0 0 0 0.593269 0 0 0 1 0\" />\n              <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_748_3387\" />\n              <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_748_3387\" result=\"shape\" />\n            </filter>\n            <linearGradient id=\"paint0_linear_748_3387\" x1=\"18.5134\" y1=\"2.81097\" x2=\"0.162773\" y2=\"35.3556\" gradientUnits=\"userSpaceOnUse\">\n              <stop stop-color=\"#FE3C72\" />\n              <stop offset=\"0.384615\" stop-color=\"#FFB5E9\" />\n            </linearGradient>\n          </defs>\n        </svg>\n      </div>\n      <lib-popup customClass=\"message-modal-container\" [isOpen]=\"toggleMessageModal\" [modalComponent]=\"ModalComponent\" [modalComponentData]=\"{ modal: {} }\"> </lib-popup>\n      <div\n        [ngClass]=\"{ 'emoji-picker-trigger': true, active: emojiVisibility }\"\n        [name]=\"emojiPickerConfig?.pickerIcon ? '' : 'body-outline'\"\n        (click)=\"handleEmojiPickerClick()\"\n        [src]=\"emojiPickerConfig?.pickerIcon\"\n        class=\"emoji\"\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" fill=\"none\" overflow=\"auto\">\n          <g>\n            <mask id=\"path-1-outside-1_422_3414\" maskUnits=\"userSpaceOnUse\" x=\"-0.72551\" y=\"-0.713776\" fill=\"url(#paint0_linear_748_3387)\">\n              <path\n                d=\"M5.13057 0.286224C7.81253 0.286224 9.98665 2.53373 9.98665 5.30623C9.98665 8.07823 7.81205 10.3252 5.13057 10.3252C2.44861 10.3257 0.27449 8.07823 0.27449 5.30623C0.27449 2.53373 2.44861 0.286224 5.13057 0.286224ZM5.13057 1.03908C4.58476 1.03296 4.0432 1.1388 3.53723 1.35049C3.03126 1.56218 2.57092 1.8755 2.18287 2.27233C1.79482 2.66915 1.48675 3.1416 1.2765 3.66233C1.06625 4.18305 0.95799 4.74172 0.95799 5.30598C0.95799 5.87025 1.06625 6.42891 1.2765 6.94964C1.48675 7.47036 1.79482 7.94281 2.18287 8.33964C2.57092 8.73646 3.03126 9.04979 3.53723 9.26147C4.0432 9.47316 4.58476 9.57901 5.13057 9.57289C6.21752 9.5607 7.25594 9.10579 8.02039 8.30691C8.78485 7.50804 9.21362 6.42969 9.21362 5.30598C9.21362 4.18228 8.78485 3.10393 8.02039 2.30505C7.25594 1.50618 6.21752 1.05126 5.13057 1.03908ZM3.41283 6.70302C3.61718 6.97193 3.87803 7.18925 4.17563 7.33855C4.47323 7.48785 4.79978 7.56522 5.13057 7.56479C5.461 7.5652 5.78721 7.48798 6.08453 7.33895C6.38186 7.18992 6.64253 6.97298 6.84685 6.70453C6.8765 6.66574 6.91325 6.63337 6.955 6.60926C6.99675 6.58515 7.04268 6.56978 7.09018 6.56403C7.13767 6.55827 7.1858 6.56224 7.23181 6.57571C7.27782 6.58919 7.32082 6.6119 7.35834 6.64254C7.39586 6.67319 7.42717 6.71118 7.45049 6.75434C7.47381 6.7975 7.48868 6.84498 7.49425 6.89408C7.49982 6.94318 7.49598 6.99293 7.48294 7.0405C7.46991 7.08806 7.44795 7.13251 7.4183 7.1713C7.14582 7.52897 6.79833 7.818 6.40202 8.01658C6.00572 8.21516 5.57097 8.3181 5.13057 8.31764C4.68953 8.31808 4.25416 8.21484 3.8574 8.01572C3.46064 7.8166 3.11287 7.52681 2.84042 7.16828C2.81083 7.12943 2.78894 7.08493 2.77599 7.03733C2.76304 6.98973 2.75929 6.93996 2.76495 6.89086C2.77061 6.84176 2.78556 6.7943 2.80897 6.75117C2.83237 6.70805 2.86376 6.67011 2.90135 6.63953C2.93893 6.60895 2.98198 6.58632 3.02802 6.57293C3.07407 6.55955 3.12221 6.55567 3.16971 6.56152C3.21721 6.56737 3.26312 6.58283 3.30484 6.60702C3.34655 6.63122 3.38325 6.66367 3.41283 6.70252V6.70302ZM3.67404 3.67506C3.75515 3.67268 3.83589 3.68715 3.9115 3.7176C3.98711 3.74805 4.05604 3.79386 4.11422 3.85233C4.17241 3.9108 4.21866 3.98073 4.25024 4.058C4.28182 4.13527 4.29809 4.2183 4.29809 4.30218C4.29809 4.38606 4.28182 4.46909 4.25024 4.54636C4.21866 4.62363 4.17241 4.69356 4.11422 4.75203C4.05604 4.8105 3.98711 4.85631 3.9115 4.88676C3.83589 4.91721 3.75515 4.93168 3.67404 4.92931C3.51612 4.92469 3.36616 4.85659 3.25604 4.73948C3.14592 4.62238 3.08431 4.4655 3.08431 4.30218C3.08431 4.13886 3.14592 3.98198 3.25604 3.86488C3.36616 3.74777 3.51612 3.67968 3.67404 3.67506ZM6.5871 3.67506C6.66821 3.67268 6.74896 3.68715 6.82457 3.7176C6.90018 3.74805 6.96911 3.79386 7.02729 3.85233C7.08547 3.9108 7.13172 3.98073 7.1633 4.058C7.19488 4.13527 7.21116 4.2183 7.21116 4.30218C7.21116 4.38606 7.19488 4.46909 7.1633 4.54636C7.13172 4.62363 7.08547 4.69356 7.02729 4.75203C6.96911 4.8105 6.90018 4.85631 6.82457 4.88676C6.74896 4.91721 6.66821 4.93168 6.5871 4.92931C6.42918 4.92469 6.27923 4.85659 6.16911 4.73948C6.05898 4.62238 5.99738 4.4655 5.99738 4.30218C5.99738 4.13886 6.05898 3.98198 6.16911 3.86488C6.27923 3.74777 6.42918 3.67968 6.5871 3.67506Z\"\n              />\n            </mask>\n            <path\n              _ngcontent-ng-c433636891=\"\"\n              d=\"M5.13057 0.286224C7.81253 0.286224 9.98665 2.53373 9.98665 5.30623C9.98665 8.07823 7.81205 10.3252 5.13057 10.3252C2.44861 10.3257 0.27449 8.07823 0.27449 5.30623C0.27449 2.53373 2.44861 0.286224 5.13057 0.286224ZM5.13057 1.03908C4.58476 1.03296 4.0432 1.1388 3.53723 1.35049C3.03126 1.56218 2.57092 1.8755 2.18287 2.27233C1.79482 2.66915 1.48675 3.1416 1.2765 3.66233C1.06625 4.18305 0.95799 4.74172 0.95799 5.30598C0.95799 5.87025 1.06625 6.42891 1.2765 6.94964C1.48675 7.47036 1.79482 7.94281 2.18287 8.33964C2.57092 8.73646 3.03126 9.04979 3.53723 9.26147C4.0432 9.47316 4.58476 9.57901 5.13057 9.57289C6.21752 9.5607 7.25594 9.10579 8.02039 8.30691C8.78485 7.50804 9.21362 6.42969 9.21362 5.30598C9.21362 4.18228 8.78485 3.10393 8.02039 2.30505C7.25594 1.50618 6.21752 1.05126 5.13057 1.03908ZM3.41283 6.70302C3.61718 6.97193 3.87803 7.18925 4.17563 7.33855C4.47323 7.48785 4.79978 7.56522 5.13057 7.56479C5.461 7.5652 5.78721 7.48798 6.08453 7.33895C6.38186 7.18992 6.64253 6.97298 6.84685 6.70453C6.8765 6.66574 6.91325 6.63337 6.955 6.60926C6.99675 6.58515 7.04268 6.56978 7.09018 6.56403C7.13767 6.55827 7.1858 6.56224 7.23181 6.57571C7.27782 6.58919 7.32082 6.6119 7.35834 6.64254C7.39586 6.67319 7.42717 6.71118 7.45049 6.75434C7.47381 6.7975 7.48868 6.84498 7.49425 6.89408C7.49982 6.94318 7.49598 6.99293 7.48294 7.0405C7.46991 7.08806 7.44795 7.13251 7.4183 7.1713C7.14582 7.52897 6.79833 7.818 6.40202 8.01658C6.00572 8.21516 5.57097 8.3181 5.13057 8.31764C4.68953 8.31808 4.25416 8.21484 3.8574 8.01572C3.46064 7.8166 3.11287 7.52681 2.84042 7.16828C2.81083 7.12943 2.78894 7.08493 2.77599 7.03733C2.76304 6.98973 2.75929 6.93996 2.76495 6.89086C2.77061 6.84176 2.78556 6.7943 2.80897 6.75117C2.83237 6.70805 2.86376 6.67011 2.90135 6.63953C2.93893 6.60895 2.98198 6.58632 3.02802 6.57293C3.07407 6.55955 3.12221 6.55567 3.16971 6.56152C3.21721 6.56737 3.26312 6.58283 3.30484 6.60702C3.34655 6.63122 3.38325 6.66367 3.41283 6.70252V6.70302ZM3.67404 3.67506C3.75515 3.67268 3.83589 3.68715 3.9115 3.7176C3.98711 3.74805 4.05604 3.79386 4.11422 3.85233C4.17241 3.9108 4.21866 3.98073 4.25024 4.058C4.28182 4.13527 4.29809 4.2183 4.29809 4.30218C4.29809 4.38606 4.28182 4.46909 4.25024 4.54636C4.21866 4.62363 4.17241 4.69356 4.11422 4.75203C4.05604 4.8105 3.98711 4.85631 3.9115 4.88676C3.83589 4.91721 3.75515 4.93168 3.67404 4.92931C3.51612 4.92469 3.36616 4.85659 3.25604 4.73948C3.14592 4.62238 3.08431 4.4655 3.08431 4.30218C3.08431 4.13886 3.14592 3.98198 3.25604 3.86488C3.36616 3.74777 3.51612 3.67968 3.67404 3.67506ZM6.5871 3.67506C6.66821 3.67268 6.74896 3.68715 6.82457 3.7176C6.90018 3.74805 6.96911 3.79386 7.02729 3.85233C7.08547 3.9108 7.13172 3.98073 7.1633 4.058C7.19488 4.13527 7.21116 4.2183 7.21116 4.30218C7.21116 4.38606 7.19488 4.46909 7.1633 4.54636C7.13172 4.62363 7.08547 4.69356 7.02729 4.75203C6.96911 4.8105 6.90018 4.85631 6.82457 4.88676C6.74896 4.91721 6.66821 4.93168 6.5871 4.92931C6.42918 4.92469 6.27923 4.85659 6.16911 4.73948C6.05898 4.62238 5.99738 4.4655 5.99738 4.30218C5.99738 4.13886 6.05898 3.98198 6.16911 3.86488C6.27923 3.74777 6.42918 3.67968 6.5871 3.67506Z\"\n              fill=\"url(#paint0_linear_748_3387)\"\n            ></path>\n            <path\n              _ngcontent-ng-c433636891=\"\"\n              d=\"M5.13057 0.286224C7.81253 0.286224 9.98665 2.53373 9.98665 5.30623C9.98665 8.07823 7.81205 10.3252 5.13057 10.3252C2.44861 10.3257 0.27449 8.07823 0.27449 5.30623C0.27449 2.53373 2.44861 0.286224 5.13057 0.286224ZM5.13057 1.03908C4.58476 1.03296 4.0432 1.1388 3.53723 1.35049C3.03126 1.56218 2.57092 1.8755 2.18287 2.27233C1.79482 2.66915 1.48675 3.1416 1.2765 3.66233C1.06625 4.18305 0.95799 4.74172 0.95799 5.30598C0.95799 5.87025 1.06625 6.42891 1.2765 6.94964C1.48675 7.47036 1.79482 7.94281 2.18287 8.33964C2.57092 8.73646 3.03126 9.04979 3.53723 9.26147C4.0432 9.47316 4.58476 9.57901 5.13057 9.57289C6.21752 9.5607 7.25594 9.10579 8.02039 8.30691C8.78485 7.50804 9.21362 6.42969 9.21362 5.30598C9.21362 4.18228 8.78485 3.10393 8.02039 2.30505C7.25594 1.50618 6.21752 1.05126 5.13057 1.03908ZM3.41283 6.70302C3.61718 6.97193 3.87803 7.18925 4.17563 7.33855C4.47323 7.48785 4.79978 7.56522 5.13057 7.56479C5.461 7.5652 5.78721 7.48798 6.08453 7.33895C6.38186 7.18992 6.64253 6.97298 6.84685 6.70453C6.8765 6.66574 6.91325 6.63337 6.955 6.60926C6.99675 6.58515 7.04268 6.56978 7.09018 6.56403C7.13767 6.55827 7.1858 6.56224 7.23181 6.57571C7.27782 6.58919 7.32082 6.6119 7.35834 6.64254C7.39586 6.67319 7.42717 6.71118 7.45049 6.75434C7.47381 6.7975 7.48868 6.84498 7.49425 6.89408C7.49982 6.94318 7.49598 6.99293 7.48294 7.0405C7.46991 7.08806 7.44795 7.13251 7.4183 7.1713C7.14582 7.52897 6.79833 7.818 6.40202 8.01658C6.00572 8.21516 5.57097 8.3181 5.13057 8.31764C4.68953 8.31808 4.25416 8.21484 3.8574 8.01572C3.46064 7.8166 3.11287 7.52681 2.84042 7.16828C2.81083 7.12943 2.78894 7.08493 2.77599 7.03733C2.76304 6.98973 2.75929 6.93996 2.76495 6.89086C2.77061 6.84176 2.78556 6.7943 2.80897 6.75117C2.83237 6.70805 2.86376 6.67011 2.90135 6.63953C2.93893 6.60895 2.98198 6.58632 3.02802 6.57293C3.07407 6.55955 3.12221 6.55567 3.16971 6.56152C3.21721 6.56737 3.26312 6.58283 3.30484 6.60702C3.34655 6.63122 3.38325 6.66367 3.41283 6.70252V6.70302ZM3.67404 3.67506C3.75515 3.67268 3.83589 3.68715 3.9115 3.7176C3.98711 3.74805 4.05604 3.79386 4.11422 3.85233C4.17241 3.9108 4.21866 3.98073 4.25024 4.058C4.28182 4.13527 4.29809 4.2183 4.29809 4.30218C4.29809 4.38606 4.28182 4.46909 4.25024 4.54636C4.21866 4.62363 4.17241 4.69356 4.11422 4.75203C4.05604 4.8105 3.98711 4.85631 3.9115 4.88676C3.83589 4.91721 3.75515 4.93168 3.67404 4.92931C3.51612 4.92469 3.36616 4.85659 3.25604 4.73948C3.14592 4.62238 3.08431 4.4655 3.08431 4.30218C3.08431 4.13886 3.14592 3.98198 3.25604 3.86488C3.36616 3.74777 3.51612 3.67968 3.67404 3.67506ZM6.5871 3.67506C6.66821 3.67268 6.74896 3.68715 6.82457 3.7176C6.90018 3.74805 6.96911 3.79386 7.02729 3.85233C7.08547 3.9108 7.13172 3.98073 7.1633 4.058C7.19488 4.13527 7.21116 4.2183 7.21116 4.30218C7.21116 4.38606 7.19488 4.46909 7.1633 4.54636C7.13172 4.62363 7.08547 4.69356 7.02729 4.75203C6.96911 4.8105 6.90018 4.85631 6.82457 4.88676C6.74896 4.91721 6.66821 4.93168 6.5871 4.92931C6.42918 4.92469 6.27923 4.85659 6.16911 4.73948C6.05898 4.62238 5.99738 4.4655 5.99738 4.30218C5.99738 4.13886 6.05898 3.98198 6.16911 3.86488C6.27923 3.74777 6.42918 3.67968 6.5871 3.67506Z\"\n              stroke=\"url(#paint0_linear_748_3387)\"\n              fill=\"url(#paint0_linear_748_3387)\"\n              stroke-width=\"0.492535\"\n              mask=\"url(#path-1-outside-1_422_3414)\"\n            ></path>\n          </g>\n          <defs xmlns=\"http://www.w3.org/2000/svg\">\n            <filter id=\"filter0_d_748_7685\" x=\"0\" y=\"0\" width=\"30\" height=\"30\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n              <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n              <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\n              <feOffset />\n              <feGaussianBlur stdDeviation=\"2\" />\n              <feComposite in2=\"hardAlpha\" operator=\"out\" />\n              <feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 0.0961538 0 0 0 0 0.593269 0 0 0 1 0\" />\n              <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_748_7685\" />\n              <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_748_7685\" result=\"shape\" />\n            </filter>\n            <linearGradient id=\"paint0_linear_748_7685\" x1=\"14.1509\" y1=\"3.43372\" x2=\"0.992799\" y2=\"26.7715\" gradientUnits=\"userSpaceOnUse\">\n              <stop stop-color=\"#FE3C72\" />\n              <stop offset=\"0.384615\" stop-color=\"#FFB5E9\" />\n            </linearGradient>\n            <linearGradient id=\"paint0_linear_748_3387\" x1=\"18.5134\" y1=\"2.81097\" x2=\"0.162773\" y2=\"35.3556\" gradientUnits=\"userSpaceOnUse\">\n              <stop stop-color=\"#FE3C72\" />\n              <stop offset=\"0.384615\" stop-color=\"#FFB5E9\" />\n            </linearGradient>\n          </defs>\n        </svg>\n      </div>\n      @if (enableGifPicker) {\n        <div class=\"gifs\" (click)=\"handleGifPickerClick()\"></div>\n        <div class=\"gifs\" *ngIf=\"includeGifMessage\" (click)=\"handleGifPickerClick()\">\n          <svg viewBox=\"0 0 11 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <g>\n              <path\n                d=\"M7.055 10.9995H4.899C3.2535 10.9995 2.4305 10.9995 1.859 10.6005C1.69694 10.4873 1.55167 10.3518 1.4275 10.198C1 9.66501 1 8.89801 1 7.36301V6.09051C1 4.60901 1 3.86801 1.2365 3.27651C1.617 2.32501 2.4215 1.57501 3.4415 1.22001C4.075 0.999512 4.87 0.999512 6.4585 0.999512C7.3665 0.999512 7.82 0.999512 8.1825 1.12551C8.7655 1.32851 9.225 1.75701 9.4425 2.30051C9.5775 2.63851 9.5775 3.06201 9.5775 3.90851V4.99951\"\n                stroke=\"url(#paint0_linear_748_3387)\"\n                stroke-width=\"0.75\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n              <path\n                d=\"M1 5.99951C1 5.07951 1.753 4.33301 2.682 4.33301C3.018 4.33301 3.414 4.39101 3.7405 4.30451C3.88281 4.26736 4.01278 4.19328 4.11726 4.08976C4.22174 3.98624 4.29703 3.85697 4.3355 3.71501C4.4225 3.39151 4.364 2.99901 4.364 2.66601C4.364 1.74601 5.117 0.999512 6.045 0.999512M6.046 8.99951H7.3075M4.833 6.92451C4.77 6.52451 4.6925 6.52401 4.028 6.49951H3.523C3.2445 6.49951 3.0185 6.72351 3.0185 6.99951V8.49951C3.0185 8.77551 3.2445 8.99951 3.5235 8.99951H4.4315C4.6265 8.99951 4.833 8.84301 4.833 8.64951V8.09951C4.833 8.04451 4.7765 7.94751 4.721 7.94751H4.159M6.046 6.49951H6.6765M6.6765 6.49951H7.3075M6.6765 6.49951V8.93701M10.2505 6.49951H8.989C8.7105 6.49951 8.4845 6.72351 8.4845 6.99951V7.74951M8.4845 7.74951V8.99951M8.4845 7.74951H9.746\"\n                stroke=\"url(#paint0_linear_748_3387)\"\n                stroke-width=\"0.75\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </g>\n            <defs xmlns=\"http://www.w3.org/2000/svg\">\n              <filter id=\"filter0_d_748_7685\" x=\"0\" y=\"0\" width=\"30\" height=\"30\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n                <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n                <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\n                <feOffset />\n                <feGaussianBlur stdDeviation=\"2\" />\n                <feComposite in2=\"hardAlpha\" operator=\"out\" />\n                <feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 0.0961538 0 0 0 0 0.593269 0 0 0 1 0\" />\n                <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_748_7685\" />\n                <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_748_7685\" result=\"shape\" />\n              </filter>\n              <linearGradient id=\"paint0_linear_748_7685\" x1=\"14.1509\" y1=\"3.43372\" x2=\"0.992799\" y2=\"26.7715\" gradientUnits=\"userSpaceOnUse\">\n                <stop stop-color=\"#FE3C72\" />\n                <stop offset=\"0.384615\" stop-color=\"#FFB5E9\" />\n              </linearGradient>\n              <linearGradient id=\"paint0_linear_748_3387\" x1=\"18.5134\" y1=\"2.81097\" x2=\"0.162773\" y2=\"35.3556\" gradientUnits=\"userSpaceOnUse\">\n                <stop stop-color=\"#FE3C72\" />\n                <stop offset=\"0.384615\" stop-color=\"#FFB5E9\" />\n              </linearGradient>\n            </defs>\n          </svg>\n        </div>\n      }\n    </div>\n    <div class=\"emoji-picker-space\" [ngStyle]=\"{ 'z-index': !(gifVisibility || emojiVisibility) ? -1 : 11 }\" (blur)=\"onBlurPickerSpace()\">\n      @if (gifVisibility && enableGifPicker) {\n        <lib-gif-selector (selectGif)=\"onGifClick($event)\"></lib-gif-selector>\n      }\n      @if (emojiPickerOpened) {\n        <emoji-picker #emojiPicker [ngStyle]=\"{ display: emojiVisibility ? '' : 'none' }\" emoji-version=\"15.0\" (emoji-click)=\"onEmojiclick($event)\"></emoji-picker>\n      }\n    </div>\n  </form>\n</div>\n", styles: [":host{--height-chat-conversation: 11em;--max-width-container: 27em;--color-background-dark: #1d1b21;--color-chat-other: #453945;--color-chat-user: #403b45;--color-chat-init: #fe3c72;--color-text-white: white;--color-text-gray: rgb(123, 123, 123);--color-background-emoji: #29252d;--color-gradient-start: #746b8381;--color-gradient-end: rgba(0, 0, 0, 0);font-size:clamp(0px,3.2dvw,15px);display:flex;flex-direction:column;width:100%;max-width:var(--max-width-container)}:host .chat-component{display:flex;flex-direction:column;position:relative}:host .chat-component .bottom-gradient-fade{position:absolute;bottom:0;left:0;width:100%;height:40px;background:linear-gradient(180deg,transparent,#27242c);z-index:1;pointer-events:none}:host .chat-component .chat-container{position:relative}:host .chat-component .chat-container .go-button{color:#fff;font-size:1em;position:absolute;bottom:.2em;right:.7em;background-color:var(--color-background-dark);border-radius:50%;width:2em;height:2em;display:flex;justify-content:center;align-items:center;z-index:10}:host .chat-component .chat-container .go-button:hover{cursor:pointer}:host .chat-component .chat-container .dateMessages{display:flex;flex-direction:column;gap:1em;padding-bottom:8px;padding-top:1.6em;height:var(--height-chat-conversation);width:var(--max-width-container);overflow-y:scroll}:host .chat-component .chat-container .dateMessages .chat-item-container{display:flex;flex-direction:column;gap:1em}:host .chat-component .chat-container .dateMessages .chat-item-container .date-message{width:100%;display:flex;justify-content:center;align-items:center;font-size:.861em}:host .chat-component .chat-container .dateMessages .chat-item-container .date-message span{background-color:#000;color:var(--color-text-white);border-radius:1em;padding:.5em}:host .chat-component .chat-container .dateMessages .chat-item-container_user{align-items:flex-end}:host .chat-component .chat-container .dateMessages .chat-item-container_other{align-items:flex-start}:host .chat-component .chat-container .dateMessages .chat-item-container_init{align-items:center}:host .chat-component .chat-container .dateMessages .chat-item{max-width:80%;min-height:3.5em;padding:1em;border-radius:1.076em;position:relative;box-shadow:0 4px 4px #00000040}:host .chat-component .chat-container .dateMessages .chat-item .chat-item_text{font-size:.861em;color:var(--color-text-white);word-break:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}:host .chat-component .chat-container .dateMessages .chat-item .chat-item_image{width:7em;height:auto}:host .chat-component .chat-container .dateMessages .chat-item .chat-item_timestamp{margin-top:.2em;font-size:.8em;color:var(--color-text-gray);text-align:end}:host .chat-component .chat-container .dateMessages .chat-item:before{content:\"\";position:absolute;inset:0;border-radius:1.076em;padding:.05em;background:linear-gradient(180deg,var(--color-gradient-start),var(--color-gradient-end) 50%);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}:host .chat-component .chat-container .dateMessages .other-chat{background-color:var(--color-chat-other);border-bottom-left-radius:0}:host .chat-component .chat-container .dateMessages .user-chat{background-color:var(--color-chat-user);border-bottom-right-radius:0}:host .chat-component .chat-container .dateMessages .init-chat{min-height:2em;padding:.7em;background-color:var(--color-chat-init)}:host .chat-component .chat-container .dateMessages .init-chat .chat-item_text{font-size:.761em;color:#000}:host .chat-component .chat-container .dateMessages .other-chat:before{border-bottom-left-radius:0!important}:host .chat-component .chat-container .dateMessages .user-chat:before{border-bottom-right-radius:0!important}:host .message-sender{position:relative}:host .message-sender lib-input-field{--input-font-size: calc(clamp(0px, 3.2dvw, 15px)*.8) ;--input-padding: calc(clamp(0px, 3.2dvw, 15px)*1.2) calc(clamp(0px, 3.2dvw, 15px)*3.5) calc(clamp(0px, 3.2dvw, 15px)*1.2) calc(clamp(0px, 3.2dvw, 15px)*1.6) ;--placeholder-font-size: calc(clamp(0px, 3.2dvw, 15px)*.8) ;--textarea-height: calc(clamp(0px, 3.2dvw, 15px)*7) }:host .message-sender .chat-buttons .send,:host .message-sender .chat-buttons .emoji,:host .message-sender .chat-buttons .attach,:host .message-sender .chat-buttons .gifs{position:absolute;right:.6em;width:1.7em;height:1.7em;border-radius:50%;z-index:10}:host .message-sender .chat-buttons .send:hover,:host .message-sender .chat-buttons .emoji:hover,:host .message-sender .chat-buttons .attach:hover,:host .message-sender .chat-buttons .gifs:hover{cursor:pointer}:host .message-sender .chat-buttons .send{top:.9em}:host .message-sender .chat-buttons .send svg{width:1.7em;height:1.9em}:host .message-sender .chat-buttons .emoji{top:3.1em}:host .message-sender .chat-buttons .emoji svg{overflow:visible;width:2.33em;height:1.848em}:host .message-sender .chat-buttons .emoji svg mask{width:.733em;height:1.466em}:host .message-sender .chat-buttons .attach{top:5em;background-color:#87ceeb}:host .message-sender .chat-buttons .gifs{top:5em}:host .message-sender .chat-buttons .gifs svg{width:1.166em;height:1.2984em;margin-left:.25em}:host .message-sender .emoji-picker-space{position:absolute;top:-12em;height:12em;width:100%}:host .message-sender .emoji-picker-space emoji-picker{--background: var(--color-background-emoji);height:100%;width:100%;--input-font-size: .8em;--input-font-color: var(--color-text-white)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.InputFieldComponent, selector: "lib-input-field,[lib-input-field]", inputs: ["name", "autocomplete", "label", "placeholder", "type", "readonly", "focus", "enableGoogleAddress", "locationAutocompleteConfig", "defaultLocation", "mask", "prefix", "suffix", "maxLength", "value", "address", "textarea", "resize", "counter", "patterns", "trimWhiteSpace", "disabled"], outputs: ["mapError", "locationChange", "keyDown", "onBlur"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: GifSelectorComponent, selector: "lib-gif-selector", outputs: ["selectGif"] }, { kind: "component", type: i2.LibModalComponent, selector: "lib-popup", inputs: ["isOpen", "icon", "title", "message", "extendedMessage", "cancelButton", "confirmButton", "checkboxText", "progBarCurrentStep", "progBarTotalSteps", "customClass", "backdropDismiss", "modalComponent", "modalComponentData"], outputs: ["modalConfirm", "modalDismiss", "afterCloseEvent"] }, { kind: "directive", type: i2$3.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ChatComponent, decorators: [{
             type: Component,
@@ -2296,7 +2152,7 @@ class AlertPopupComponent {
         }, 1000);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AlertPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: AlertPopupComponent, isStandalone: false, selector: "lib-alert-popup", inputs: { title: "title", description: "description", timeState: "timeState", number: "number" }, outputs: { closed: "closed" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"alert-popup\" [class.is-closing]=\"isClosing\">\r\n  <header class=\"alert-popup__header\">\r\n    <div class=\"alert-popup__info\">\r\n      <img width=\"25px\" height=\"25px\" src=\"assets/icons/popup-defualt.svg\" alt=\"defualt-icon\" />\r\n      <div class=\"alert-popup__wapper\">\r\n        <div class=\"alert-popup__title\">{{ title | translate }}</div>\r\n        <span class=\"alert-popup__description\">{{ description | translate: { number: number } }}</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"alert-popup__close\" (click)=\"handleCloseEvent()\">\r\n      <div>\r\n        <img width=\"20px\" height=\"20px\" src=\"assets/icons/close-icon.svg\" alt=\"close-icon\" />\r\n      </div>\r\n    </div>\r\n  </header>\r\n</div>\r\n", styles: [":host{font-size:clamp(0px,3.2dvw,12px)}:host *{box-sizing:border-box}.alert-popup{opacity:1;transition:opacity 0ms ease,width 0ms ease;-webkit-backdrop-filter:blur(.625em);backdrop-filter:blur(.625em);background:linear-gradient(to right,#fe3c72 -20%,#0003 15%);color:#fff;padding:1em 1.5em;width:25em;border-radius:1.6625em;font-family:Gilroy}.alert-popup__header{display:flex;justify-content:space-between;align-items:flex-start}.alert-popup__defualt-icon{width:1em;height:1em}.alert-popup__info{display:flex;gap:1em;align-items:flex-start}.alert-popup__title{font-size:1.275em;font-weight:300;font-family:Calistoga;color:#fff5f5;text-overflow:ellipsis;white-space:nowrap;word-break:revert}.alert-popup__description{color:#8e8e8e;font-size:.875em;font-family:Gilroy;text-overflow:ellipsis;white-space:break-spaces;word-break:revert}.alert-popup__close{cursor:pointer}.alert-popup__close img{min-width:20px}.alert-popup__wapper{transition:opacity 0ms ease}.alert-popup:before{content:\"\";position:absolute;inset:0;border-radius:1.6625em;padding:.125em;background:linear-gradient(to top,transparent,transparent,#ccabc4);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;z-index:-1}.overflow{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.is-closing{transition:opacity .5s ease,width 1.5s ease;opacity:0;width:5em}.is-closing .alert-popup__wapper{opacity:0;transition:opacity .5s ease}@media (max-width: 768px){:host{font-size:calc(clamp(0px,3.2dvw,12px)*.8)}}\n"], dependencies: [{ kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: AlertPopupComponent, isStandalone: false, selector: "lib-alert-popup", inputs: { title: "title", description: "description", timeState: "timeState", number: "number" }, outputs: { closed: "closed" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"alert-popup\" [class.is-closing]=\"isClosing\">\r\n  <header class=\"alert-popup__header\">\r\n    <div class=\"alert-popup__info\">\r\n      <img width=\"25px\" height=\"25px\" src=\"assets/icons/popup-defualt.svg\" alt=\"defualt-icon\" />\r\n      <div class=\"alert-popup__wapper\">\r\n        <div class=\"alert-popup__title\">{{ title | translate }}</div>\r\n        <span class=\"alert-popup__description\">{{ description | translate: { number: number } }}</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"alert-popup__close\" (click)=\"handleCloseEvent()\">\r\n      <div>\r\n        <img width=\"20px\" height=\"20px\" src=\"assets/icons/close-icon.svg\" alt=\"close-icon\" />\r\n      </div>\r\n    </div>\r\n  </header>\r\n</div>\r\n", styles: [":host{font-size:clamp(0px,3.2dvw,12px)}:host *{box-sizing:border-box}.alert-popup{opacity:1;transition:opacity 0ms ease,width 0ms ease;-webkit-backdrop-filter:blur(.625em);backdrop-filter:blur(.625em);background:linear-gradient(to right,#fe3c72 -20%,#0003 15%);color:#fff;padding:1em 1.5em;width:25em;border-radius:1.6625em;font-family:Gilroy}.alert-popup__header{display:flex;justify-content:space-between;align-items:flex-start}.alert-popup__defualt-icon{width:1em;height:1em}.alert-popup__info{display:flex;gap:1em;align-items:flex-start}.alert-popup__title{font-size:1.275em;font-weight:300;font-family:Calistoga;color:#fff5f5;text-overflow:ellipsis;white-space:nowrap;word-break:revert}.alert-popup__description{color:#8e8e8e;font-size:.875em;font-family:Gilroy;text-overflow:ellipsis;white-space:break-spaces;word-break:revert}.alert-popup__close{cursor:pointer}.alert-popup__close img{min-width:20px}.alert-popup__wapper{transition:opacity 0ms ease}.alert-popup:before{content:\"\";position:absolute;inset:0;border-radius:1.6625em;padding:.125em;background:linear-gradient(to top,transparent,transparent,#ccabc4);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;z-index:-1}.overflow{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.is-closing{transition:opacity .5s ease,width 1.5s ease;opacity:0;width:5em}.is-closing .alert-popup__wapper{opacity:0;transition:opacity .5s ease}@media (max-width: 768px){:host{font-size:calc(clamp(0px,3.2dvw,12px)*.8)}}\n"], dependencies: [{ kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AlertPopupComponent, decorators: [{
             type: Component,
@@ -2370,7 +2226,7 @@ class LibChatComponentModule {
             SharedModule,
             InfiniteScrollModule,
             TranslateModule], exports: [ChatComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibChatComponentModule, providers: [ChatService], imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibChatComponentModule, providers: [ChatService$1], imports: [CommonModule,
             ImageCardModule,
             MatInputModule,
             MatSelectModule,
@@ -2404,31 +2260,276 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                         TranslateModule,
                     ],
                     exports: [ChatComponent],
-                    providers: [ChatService],
+                    providers: [ChatService$1],
                 }]
         }] });
 
-const innerProgressWhiteColors = {
-    primary: '#FFFFFF',
-    secondary: '#E0E0E0',
-    tertiary: '#000000',
-    gradientPrimary: '#FFFFFF',
-    gradientSecondary: '#E0E0E0',
-    incomplete: '#E0E0E0',
-    complete: '#FFFFFF',
+class ChatService {
+    constructor(cacheService) {
+        this.cacheService = cacheService;
+    }
+    setLongPressForSendImmediately(enabled) {
+        this.cacheService.saveLocalStorage(LocalStorageKeys.LongPressForSendImmediately, enabled ? '1' : '0');
+    }
+    isLongPressForSendImmediately() {
+        return this.cacheService.getLocalStorage(LocalStorageKeys.LongPressForSendImmediately).pipe(map((value) => value === '1'));
+    }
+    // transforms |messages| into |DateMessages| array
+    transformMessages(messages) {
+        const sorted = [...messages].sort((a, b) => a.timestamp?.getTime() - b.timestamp?.getTime());
+        const seen = new Set();
+        return sorted.map((msg) => {
+            const dayStart = startOfDay(msg.timestamp); // midnight *local*
+            if (dayStart) {
+                const key = dayStart.getTime(); // epoch ms as the bucket id
+                const isFirst = !seen.has(String(key));
+                if (isFirst)
+                    seen.add(String(key));
+                return { date: dayStart, isFirstMessage: isFirst, message: msg };
+            }
+            else {
+                return null;
+            }
+        });
+    }
+    // updates |isFirstMessage| property of |DateMessages| array
+    updateDateMessages(dateMessages) {
+        const byDay = new Map();
+        dateMessages.forEach((dm) => {
+            const dayStart = startOfDay(dm.message.timestamp).getTime(); // epoch-ms key
+            if (!byDay.has(dayStart))
+                byDay.set(dayStart, []);
+            byDay.get(dayStart).push(dm);
+        });
+        // 2️⃣  Within each bucket, sort and flag the first message
+        const result = [];
+        byDay.forEach((list) => {
+            // ✨  clone so we don’t mutate callers’ state
+            const sorted = [...list].sort((a, b) => a.message.timestamp.getTime() - b.message.timestamp.getTime());
+            sorted.forEach((dm, idx) => (dm.isFirstMessage = idx === 0));
+            result.push(...sorted);
+        });
+        return result;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ChatService, deps: [{ token: AbstractCacheService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ChatService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ChatService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: AbstractCacheService }] });
+
+const MATCHER_STATUSES = [
+    {
+        title: '1st',
+        subtitle: 'exchange',
+        value: MatcherStatuses.STATUS1,
+    },
+    {
+        title: '2nd',
+        subtitle: 'exchange',
+        value: MatcherStatuses.STATUS2,
+    },
+    {
+        title: '3rd',
+        subtitle: 'exchange',
+        value: MatcherStatuses.STATUS3,
+    },
+    {
+        title: '2+',
+        subtitle: 'laughs',
+        value: MatcherStatuses.STATUS4,
+    },
+    {
+        title: 'idea',
+        subtitle: 'signalled',
+        value: MatcherStatuses.STATUS5,
+    },
+    {
+        title: 'alt',
+        subtitle: 'contact',
+        value: MatcherStatuses.STATUS6,
+    },
+    {
+        title: 'any',
+        subtitle: 'romance',
+        value: MatcherStatuses.STATUS7,
+    },
+    {
+        title: 'locale',
+        subtitle: 'confirmed',
+        value: MatcherStatuses.STATUS8,
+    },
+    {
+        title: 'time',
+        subtitle: 'confirmed',
+        value: MatcherStatuses.STATUS9,
+    },
+    {
+        title: 'all',
+        subtitle: 'followup',
+        value: MatcherStatuses.STATUS10,
+    },
+];
+
+const defaultClientHomeConfig = {
+    loading: {
+        clientMatches: true,
+    },
+    default: false,
+    component: ClientHomeComponent.ChatHandoff,
+    activeIndex: 0,
+    slideContentMaxHeight: 'auto',
+    clientMatches$: of([]),
+    schedulers$: of([]),
+    polygonColors: [],
+    spiderConfig: null,
+    bottomThumbs: true,
+    includeTime: true,
+    maxLength: 300,
+    includeGifMessage: true,
+    startDate: new Date(),
+    endDate: endOfDay(addDays(new Date(), 6)),
+    emptyMessage: '',
+    displayBookedStatuses: false,
+    displayEmptyDays: true,
+    loading$: of(false),
+    alertStatus: {},
+    showValueProportionLabel: false,
+    hideProgressBar: false,
 };
 
-var CONVERSATION_FLAG;
-(function (CONVERSATION_FLAG) {
-    CONVERSATION_FLAG["UNRESPONSIVE"] = "unresponsive";
-    CONVERSATION_FLAG["REDELEGATION"] = "redelegation";
-})(CONVERSATION_FLAG || (CONVERSATION_FLAG = {}));
+class ChatMetaPipe {
+    transform(clientMatches$, prospectId) {
+        return clientMatches$?.pipe(map((clientMatches) => clientMatches.map((c) => c.prospectData)), map((chats) => {
+            const chat = chats.find((c) => c.prospectId === prospectId);
+            if (!chat || chat.messages.length === 0) {
+                return {
+                    lastResponseTimestamp: null,
+                    firstAnswer: false,
+                    waitingAnswer: false,
+                    conversationFlags: chat?.conversationFlags,
+                };
+            }
+            // --- one forward/backward scan, no extra arrays ---
+            let lastUserIndex = -1;
+            for (let i = chat.messages.length - 1; i >= 0; i--) {
+                if (chat.messages[i].sender === SenderTypes.USER) {
+                    lastUserIndex = i;
+                    break;
+                }
+            }
+            let firstProspectMessageAfterMe = null;
+            let waitingAnswer = false;
+            if (lastUserIndex !== -1) {
+                for (let i = lastUserIndex + 1; i < chat.messages.length; i++) {
+                    if (chat.messages[i].sender === SenderTypes.OTHER) {
+                        firstProspectMessageAfterMe = chat.messages[i].timestamp;
+                        waitingAnswer = true; // prospect wrote last → waiting
+                        break;
+                    }
+                }
+            }
+            if (!waitingAnswer) {
+                // Either I haven't written, or I wrote last
+                const lastMsg = chat.messages[chat.messages.length - 1];
+                waitingAnswer = !!lastMsg && lastMsg.sender === SenderTypes.OTHER && lastUserIndex === -1;
+            }
+            return {
+                lastResponseTimestamp: firstProspectMessageAfterMe,
+                firstAnswer: lastUserIndex !== -1,
+                waitingAnswer,
+                conversationFlags: chat.conversationFlags,
+            };
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ChatMetaPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: ChatMetaPipe, isStandalone: true, name: "chatMeta" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ChatMetaPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'chatMeta',
+                    standalone: true,
+                    pure: true, // default, but being explicit
+                }]
+        }] });
+
+class GetColorByMatcherPipe {
+    transform(match, config) {
+        const defaultColors = progressDefaultColors;
+        if (!config?.spiderConfig?.datasets?.length) {
+            return defaultColors;
+        }
+        const currentMatch = config.spiderConfig.datasets.find((ma) => ma.title === match.primary?.name || ma.title === match.secondary?.name);
+        return currentMatch
+            ? {
+                primary: currentMatch.polygon_color.value,
+                secondary: currentMatch.polygon_color.value,
+                tertiary: currentMatch.polygon_color.value,
+                gradientPrimary: currentMatch.polygon_color.value,
+                gradientSecondary: currentMatch.polygon_color.value,
+                complete: currentMatch.polygon_color.value,
+                incomplete: currentMatch.polygon_color.value,
+            }
+            : defaultColors;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: GetColorByMatcherPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: GetColorByMatcherPipe, isStandalone: true, name: "getColorByMatcher" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: GetColorByMatcherPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'getColorByMatcher',
+                    standalone: true,
+                }]
+        }] });
+
+const TICK_PERIOD_SECONDS = new InjectionToken('TICK_PERIOD_SECONDS', { factory: () => 60 });
 
-var COUNTER_FLAG_BASE;
-(function (COUNTER_FLAG_BASE) {
-    COUNTER_FLAG_BASE["StartConversation"] = "startConversation";
-    COUNTER_FLAG_BASE["LastResponse"] = "lastResponse";
-})(COUNTER_FLAG_BASE || (COUNTER_FLAG_BASE = {}));
+// 🔁 ProgressTickerService centralizes timing control instead of spawning
+// multiple `setInterval` calls inside each animated component.
+//
+// This prevents creating 100+ independent timers (one per component),
+// and ensures all animations stay synchronized through a shared RxJS Observable.
+//
+// With 'shareReplay', the timer activates only when there’s at least one subscriber,
+// and it automatically stops when there are none.
+//
+// This approach significantly improves performance, reduces CPU usage,
+// and makes animation timing easier to manage and debug.
+class ProgressTickerService {
+    /* 60 * 1_000 = 1 minute */
+    constructor(periodSec) {
+        /** For diagnostics: current number of active subscribers. */
+        this.subscriberCount$ = new BehaviorSubject(0);
+        const periodMs = Math.max(0.125, periodSec) * 1_000; // guard against 0/neg
+        const base$ = interval(periodMs, animationFrameScheduler);
+        // wrapped timer that tracks subs/unsubs
+        this.tick$ = defer(() => {
+            // a new subscription is starting
+            this.subscriberCount$.next(this.subscriberCount$.value + 1);
+            return base$.pipe(finalize(() => {
+                // this subscription is ending
+                this.subscriberCount$.next(this.subscriberCount$.value - 1);
+            }));
+        }).pipe(shareReplay({ bufferSize: 1, refCount: true }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ProgressTickerService, deps: [{ token: TICK_PERIOD_SECONDS }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ProgressTickerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ProgressTickerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TICK_PERIOD_SECONDS]
+                }] }] });
+
+// progress-gap.config.ts  (inside the library)
+const PROGRESS_GAP_MINUTES = new InjectionToken('PROGRESS_GAP_MINUTES', { factory: () => 1 }); // Default to 1 minute if not provided
 
 const getLimitDatesIndicators = (timestamp, interval = 1_440) => {
     const MS_IN_MIN = 60 * 1000; // 60 000
@@ -2515,49 +2616,15 @@ const redelegation = (basedOn, registered) => {
     return { state: INNER_CIRCLE_STATE.Redelegation, innerValue: null, tick: 'stop', basedOn, registered };
 };
 
-// progress-gap.config.ts  (inside the library)
-const PROGRESS_GAP_MINUTES = new InjectionToken('PROGRESS_GAP_MINUTES', { factory: () => 1 }); // Default to 1 minute if not provided
-
-const TICK_PERIOD_SECONDS = new InjectionToken('TICK_PERIOD_SECONDS', { factory: () => 60 });
-
-// 🔁 ProgressTickerService centralizes timing control instead of spawning
-// multiple `setInterval` calls inside each animated component.
-//
-// This prevents creating 100+ independent timers (one per component),
-// and ensures all animations stay synchronized through a shared RxJS Observable.
-//
-// With 'shareReplay', the timer activates only when there’s at least one subscriber,
-// and it automatically stops when there are none.
-//
-// This approach significantly improves performance, reduces CPU usage,
-// and makes animation timing easier to manage and debug.
-class ProgressTickerService {
-    /* 60 * 1_000 = 1 minute */
-    constructor(periodSec) {
-        /** For diagnostics: current number of active subscribers. */
-        this.subscriberCount$ = new BehaviorSubject(0);
-        const periodMs = Math.max(0.125, periodSec) * 1_000; // guard against 0/neg
-        const base$ = interval(periodMs, animationFrameScheduler);
-        // wrapped timer that tracks subs/unsubs
-        this.tick$ = defer(() => {
-            // a new subscription is starting
-            this.subscriberCount$.next(this.subscriberCount$.value + 1);
-            return base$.pipe(finalize(() => {
-                // this subscription is ending
-                this.subscriberCount$.next(this.subscriberCount$.value - 1);
-            }));
-        }).pipe(shareReplay({ bufferSize: 1, refCount: true }));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ProgressTickerService, deps: [{ token: TICK_PERIOD_SECONDS }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ProgressTickerService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ProgressTickerService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [TICK_PERIOD_SECONDS]
-                }] }] });
+const innerProgressWhiteColors = {
+    primary: '#FFFFFF',
+    secondary: '#E0E0E0',
+    tertiary: '#000000',
+    gradientPrimary: '#FFFFFF',
+    gradientSecondary: '#E0E0E0',
+    incomplete: '#E0E0E0',
+    complete: '#FFFFFF',
+};
 
 class LibClientMatchOverviewComponent {
     constructor() {
@@ -2762,158 +2829,79 @@ class LibClientMatchOverviewComponent {
         };
         const map = lookUpMap[preset];
         this.innerValue = innerValue ?? map.innerValue;
-        this.showIllumination = map.showIllumination;
-        this.showValueProportionLabel = map.showValueProportionLabel;
-        this.innerPartialColors = map.innerPartialColors;
-        this.basedOn = basedOn ?? map.basedOn;
-        this.innerState = preset;
-        if (preset === INNER_CIRCLE_STATE.Unresponsive) {
-            this.sendConversationFlag.emit({
-                timestamp: new Date(),
-                prospectId: this.overview._id,
-                basedOn: this.basedOn,
-                flag: CONVERSATION_FLAG.UNRESPONSIVE,
-            });
-        }
-        else if (preset === INNER_CIRCLE_STATE.Redelegation) {
-            this.sendConversationFlag.emit({
-                timestamp: new Date(),
-                prospectId: this.overview._id,
-                basedOn: this.basedOn,
-                flag: CONVERSATION_FLAG.REDELEGATION,
-            });
-        }
-        this.buildCircleOpts();
-    }
-    buildCircleOpts() {
-        this.circleOpts = {
-            value: this.overview.preferences + this.overview.personality,
-            max: this.maxValue,
-            partialColors: this.partialColors,
-            showExternalPartialCircleProgress: this.showExternalPartialCircleProgress && this.expand,
-            showValueProportionLabel: this.showValueProportionLabel,
-            hasNotification: this.meta?.waitingAnswer,
-            inner: {
-                value: this.innerValue,
-                max: this.innerMaxValue,
-                colors: this.innerPartialColors,
-                state: this.innerState,
-                showIllumination: this.showIllumination,
-            },
-            imageUrl: this.overview.primary?.src,
-            suffix: '',
-            prefix: '',
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibClientMatchOverviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LibClientMatchOverviewComponent, isStandalone: true, selector: "lib-client-match-overview", inputs: { overview: "overview", meta: "meta", expand: "expand", loading: "loading", default: "default", hideProgressBar: "hideProgressBar", partialColors: "partialColors", showExternalPartialCircleProgress: "showExternalPartialCircleProgress", maxValue: "maxValue", enableChangeOverview: "enableChangeOverview" }, outputs: { sendConversationFlag: "sendConversationFlag" }, usesOnChanges: true, ngImport: i0, template: "@if (!default && imageLoader$ | async) {\n  <div class=\"overview\" [ngClass]=\"{ overview__expand: expand, overview__collapse: !expand }\">\n    <div class=\"overview__container\">\n      <lib-circle-progress\n        class=\"overview__progress-bar\"\n        [ngClass]=\"{ 'overview__progress-bar--hidden': hideProgressBar && !expand }\"\n        [variable]=\"circleVariable.Partial\"\n        [config]=\"circleOpts\"\n      ></lib-circle-progress>\n      <!-- details next to the circle image -->\n      @if (expand) {\n        <div class=\"overview__comparison comparison\">\n          <div class=\"comparison__entity secondary-profile\">\n            <div class=\"secondary-profile__image\">\n              <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 100 100\">\n                <circle r=\"50\" cx=\"50\" cy=\"50\" fill=\"#28252D\" />\n                <image [attr.mask]=\"'url(#' + imagePathId + ')'\" [attr.href]=\"overview.secondary.src\" height=\"80\" width=\"80\" x=\"10\" y=\"10\" />\n                <defs>\n                  <mask [attr.id]=\"imagePathId\">\n                    <rect x=\"0\" y=\"0\" height=\"100\" width=\"100\" fill=\"black\" />\n                    <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"white\" />\n                  </mask>\n                </defs>\n              </svg>\n            </div>\n            <div class=\"comparison__label\">{{ overview.secondary.name }}</div>\n          </div>\n          <div class=\"comparison__entity\">\n            <div class=\"comparison__value\">\n              <span class=\"preferences\">{{ overview.preferences }}%</span>\n            </div>\n            <div class=\"comparison__label\">{{ 'CLIENT_MATCH_OVERVIEW.PREFERENCES_MATCH' | translate }}</div>\n          </div>\n          <div class=\"comparison__entity\">\n            <div class=\"comparison__value\">\n              <span class=\"personality\">{{ overview.personality }}%</span>\n            </div>\n            <div class=\"comparison__label\">{{ 'CLIENT_MATCH_OVERVIEW.PERSONALITY_MATCH' | translate }}</div>\n          </div>\n        </div>\n      }\n    </div>\n    <!-- shadow on all the component (circle image and texts) -->\n    @if (expand) {\n      <div class=\"overview__back-shadow\">\n        <img src=\"assets/client-match-overview/background-eclipse.svg\" />\n      </div>\n    }\n  </div>\n} @else if (loading) {\n  <div class=\"overview\" part=\"loading\">\n    <div class=\"overview__container\">\n      <div class=\"default-empty-profile\">\n        <p-skeleton shape=\"circle\" size=\"3rem\" class=\"loading-skeleton\" />\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"34\" height=\"35\" viewBox=\"0 0 34 35\" fill=\"none\">\n          <circle cx=\"17.0096\" cy=\"17.5439\" r=\"16.5945\" fill=\"#29252D\" />\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M13.4843 18.2501C13.5008 18.2493 13.5174 18.2489 13.5339 18.2489H20.1384C20.1549 18.2489 20.1714 18.2493 20.188 18.2501C22.501 18.3649 24.5513 19.7726 25.4901 21.8878C26.1644 23.2368 25.7884 24.5724 24.9275 25.4921C24.0937 26.3827 22.802 26.9145 21.4595 26.9145H12.2127C10.8707 26.9145 9.57941 26.3825 8.74582 25.4921C7.88499 24.5726 7.50858 23.2372 8.182 21.888C9.12087 19.7726 11.1712 18.365 13.4843 18.2501ZM13.56 20.2486C12.0044 20.3346 10.6283 21.2884 10.0022 22.7165C9.99443 22.7342 9.98617 22.7517 9.97741 22.7689C9.72674 23.2609 9.82034 23.7138 10.2057 24.1253C10.6239 24.5721 11.367 24.9147 12.2127 24.9147H21.4595C22.3061 24.9147 23.0495 24.572 23.4675 24.1253C23.8527 23.7141 23.9461 23.2616 23.6951 22.7694C23.6863 22.7521 23.6779 22.7343 23.67 22.7165C23.044 21.2884 21.6679 20.3346 20.1122 20.2486H13.56Z\"\n            fill=\"#5E5E5E\"\n          />\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M16.836 8.24993C15.1794 8.24993 13.8364 9.5929 13.8364 11.2495C13.8364 12.9062 15.1794 14.2492 16.836 14.2492C18.4927 14.2492 19.8356 12.9062 19.8356 11.2495C19.8356 10.454 19.5197 9.69103 18.9571 9.12849C18.3945 8.56595 17.6315 8.24993 16.836 8.24993ZM11.8367 11.2495C11.8367 8.48847 14.075 6.25018 16.836 6.25018C18.162 6.25018 19.4335 6.7769 20.3712 7.71446C21.3086 8.65202 21.8354 9.92363 21.8354 11.2495C21.8354 14.0107 19.5971 16.2489 16.836 16.2489C14.075 16.2489 11.8367 14.0107 11.8367 11.2495Z\"\n            fill=\"#5E5E5E\"\n          />\n        </svg>\n      </div>\n    </div>\n  </div>\n} @else if (default || !overview.primary) {\n  <div class=\"overview\">\n    <div class=\"overview__container\">\n      <div class=\"default-empty-profile\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"34\" height=\"35\" viewBox=\"0 0 34 35\" fill=\"none\">\n          <circle cx=\"17.0096\" cy=\"17.5439\" r=\"16.5945\" fill=\"#29252D\" />\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M13.4843 18.2501C13.5008 18.2493 13.5174 18.2489 13.5339 18.2489H20.1384C20.1549 18.2489 20.1714 18.2493 20.188 18.2501C22.501 18.3649 24.5513 19.7726 25.4901 21.8878C26.1644 23.2368 25.7884 24.5724 24.9275 25.4921C24.0937 26.3827 22.802 26.9145 21.4595 26.9145H12.2127C10.8707 26.9145 9.57941 26.3825 8.74582 25.4921C7.88499 24.5726 7.50858 23.2372 8.182 21.888C9.12087 19.7726 11.1712 18.365 13.4843 18.2501ZM13.56 20.2486C12.0044 20.3346 10.6283 21.2884 10.0022 22.7165C9.99443 22.7342 9.98617 22.7517 9.97741 22.7689C9.72674 23.2609 9.82034 23.7138 10.2057 24.1253C10.6239 24.5721 11.367 24.9147 12.2127 24.9147H21.4595C22.3061 24.9147 23.0495 24.572 23.4675 24.1253C23.8527 23.7141 23.9461 23.2616 23.6951 22.7694C23.6863 22.7521 23.6779 22.7343 23.67 22.7165C23.044 21.2884 21.6679 20.3346 20.1122 20.2486H13.56Z\"\n            fill=\"#5E5E5E\"\n          />\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M16.836 8.24993C15.1794 8.24993 13.8364 9.5929 13.8364 11.2495C13.8364 12.9062 15.1794 14.2492 16.836 14.2492C18.4927 14.2492 19.8356 12.9062 19.8356 11.2495C19.8356 10.454 19.5197 9.69103 18.9571 9.12849C18.3945 8.56595 17.6315 8.24993 16.836 8.24993ZM11.8367 11.2495C11.8367 8.48847 14.075 6.25018 16.836 6.25018C18.162 6.25018 19.4335 6.7769 20.3712 7.71446C21.3086 8.65202 21.8354 9.92363 21.8354 11.2495C21.8354 14.0107 19.5971 16.2489 16.836 16.2489C14.075 16.2489 11.8367 14.0107 11.8367 11.2495Z\"\n            fill=\"#5E5E5E\"\n          />\n        </svg>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".zoom-in{animation:fadeZoomIn .5s ease-in-out}.zoom-out{animation:fadeZoomOut .5s ease-in-out}.zoom-out.collapse{display:none!important}@keyframes fadeZoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}@keyframes fadeZoomIn{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.hide{max-height:0;overflow:hidden;opacity:0;transition:max-height .8s ease-in-out,opacity .8s ease-in-out}.show{max-height:200px;opacity:1;transition:max-height .8s ease-in-out,opacity .8s ease-in-out}:host{font-size:clamp(0px,var(--component-size, 1.5dvw),.75rem)}.overview{overflow:hidden;width:100%;max-width:var(--card-width, 100%);display:block;position:relative}.overview__collapse{--card-width: 15em}.overview__expand{--card-width: 100%}.overview__back-shadow{position:absolute;top:-15%;left:0%;height:130%;width:120%;display:flex;justify-content:center;z-index:0}.overview__back-shadow img{height:100%;width:100%;flex-shrink:0}.overview__container{z-index:2;position:relative;display:flex;align-items:center}.overview__progress-bar{height:var(--primary-profile-height, 15em)!important;width:var(--primary-profile-width, 15em)!important;flex-shrink:0;transition:all .5s}.overview__progress-bar--hidden .circle-progress__svg,.overview__progress-bar--hidden .circle-progress__image{opacity:0}.overview__comparison{display:flex;flex-direction:column;flex-grow:1;transform-origin:left center;margin:var(--secondary-profile-margin, 0 0 0 -10px)}.comparison__entity{font-family:Gilroy-Medium;display:flex;gap:1em}.comparison__label{display:flex;justify-content:center;align-items:center;max-width:10ch}.comparison__value{height:var(--match-percentage-value-height, 4em);width:var(--match-percentage-value-width, \"auto\");display:flex;align-items:center;justify-content:center}.comparison__value>span{font-size:var(--match-percentage-font-size, 3em)}.comparison__value>span.preferences{color:#fe3c72}.comparison__value>span.personality{color:#9c2b4b}.secondary-profile{margin-bottom:-5px}.secondary-profile__image{height:var(--secondary-profile-height, 7rem);width:var(--secondary-profile-width, 7rem);display:flex;align-items:center;margin-left:-3px}.default-empty-profile{padding:1px;border-radius:50%;background:radial-gradient(circle,#acacac 79%,#fff);display:flex;justify-content:center;align-items:center;position:relative;margin:0 10px}.default-empty-profile .loading-skeleton{position:absolute;top:0}.default-empty-profile .p-skeleton:after{background:linear-gradient(90deg,#fff0,#fff6,#fff0)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: CircleProgressModule }, { kind: "component", type: CircleProgressComponent, selector: "lib-circle-progress", inputs: ["variable", "config"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2$2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibClientMatchOverviewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-client-match-overview', encapsulation: ViewEncapsulation.ShadowDom, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, CircleProgressModule, TranslateModule, SkeletonModule], template: "@if (!default && imageLoader$ | async) {\n  <div class=\"overview\" [ngClass]=\"{ overview__expand: expand, overview__collapse: !expand }\">\n    <div class=\"overview__container\">\n      <lib-circle-progress\n        class=\"overview__progress-bar\"\n        [ngClass]=\"{ 'overview__progress-bar--hidden': hideProgressBar && !expand }\"\n        [variable]=\"circleVariable.Partial\"\n        [config]=\"circleOpts\"\n      ></lib-circle-progress>\n      <!-- details next to the circle image -->\n      @if (expand) {\n        <div class=\"overview__comparison comparison\">\n          <div class=\"comparison__entity secondary-profile\">\n            <div class=\"secondary-profile__image\">\n              <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 100 100\">\n                <circle r=\"50\" cx=\"50\" cy=\"50\" fill=\"#28252D\" />\n                <image [attr.mask]=\"'url(#' + imagePathId + ')'\" [attr.href]=\"overview.secondary.src\" height=\"80\" width=\"80\" x=\"10\" y=\"10\" />\n                <defs>\n                  <mask [attr.id]=\"imagePathId\">\n                    <rect x=\"0\" y=\"0\" height=\"100\" width=\"100\" fill=\"black\" />\n                    <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"white\" />\n                  </mask>\n                </defs>\n              </svg>\n            </div>\n            <div class=\"comparison__label\">{{ overview.secondary.name }}</div>\n          </div>\n          <div class=\"comparison__entity\">\n            <div class=\"comparison__value\">\n              <span class=\"preferences\">{{ overview.preferences }}%</span>\n            </div>\n            <div class=\"comparison__label\">{{ 'CLIENT_MATCH_OVERVIEW.PREFERENCES_MATCH' | translate }}</div>\n          </div>\n          <div class=\"comparison__entity\">\n            <div class=\"comparison__value\">\n              <span class=\"personality\">{{ overview.personality }}%</span>\n            </div>\n            <div class=\"comparison__label\">{{ 'CLIENT_MATCH_OVERVIEW.PERSONALITY_MATCH' | translate }}</div>\n          </div>\n        </div>\n      }\n    </div>\n    <!-- shadow on all the component (circle image and texts) -->\n    @if (expand) {\n      <div class=\"overview__back-shadow\">\n        <img src=\"assets/client-match-overview/background-eclipse.svg\" />\n      </div>\n    }\n  </div>\n} @else if (loading) {\n  <div class=\"overview\" part=\"loading\">\n    <div class=\"overview__container\">\n      <div class=\"default-empty-profile\">\n        <p-skeleton shape=\"circle\" size=\"3rem\" class=\"loading-skeleton\" />\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"34\" height=\"35\" viewBox=\"0 0 34 35\" fill=\"none\">\n          <circle cx=\"17.0096\" cy=\"17.5439\" r=\"16.5945\" fill=\"#29252D\" />\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M13.4843 18.2501C13.5008 18.2493 13.5174 18.2489 13.5339 18.2489H20.1384C20.1549 18.2489 20.1714 18.2493 20.188 18.2501C22.501 18.3649 24.5513 19.7726 25.4901 21.8878C26.1644 23.2368 25.7884 24.5724 24.9275 25.4921C24.0937 26.3827 22.802 26.9145 21.4595 26.9145H12.2127C10.8707 26.9145 9.57941 26.3825 8.74582 25.4921C7.88499 24.5726 7.50858 23.2372 8.182 21.888C9.12087 19.7726 11.1712 18.365 13.4843 18.2501ZM13.56 20.2486C12.0044 20.3346 10.6283 21.2884 10.0022 22.7165C9.99443 22.7342 9.98617 22.7517 9.97741 22.7689C9.72674 23.2609 9.82034 23.7138 10.2057 24.1253C10.6239 24.5721 11.367 24.9147 12.2127 24.9147H21.4595C22.3061 24.9147 23.0495 24.572 23.4675 24.1253C23.8527 23.7141 23.9461 23.2616 23.6951 22.7694C23.6863 22.7521 23.6779 22.7343 23.67 22.7165C23.044 21.2884 21.6679 20.3346 20.1122 20.2486H13.56Z\"\n            fill=\"#5E5E5E\"\n          />\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M16.836 8.24993C15.1794 8.24993 13.8364 9.5929 13.8364 11.2495C13.8364 12.9062 15.1794 14.2492 16.836 14.2492C18.4927 14.2492 19.8356 12.9062 19.8356 11.2495C19.8356 10.454 19.5197 9.69103 18.9571 9.12849C18.3945 8.56595 17.6315 8.24993 16.836 8.24993ZM11.8367 11.2495C11.8367 8.48847 14.075 6.25018 16.836 6.25018C18.162 6.25018 19.4335 6.7769 20.3712 7.71446C21.3086 8.65202 21.8354 9.92363 21.8354 11.2495C21.8354 14.0107 19.5971 16.2489 16.836 16.2489C14.075 16.2489 11.8367 14.0107 11.8367 11.2495Z\"\n            fill=\"#5E5E5E\"\n          />\n        </svg>\n      </div>\n    </div>\n  </div>\n} @else if (default || !overview.primary) {\n  <div class=\"overview\">\n    <div class=\"overview__container\">\n      <div class=\"default-empty-profile\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"34\" height=\"35\" viewBox=\"0 0 34 35\" fill=\"none\">\n          <circle cx=\"17.0096\" cy=\"17.5439\" r=\"16.5945\" fill=\"#29252D\" />\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M13.4843 18.2501C13.5008 18.2493 13.5174 18.2489 13.5339 18.2489H20.1384C20.1549 18.2489 20.1714 18.2493 20.188 18.2501C22.501 18.3649 24.5513 19.7726 25.4901 21.8878C26.1644 23.2368 25.7884 24.5724 24.9275 25.4921C24.0937 26.3827 22.802 26.9145 21.4595 26.9145H12.2127C10.8707 26.9145 9.57941 26.3825 8.74582 25.4921C7.88499 24.5726 7.50858 23.2372 8.182 21.888C9.12087 19.7726 11.1712 18.365 13.4843 18.2501ZM13.56 20.2486C12.0044 20.3346 10.6283 21.2884 10.0022 22.7165C9.99443 22.7342 9.98617 22.7517 9.97741 22.7689C9.72674 23.2609 9.82034 23.7138 10.2057 24.1253C10.6239 24.5721 11.367 24.9147 12.2127 24.9147H21.4595C22.3061 24.9147 23.0495 24.572 23.4675 24.1253C23.8527 23.7141 23.9461 23.2616 23.6951 22.7694C23.6863 22.7521 23.6779 22.7343 23.67 22.7165C23.044 21.2884 21.6679 20.3346 20.1122 20.2486H13.56Z\"\n            fill=\"#5E5E5E\"\n          />\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M16.836 8.24993C15.1794 8.24993 13.8364 9.5929 13.8364 11.2495C13.8364 12.9062 15.1794 14.2492 16.836 14.2492C18.4927 14.2492 19.8356 12.9062 19.8356 11.2495C19.8356 10.454 19.5197 9.69103 18.9571 9.12849C18.3945 8.56595 17.6315 8.24993 16.836 8.24993ZM11.8367 11.2495C11.8367 8.48847 14.075 6.25018 16.836 6.25018C18.162 6.25018 19.4335 6.7769 20.3712 7.71446C21.3086 8.65202 21.8354 9.92363 21.8354 11.2495C21.8354 14.0107 19.5971 16.2489 16.836 16.2489C14.075 16.2489 11.8367 14.0107 11.8367 11.2495Z\"\n            fill=\"#5E5E5E\"\n          />\n        </svg>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".zoom-in{animation:fadeZoomIn .5s ease-in-out}.zoom-out{animation:fadeZoomOut .5s ease-in-out}.zoom-out.collapse{display:none!important}@keyframes fadeZoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}@keyframes fadeZoomIn{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.hide{max-height:0;overflow:hidden;opacity:0;transition:max-height .8s ease-in-out,opacity .8s ease-in-out}.show{max-height:200px;opacity:1;transition:max-height .8s ease-in-out,opacity .8s ease-in-out}:host{font-size:clamp(0px,var(--component-size, 1.5dvw),.75rem)}.overview{overflow:hidden;width:100%;max-width:var(--card-width, 100%);display:block;position:relative}.overview__collapse{--card-width: 15em}.overview__expand{--card-width: 100%}.overview__back-shadow{position:absolute;top:-15%;left:0%;height:130%;width:120%;display:flex;justify-content:center;z-index:0}.overview__back-shadow img{height:100%;width:100%;flex-shrink:0}.overview__container{z-index:2;position:relative;display:flex;align-items:center}.overview__progress-bar{height:var(--primary-profile-height, 15em)!important;width:var(--primary-profile-width, 15em)!important;flex-shrink:0;transition:all .5s}.overview__progress-bar--hidden .circle-progress__svg,.overview__progress-bar--hidden .circle-progress__image{opacity:0}.overview__comparison{display:flex;flex-direction:column;flex-grow:1;transform-origin:left center;margin:var(--secondary-profile-margin, 0 0 0 -10px)}.comparison__entity{font-family:Gilroy-Medium;display:flex;gap:1em}.comparison__label{display:flex;justify-content:center;align-items:center;max-width:10ch}.comparison__value{height:var(--match-percentage-value-height, 4em);width:var(--match-percentage-value-width, \"auto\");display:flex;align-items:center;justify-content:center}.comparison__value>span{font-size:var(--match-percentage-font-size, 3em)}.comparison__value>span.preferences{color:#fe3c72}.comparison__value>span.personality{color:#9c2b4b}.secondary-profile{margin-bottom:-5px}.secondary-profile__image{height:var(--secondary-profile-height, 7rem);width:var(--secondary-profile-width, 7rem);display:flex;align-items:center;margin-left:-3px}.default-empty-profile{padding:1px;border-radius:50%;background:radial-gradient(circle,#acacac 79%,#fff);display:flex;justify-content:center;align-items:center;position:relative;margin:0 10px}.default-empty-profile .loading-skeleton{position:absolute;top:0}.default-empty-profile .p-skeleton:after{background:linear-gradient(90deg,#fff0,#fff6,#fff0)}\n"] }]
-        }], propDecorators: { overview: [{
-                type: Input,
-                args: [{ required: true }]
-            }], meta: [{
-                type: Input
-            }], expand: [{
-                type: Input
-            }], loading: [{
-                type: Input
-            }], default: [{
-                type: Input
-            }], hideProgressBar: [{
-                type: Input
-            }], partialColors: [{
-                type: Input
-            }], showExternalPartialCircleProgress: [{
-                type: Input
-            }], maxValue: [{
-                type: Input
-            }], enableChangeOverview: [{
-                type: Input
-            }], sendConversationFlag: [{
-                type: Output
-            }] } });
-
-var AlertStatusFields;
-(function (AlertStatusFields) {
-    AlertStatusFields["upcomingDates"] = "upcomingDates";
-    AlertStatusFields["compatibilityProfileTrait"] = "compatibilityProfileTrait";
-    AlertStatusFields["compatibilityProfileSpider"] = "compatibilityProfileSpider";
-    AlertStatusFields["chatHandoff"] = "chatHandoff";
-    AlertStatusFields["chatProgress"] = "chatProgress";
-    AlertStatusFields["chatMeetupAgenda"] = "chatMeetupAgenda";
-    AlertStatusFields["face"] = "face";
-})(AlertStatusFields || (AlertStatusFields = {}));
-
-var MatcherStatuses;
-(function (MatcherStatuses) {
-    MatcherStatuses["STATUS0"] = "no contact";
-    MatcherStatuses["STATUS1"] = "1st exchange";
-    MatcherStatuses["STATUS2"] = "2nd exchange";
-    MatcherStatuses["STATUS3"] = "3rd exchange";
-    MatcherStatuses["STATUS4"] = "2+ laughs";
-    MatcherStatuses["STATUS5"] = "idea signalled";
-    MatcherStatuses["STATUS6"] = "alt contact";
-    MatcherStatuses["STATUS7"] = "any romance";
-    MatcherStatuses["STATUS8"] = "locale confirmed";
-    MatcherStatuses["STATUS9"] = "time confirmed";
-    MatcherStatuses["STATUS10"] = "all followup";
-})(MatcherStatuses || (MatcherStatuses = {}));
-
-const MATCHER_STATUSES = [
-    {
-        title: '1st',
-        subtitle: 'exchange',
-        value: MatcherStatuses.STATUS1,
-    },
-    {
-        title: '2nd',
-        subtitle: 'exchange',
-        value: MatcherStatuses.STATUS2,
-    },
-    {
-        title: '3rd',
-        subtitle: 'exchange',
-        value: MatcherStatuses.STATUS3,
-    },
-    {
-        title: '2+',
-        subtitle: 'laughs',
-        value: MatcherStatuses.STATUS4,
-    },
-    {
-        title: 'idea',
-        subtitle: 'signalled',
-        value: MatcherStatuses.STATUS5,
-    },
-    {
-        title: 'alt',
-        subtitle: 'contact',
-        value: MatcherStatuses.STATUS6,
-    },
-    {
-        title: 'any',
-        subtitle: 'romance',
-        value: MatcherStatuses.STATUS7,
-    },
-    {
-        title: 'locale',
-        subtitle: 'confirmed',
-        value: MatcherStatuses.STATUS8,
-    },
-    {
-        title: 'time',
-        subtitle: 'confirmed',
-        value: MatcherStatuses.STATUS9,
-    },
-    {
-        title: 'all',
-        subtitle: 'followup',
-        value: MatcherStatuses.STATUS10,
-    },
-];
+        this.showIllumination = map.showIllumination;
+        this.showValueProportionLabel = map.showValueProportionLabel;
+        this.innerPartialColors = map.innerPartialColors;
+        this.basedOn = basedOn ?? map.basedOn;
+        this.innerState = preset;
+        if (preset === INNER_CIRCLE_STATE.Unresponsive) {
+            this.sendConversationFlag.emit({
+                timestamp: new Date(),
+                prospectId: this.overview._id,
+                basedOn: this.basedOn,
+                flag: CONVERSATION_FLAG.UNRESPONSIVE,
+            });
+        }
+        else if (preset === INNER_CIRCLE_STATE.Redelegation) {
+            this.sendConversationFlag.emit({
+                timestamp: new Date(),
+                prospectId: this.overview._id,
+                basedOn: this.basedOn,
+                flag: CONVERSATION_FLAG.REDELEGATION,
+            });
+        }
+        this.buildCircleOpts();
+    }
+    buildCircleOpts() {
+        this.circleOpts = {
+            value: this.overview.preferences + this.overview.personality,
+            max: this.maxValue,
+            partialColors: this.partialColors,
+            showExternalPartialCircleProgress: this.showExternalPartialCircleProgress && this.expand,
+            showValueProportionLabel: this.showValueProportionLabel,
+            hasNotification: this.meta?.waitingAnswer,
+            inner: {
+                value: this.innerValue,
+                max: this.innerMaxValue,
+                colors: this.innerPartialColors,
+                state: this.innerState,
+                showIllumination: this.showIllumination,
+            },
+            imageUrl: this.overview.primary?.src,
+            suffix: '',
+            prefix: '',
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibClientMatchOverviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LibClientMatchOverviewComponent, isStandalone: true, selector: "lib-client-match-overview", inputs: { overview: "overview", meta: "meta", expand: "expand", loading: "loading", default: "default", hideProgressBar: "hideProgressBar", partialColors: "partialColors", showExternalPartialCircleProgress: "showExternalPartialCircleProgress", maxValue: "maxValue", enableChangeOverview: "enableChangeOverview" }, outputs: { sendConversationFlag: "sendConversationFlag" }, usesOnChanges: true, ngImport: i0, template: "@if (!default && imageLoader$ | async) {\n  <div class=\"overview\" [ngClass]=\"{ overview__expand: expand, overview__collapse: !expand }\">\n    <div class=\"overview__container\">\n      <lib-circle-progress\n        class=\"overview__progress-bar\"\n        [ngClass]=\"{ 'overview__progress-bar--hidden': hideProgressBar && !expand }\"\n        [variable]=\"circleVariable.Partial\"\n        [config]=\"circleOpts\"\n      ></lib-circle-progress>\n      <!-- details next to the circle image -->\n      @if (expand) {\n        <div class=\"overview__comparison comparison\">\n          <div class=\"comparison__entity secondary-profile\">\n            <div class=\"secondary-profile__image\">\n              <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 100 100\">\n                <circle r=\"50\" cx=\"50\" cy=\"50\" fill=\"#28252D\" />\n                <image [attr.mask]=\"'url(#' + imagePathId + ')'\" [attr.href]=\"overview.secondary.src\" height=\"80\" width=\"80\" x=\"10\" y=\"10\" />\n                <defs>\n                  <mask [attr.id]=\"imagePathId\">\n                    <rect x=\"0\" y=\"0\" height=\"100\" width=\"100\" fill=\"black\" />\n                    <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"white\" />\n                  </mask>\n                </defs>\n              </svg>\n            </div>\n            <div class=\"comparison__label\">{{ overview.secondary.name }}</div>\n          </div>\n          <div class=\"comparison__entity\">\n            <div class=\"comparison__value\">\n              <span class=\"preferences\">{{ overview.preferences }}%</span>\n            </div>\n            <div class=\"comparison__label\">{{ 'CLIENT_MATCH_OVERVIEW.PREFERENCES_MATCH' | translate }}</div>\n          </div>\n          <div class=\"comparison__entity\">\n            <div class=\"comparison__value\">\n              <span class=\"personality\">{{ overview.personality }}%</span>\n            </div>\n            <div class=\"comparison__label\">{{ 'CLIENT_MATCH_OVERVIEW.PERSONALITY_MATCH' | translate }}</div>\n          </div>\n        </div>\n      }\n    </div>\n    <!-- shadow on all the component (circle image and texts) -->\n    @if (expand) {\n      <div class=\"overview__back-shadow\">\n        <img src=\"assets/client-match-overview/background-eclipse.svg\" />\n      </div>\n    }\n  </div>\n} @else if (loading) {\n  <div class=\"overview\" part=\"loading\">\n    <div class=\"overview__container\">\n      <div class=\"default-empty-profile\">\n        <p-skeleton shape=\"circle\" size=\"3rem\" class=\"loading-skeleton\" />\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"34\" height=\"35\" viewBox=\"0 0 34 35\" fill=\"none\">\n          <circle cx=\"17.0096\" cy=\"17.5439\" r=\"16.5945\" fill=\"#29252D\" />\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M13.4843 18.2501C13.5008 18.2493 13.5174 18.2489 13.5339 18.2489H20.1384C20.1549 18.2489 20.1714 18.2493 20.188 18.2501C22.501 18.3649 24.5513 19.7726 25.4901 21.8878C26.1644 23.2368 25.7884 24.5724 24.9275 25.4921C24.0937 26.3827 22.802 26.9145 21.4595 26.9145H12.2127C10.8707 26.9145 9.57941 26.3825 8.74582 25.4921C7.88499 24.5726 7.50858 23.2372 8.182 21.888C9.12087 19.7726 11.1712 18.365 13.4843 18.2501ZM13.56 20.2486C12.0044 20.3346 10.6283 21.2884 10.0022 22.7165C9.99443 22.7342 9.98617 22.7517 9.97741 22.7689C9.72674 23.2609 9.82034 23.7138 10.2057 24.1253C10.6239 24.5721 11.367 24.9147 12.2127 24.9147H21.4595C22.3061 24.9147 23.0495 24.572 23.4675 24.1253C23.8527 23.7141 23.9461 23.2616 23.6951 22.7694C23.6863 22.7521 23.6779 22.7343 23.67 22.7165C23.044 21.2884 21.6679 20.3346 20.1122 20.2486H13.56Z\"\n            fill=\"#5E5E5E\"\n          />\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M16.836 8.24993C15.1794 8.24993 13.8364 9.5929 13.8364 11.2495C13.8364 12.9062 15.1794 14.2492 16.836 14.2492C18.4927 14.2492 19.8356 12.9062 19.8356 11.2495C19.8356 10.454 19.5197 9.69103 18.9571 9.12849C18.3945 8.56595 17.6315 8.24993 16.836 8.24993ZM11.8367 11.2495C11.8367 8.48847 14.075 6.25018 16.836 6.25018C18.162 6.25018 19.4335 6.7769 20.3712 7.71446C21.3086 8.65202 21.8354 9.92363 21.8354 11.2495C21.8354 14.0107 19.5971 16.2489 16.836 16.2489C14.075 16.2489 11.8367 14.0107 11.8367 11.2495Z\"\n            fill=\"#5E5E5E\"\n          />\n        </svg>\n      </div>\n    </div>\n  </div>\n} @else if (default || !overview.primary) {\n  <div class=\"overview\">\n    <div class=\"overview__container\">\n      <div class=\"default-empty-profile\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"34\" height=\"35\" viewBox=\"0 0 34 35\" fill=\"none\">\n          <circle cx=\"17.0096\" cy=\"17.5439\" r=\"16.5945\" fill=\"#29252D\" />\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M13.4843 18.2501C13.5008 18.2493 13.5174 18.2489 13.5339 18.2489H20.1384C20.1549 18.2489 20.1714 18.2493 20.188 18.2501C22.501 18.3649 24.5513 19.7726 25.4901 21.8878C26.1644 23.2368 25.7884 24.5724 24.9275 25.4921C24.0937 26.3827 22.802 26.9145 21.4595 26.9145H12.2127C10.8707 26.9145 9.57941 26.3825 8.74582 25.4921C7.88499 24.5726 7.50858 23.2372 8.182 21.888C9.12087 19.7726 11.1712 18.365 13.4843 18.2501ZM13.56 20.2486C12.0044 20.3346 10.6283 21.2884 10.0022 22.7165C9.99443 22.7342 9.98617 22.7517 9.97741 22.7689C9.72674 23.2609 9.82034 23.7138 10.2057 24.1253C10.6239 24.5721 11.367 24.9147 12.2127 24.9147H21.4595C22.3061 24.9147 23.0495 24.572 23.4675 24.1253C23.8527 23.7141 23.9461 23.2616 23.6951 22.7694C23.6863 22.7521 23.6779 22.7343 23.67 22.7165C23.044 21.2884 21.6679 20.3346 20.1122 20.2486H13.56Z\"\n            fill=\"#5E5E5E\"\n          />\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M16.836 8.24993C15.1794 8.24993 13.8364 9.5929 13.8364 11.2495C13.8364 12.9062 15.1794 14.2492 16.836 14.2492C18.4927 14.2492 19.8356 12.9062 19.8356 11.2495C19.8356 10.454 19.5197 9.69103 18.9571 9.12849C18.3945 8.56595 17.6315 8.24993 16.836 8.24993ZM11.8367 11.2495C11.8367 8.48847 14.075 6.25018 16.836 6.25018C18.162 6.25018 19.4335 6.7769 20.3712 7.71446C21.3086 8.65202 21.8354 9.92363 21.8354 11.2495C21.8354 14.0107 19.5971 16.2489 16.836 16.2489C14.075 16.2489 11.8367 14.0107 11.8367 11.2495Z\"\n            fill=\"#5E5E5E\"\n          />\n        </svg>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".zoom-in{animation:fadeZoomIn .5s ease-in-out}.zoom-out{animation:fadeZoomOut .5s ease-in-out}.zoom-out.collapse{display:none!important}@keyframes fadeZoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}@keyframes fadeZoomIn{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.hide{max-height:0;overflow:hidden;opacity:0;transition:max-height .8s ease-in-out,opacity .8s ease-in-out}.show{max-height:200px;opacity:1;transition:max-height .8s ease-in-out,opacity .8s ease-in-out}:host{font-size:clamp(0px,var(--component-size, 1.5dvw),.75rem)}.overview{overflow:hidden;width:100%;max-width:var(--card-width, 100%);display:block;position:relative}.overview__collapse{--card-width: 15em}.overview__expand{--card-width: 100%}.overview__back-shadow{position:absolute;top:-15%;left:0%;height:130%;width:120%;display:flex;justify-content:center;z-index:0}.overview__back-shadow img{height:100%;width:100%;flex-shrink:0}.overview__container{z-index:2;position:relative;display:flex;align-items:center}.overview__progress-bar{height:var(--primary-profile-height, 15em)!important;width:var(--primary-profile-width, 15em)!important;flex-shrink:0;transition:all .5s}.overview__progress-bar--hidden .circle-progress__svg,.overview__progress-bar--hidden .circle-progress__image{opacity:0}.overview__comparison{display:flex;flex-direction:column;flex-grow:1;transform-origin:left center;margin:var(--secondary-profile-margin, 0 0 0 -10px)}.comparison__entity{font-family:Gilroy-Medium;display:flex;gap:1em}.comparison__label{display:flex;justify-content:center;align-items:center;max-width:10ch}.comparison__value{height:var(--match-percentage-value-height, 4em);width:var(--match-percentage-value-width, \"auto\");display:flex;align-items:center;justify-content:center}.comparison__value>span{font-size:var(--match-percentage-font-size, 3em)}.comparison__value>span.preferences{color:#fe3c72}.comparison__value>span.personality{color:#9c2b4b}.secondary-profile{margin-bottom:-5px}.secondary-profile__image{height:var(--secondary-profile-height, 7rem);width:var(--secondary-profile-width, 7rem);display:flex;align-items:center;margin-left:-3px}.default-empty-profile{padding:1px;border-radius:50%;background:radial-gradient(circle,#acacac 79%,#fff);display:flex;justify-content:center;align-items:center;position:relative;margin:0 10px}.default-empty-profile .loading-skeleton{position:absolute;top:0}.default-empty-profile .p-skeleton:after{background:linear-gradient(90deg,#fff0,#fff6,#fff0)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: CircleProgressModule }, { kind: "component", type: CircleProgressComponent, selector: "lib-circle-progress", inputs: ["variable", "config"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2$2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibClientMatchOverviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-client-match-overview', encapsulation: ViewEncapsulation.ShadowDom, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, CircleProgressModule, TranslateModule, SkeletonModule], template: "@if (!default && imageLoader$ | async) {\n  <div class=\"overview\" [ngClass]=\"{ overview__expand: expand, overview__collapse: !expand }\">\n    <div class=\"overview__container\">\n      <lib-circle-progress\n        class=\"overview__progress-bar\"\n        [ngClass]=\"{ 'overview__progress-bar--hidden': hideProgressBar && !expand }\"\n        [variable]=\"circleVariable.Partial\"\n        [config]=\"circleOpts\"\n      ></lib-circle-progress>\n      <!-- details next to the circle image -->\n      @if (expand) {\n        <div class=\"overview__comparison comparison\">\n          <div class=\"comparison__entity secondary-profile\">\n            <div class=\"secondary-profile__image\">\n              <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 100 100\">\n                <circle r=\"50\" cx=\"50\" cy=\"50\" fill=\"#28252D\" />\n                <image [attr.mask]=\"'url(#' + imagePathId + ')'\" [attr.href]=\"overview.secondary.src\" height=\"80\" width=\"80\" x=\"10\" y=\"10\" />\n                <defs>\n                  <mask [attr.id]=\"imagePathId\">\n                    <rect x=\"0\" y=\"0\" height=\"100\" width=\"100\" fill=\"black\" />\n                    <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"white\" />\n                  </mask>\n                </defs>\n              </svg>\n            </div>\n            <div class=\"comparison__label\">{{ overview.secondary.name }}</div>\n          </div>\n          <div class=\"comparison__entity\">\n            <div class=\"comparison__value\">\n              <span class=\"preferences\">{{ overview.preferences }}%</span>\n            </div>\n            <div class=\"comparison__label\">{{ 'CLIENT_MATCH_OVERVIEW.PREFERENCES_MATCH' | translate }}</div>\n          </div>\n          <div class=\"comparison__entity\">\n            <div class=\"comparison__value\">\n              <span class=\"personality\">{{ overview.personality }}%</span>\n            </div>\n            <div class=\"comparison__label\">{{ 'CLIENT_MATCH_OVERVIEW.PERSONALITY_MATCH' | translate }}</div>\n          </div>\n        </div>\n      }\n    </div>\n    <!-- shadow on all the component (circle image and texts) -->\n    @if (expand) {\n      <div class=\"overview__back-shadow\">\n        <img src=\"assets/client-match-overview/background-eclipse.svg\" />\n      </div>\n    }\n  </div>\n} @else if (loading) {\n  <div class=\"overview\" part=\"loading\">\n    <div class=\"overview__container\">\n      <div class=\"default-empty-profile\">\n        <p-skeleton shape=\"circle\" size=\"3rem\" class=\"loading-skeleton\" />\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"34\" height=\"35\" viewBox=\"0 0 34 35\" fill=\"none\">\n          <circle cx=\"17.0096\" cy=\"17.5439\" r=\"16.5945\" fill=\"#29252D\" />\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M13.4843 18.2501C13.5008 18.2493 13.5174 18.2489 13.5339 18.2489H20.1384C20.1549 18.2489 20.1714 18.2493 20.188 18.2501C22.501 18.3649 24.5513 19.7726 25.4901 21.8878C26.1644 23.2368 25.7884 24.5724 24.9275 25.4921C24.0937 26.3827 22.802 26.9145 21.4595 26.9145H12.2127C10.8707 26.9145 9.57941 26.3825 8.74582 25.4921C7.88499 24.5726 7.50858 23.2372 8.182 21.888C9.12087 19.7726 11.1712 18.365 13.4843 18.2501ZM13.56 20.2486C12.0044 20.3346 10.6283 21.2884 10.0022 22.7165C9.99443 22.7342 9.98617 22.7517 9.97741 22.7689C9.72674 23.2609 9.82034 23.7138 10.2057 24.1253C10.6239 24.5721 11.367 24.9147 12.2127 24.9147H21.4595C22.3061 24.9147 23.0495 24.572 23.4675 24.1253C23.8527 23.7141 23.9461 23.2616 23.6951 22.7694C23.6863 22.7521 23.6779 22.7343 23.67 22.7165C23.044 21.2884 21.6679 20.3346 20.1122 20.2486H13.56Z\"\n            fill=\"#5E5E5E\"\n          />\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M16.836 8.24993C15.1794 8.24993 13.8364 9.5929 13.8364 11.2495C13.8364 12.9062 15.1794 14.2492 16.836 14.2492C18.4927 14.2492 19.8356 12.9062 19.8356 11.2495C19.8356 10.454 19.5197 9.69103 18.9571 9.12849C18.3945 8.56595 17.6315 8.24993 16.836 8.24993ZM11.8367 11.2495C11.8367 8.48847 14.075 6.25018 16.836 6.25018C18.162 6.25018 19.4335 6.7769 20.3712 7.71446C21.3086 8.65202 21.8354 9.92363 21.8354 11.2495C21.8354 14.0107 19.5971 16.2489 16.836 16.2489C14.075 16.2489 11.8367 14.0107 11.8367 11.2495Z\"\n            fill=\"#5E5E5E\"\n          />\n        </svg>\n      </div>\n    </div>\n  </div>\n} @else if (default || !overview.primary) {\n  <div class=\"overview\">\n    <div class=\"overview__container\">\n      <div class=\"default-empty-profile\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"34\" height=\"35\" viewBox=\"0 0 34 35\" fill=\"none\">\n          <circle cx=\"17.0096\" cy=\"17.5439\" r=\"16.5945\" fill=\"#29252D\" />\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M13.4843 18.2501C13.5008 18.2493 13.5174 18.2489 13.5339 18.2489H20.1384C20.1549 18.2489 20.1714 18.2493 20.188 18.2501C22.501 18.3649 24.5513 19.7726 25.4901 21.8878C26.1644 23.2368 25.7884 24.5724 24.9275 25.4921C24.0937 26.3827 22.802 26.9145 21.4595 26.9145H12.2127C10.8707 26.9145 9.57941 26.3825 8.74582 25.4921C7.88499 24.5726 7.50858 23.2372 8.182 21.888C9.12087 19.7726 11.1712 18.365 13.4843 18.2501ZM13.56 20.2486C12.0044 20.3346 10.6283 21.2884 10.0022 22.7165C9.99443 22.7342 9.98617 22.7517 9.97741 22.7689C9.72674 23.2609 9.82034 23.7138 10.2057 24.1253C10.6239 24.5721 11.367 24.9147 12.2127 24.9147H21.4595C22.3061 24.9147 23.0495 24.572 23.4675 24.1253C23.8527 23.7141 23.9461 23.2616 23.6951 22.7694C23.6863 22.7521 23.6779 22.7343 23.67 22.7165C23.044 21.2884 21.6679 20.3346 20.1122 20.2486H13.56Z\"\n            fill=\"#5E5E5E\"\n          />\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M16.836 8.24993C15.1794 8.24993 13.8364 9.5929 13.8364 11.2495C13.8364 12.9062 15.1794 14.2492 16.836 14.2492C18.4927 14.2492 19.8356 12.9062 19.8356 11.2495C19.8356 10.454 19.5197 9.69103 18.9571 9.12849C18.3945 8.56595 17.6315 8.24993 16.836 8.24993ZM11.8367 11.2495C11.8367 8.48847 14.075 6.25018 16.836 6.25018C18.162 6.25018 19.4335 6.7769 20.3712 7.71446C21.3086 8.65202 21.8354 9.92363 21.8354 11.2495C21.8354 14.0107 19.5971 16.2489 16.836 16.2489C14.075 16.2489 11.8367 14.0107 11.8367 11.2495Z\"\n            fill=\"#5E5E5E\"\n          />\n        </svg>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".zoom-in{animation:fadeZoomIn .5s ease-in-out}.zoom-out{animation:fadeZoomOut .5s ease-in-out}.zoom-out.collapse{display:none!important}@keyframes fadeZoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}@keyframes fadeZoomIn{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.hide{max-height:0;overflow:hidden;opacity:0;transition:max-height .8s ease-in-out,opacity .8s ease-in-out}.show{max-height:200px;opacity:1;transition:max-height .8s ease-in-out,opacity .8s ease-in-out}:host{font-size:clamp(0px,var(--component-size, 1.5dvw),.75rem)}.overview{overflow:hidden;width:100%;max-width:var(--card-width, 100%);display:block;position:relative}.overview__collapse{--card-width: 15em}.overview__expand{--card-width: 100%}.overview__back-shadow{position:absolute;top:-15%;left:0%;height:130%;width:120%;display:flex;justify-content:center;z-index:0}.overview__back-shadow img{height:100%;width:100%;flex-shrink:0}.overview__container{z-index:2;position:relative;display:flex;align-items:center}.overview__progress-bar{height:var(--primary-profile-height, 15em)!important;width:var(--primary-profile-width, 15em)!important;flex-shrink:0;transition:all .5s}.overview__progress-bar--hidden .circle-progress__svg,.overview__progress-bar--hidden .circle-progress__image{opacity:0}.overview__comparison{display:flex;flex-direction:column;flex-grow:1;transform-origin:left center;margin:var(--secondary-profile-margin, 0 0 0 -10px)}.comparison__entity{font-family:Gilroy-Medium;display:flex;gap:1em}.comparison__label{display:flex;justify-content:center;align-items:center;max-width:10ch}.comparison__value{height:var(--match-percentage-value-height, 4em);width:var(--match-percentage-value-width, \"auto\");display:flex;align-items:center;justify-content:center}.comparison__value>span{font-size:var(--match-percentage-font-size, 3em)}.comparison__value>span.preferences{color:#fe3c72}.comparison__value>span.personality{color:#9c2b4b}.secondary-profile{margin-bottom:-5px}.secondary-profile__image{height:var(--secondary-profile-height, 7rem);width:var(--secondary-profile-width, 7rem);display:flex;align-items:center;margin-left:-3px}.default-empty-profile{padding:1px;border-radius:50%;background:radial-gradient(circle,#acacac 79%,#fff);display:flex;justify-content:center;align-items:center;position:relative;margin:0 10px}.default-empty-profile .loading-skeleton{position:absolute;top:0}.default-empty-profile .p-skeleton:after{background:linear-gradient(90deg,#fff0,#fff6,#fff0)}\n"] }]
+        }], propDecorators: { overview: [{
+                type: Input,
+                args: [{ required: true }]
+            }], meta: [{
+                type: Input
+            }], expand: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], default: [{
+                type: Input
+            }], hideProgressBar: [{
+                type: Input
+            }], partialColors: [{
+                type: Input
+            }], showExternalPartialCircleProgress: [{
+                type: Input
+            }], maxValue: [{
+                type: Input
+            }], enableChangeOverview: [{
+                type: Input
+            }], sendConversationFlag: [{
+                type: Output
+            }] } });
 
 class IsStatusIncludedPipe {
     transform(status, index) {
@@ -3031,6 +3019,26 @@ const circleData = [
         filter: 'url(#innerWhiteCircleBlurEffect)',
     },
 ];
+
+const defsF = [
+    {
+        id: 'innerCircleBlurEffect',
+        x: '-40%',
+        y: '-40%',
+        height: '200%',
+        width: '200%',
+        feGaussianTags: [{ in: 'SourceGraphic', stdDeviation: '12' }],
+    },
+    {
+        id: 'innerWhiteCircleBlurEffect',
+        x: '-40%',
+        y: '-40%',
+        height: '200%',
+        width: '200%',
+        feGaussianTags: [{ in: 'SourceGraphic', stdDeviation: '10' }],
+    },
+];
+
 const defsLG = [
     {
         id: 'circleBorderRadiant',
@@ -3068,24 +3076,7 @@ const defsLG = [
         ],
     },
 ];
-const defsF = [
-    {
-        id: 'innerCircleBlurEffect',
-        x: '-40%',
-        y: '-40%',
-        height: '200%',
-        width: '200%',
-        feGaussianTags: [{ in: 'SourceGraphic', stdDeviation: '12' }],
-    },
-    {
-        id: 'innerWhiteCircleBlurEffect',
-        x: '-40%',
-        y: '-40%',
-        height: '200%',
-        width: '200%',
-        feGaussianTags: [{ in: 'SourceGraphic', stdDeviation: '10' }],
-    },
-];
+
 const defsRG = [
     {
         id: 'innerCircleRadialEffect',
@@ -3586,192 +3577,70 @@ class LibDashboardSwipeableTabsComponent {
         Object.assign(this.thumbSwiper.nativeElement, swiperParams);
         this.thumbSwiper.nativeElement.initialize();
     }
-    initMainSwiper() {
-        const ref = this;
-        const swiperParams = {
-            ...this.mainSwiperOptions,
-            initialSlide: this.activeIndex,
-            autoHeight: true,
-            thumbs: {
-                swiper: this.thumbsSwiperInstance,
-            },
-            on: {
-                init(swiper) {
-                    ref.mainSwiperInstance = swiper;
-                },
-                slideChange(swiper) {
-                    if (ref.activeIndex !== swiper?.activeIndex) {
-                        ref.activeIndex = swiper?.activeIndex;
-                        ref.activeIndexChange.emit(swiper?.activeIndex);
-                    }
-                },
-            },
-        };
-        Object.assign(this.mainSwiper.nativeElement, swiperParams);
-        this.mainSwiper.nativeElement.initialize();
-        requestAnimationFrame(() => {
-            ref.mainSwiperInstance?.update();
-            ref.thumbsSwiperInstance?.update();
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibDashboardSwipeableTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: LibDashboardSwipeableTabsComponent, isStandalone: true, selector: "lib-dashboard-swipeable-tabs", inputs: { thumbsSwiperOptions: "thumbsSwiperOptions", mainSwiperOptions: "mainSwiperOptions", activeIndex: "activeIndex", bottomThumbs: "bottomThumbs", slideContentMaxHeight: "slideContentMaxHeight", mainSwiperHeight: "mainSwiperHeight", subMainSwiperHeight: "subMainSwiperHeight", thumbsSwiperHeight: "thumbsSwiperHeight", generalSwiperHeight: "generalSwiperHeight" }, outputs: { activeIndexChange: "activeIndexChange" }, queries: [{ propertyName: "thumbSlides", first: true, predicate: ["thumbSlides"], descendants: true }], viewQueries: [{ propertyName: "thumbSwiper", first: true, predicate: ["thumbSwiper"], descendants: true }, { propertyName: "mainSwiper", first: true, predicate: ["mainSwiper"], descendants: true }], ngImport: i0, template: "<div class=\"swipeable-tabs-container\" [class.bottom-thumbs]=\"bottomThumbs\" [ngStyle]=\"{ height: generalSwiperHeight }\">\n  <!-- Thumbnail Swiper -->\n  <swiper-container #thumbSwiper init=\"false\" class=\"thumb-swiper container-sides-shadow\" [ngStyle]=\"{ height: thumbsSwiperHeight }\">\n    <ng-content select=\"[thumb-slides]\"></ng-content>\n  </swiper-container>\n\n  <!-- Main Swiper -->\n  <div class=\"swiper-container\" class=\"main-swiper\" [style.max-height]=\"slideContentMaxHeight\" [ngStyle]=\"{ height: mainSwiperHeight }\">\n    <swiper-container #mainSwiper init=\"false\" class=\"main-swiper\" [class.container-sides-shadow]=\"activeIndex !== 0\" [ngStyle]=\"{ height: subMainSwiperHeight }\">\n      <ng-content select=\"[main-slides]\"></ng-content>\n    </swiper-container>\n  </div>\n</div>\n", styles: [".swipeable-tabs-container{position:relative;display:flex;width:100%;flex-direction:column}.swipeable-tabs-container.bottom-thumbs{flex-direction:column-reverse}.swipeable-tabs-container swiper-container{position:relative;display:block;overflow:auto;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TranslateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibDashboardSwipeableTabsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-dashboard-swipeable-tabs', imports: [CommonModule, TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"swipeable-tabs-container\" [class.bottom-thumbs]=\"bottomThumbs\" [ngStyle]=\"{ height: generalSwiperHeight }\">\n  <!-- Thumbnail Swiper -->\n  <swiper-container #thumbSwiper init=\"false\" class=\"thumb-swiper container-sides-shadow\" [ngStyle]=\"{ height: thumbsSwiperHeight }\">\n    <ng-content select=\"[thumb-slides]\"></ng-content>\n  </swiper-container>\n\n  <!-- Main Swiper -->\n  <div class=\"swiper-container\" class=\"main-swiper\" [style.max-height]=\"slideContentMaxHeight\" [ngStyle]=\"{ height: mainSwiperHeight }\">\n    <swiper-container #mainSwiper init=\"false\" class=\"main-swiper\" [class.container-sides-shadow]=\"activeIndex !== 0\" [ngStyle]=\"{ height: subMainSwiperHeight }\">\n      <ng-content select=\"[main-slides]\"></ng-content>\n    </swiper-container>\n  </div>\n</div>\n", styles: [".swipeable-tabs-container{position:relative;display:flex;width:100%;flex-direction:column}.swipeable-tabs-container.bottom-thumbs{flex-direction:column-reverse}.swipeable-tabs-container swiper-container{position:relative;display:block;overflow:auto;width:100%}\n"] }]
-        }], propDecorators: { thumbSwiper: [{
-                type: ViewChild,
-                args: ['thumbSwiper', { static: false }]
-            }], mainSwiper: [{
-                type: ViewChild,
-                args: ['mainSwiper', { static: false }]
-            }], thumbSlides: [{
-                type: ContentChild,
-                args: ['thumbSlides', { static: false }]
-            }], thumbsSwiperOptions: [{
-                type: Input
-            }], mainSwiperOptions: [{
-                type: Input
-            }], activeIndex: [{
-                type: Input
-            }], bottomThumbs: [{
-                type: Input
-            }], slideContentMaxHeight: [{
-                type: Input
-            }], mainSwiperHeight: [{
-                type: Input
-            }], subMainSwiperHeight: [{
-                type: Input
-            }], thumbsSwiperHeight: [{
-                type: Input
-            }], generalSwiperHeight: [{
-                type: Input
-            }], activeIndexChange: [{
-                type: Output
-            }] } });
-
-var ClientHomeComponent;
-(function (ClientHomeComponent) {
-    ClientHomeComponent["ChatCompatibility"] = "ChatCompatibility";
-    ClientHomeComponent["ChatHandoff"] = "ChatHandoff";
-    ClientHomeComponent["ChatScheduler"] = "ChatScheduler";
-    ClientHomeComponent["ClientMatchSpiderChart"] = "ClientMatchSpiderChart";
-    ClientHomeComponent["ClientMatchTraitChart"] = "ClientMatchTraitChart";
-})(ClientHomeComponent || (ClientHomeComponent = {}));
-
-const defaultClientHomeConfig = {
-    loading: {
-        clientMatches: true,
-    },
-    default: false,
-    component: ClientHomeComponent.ChatHandoff,
-    activeIndex: 0,
-    slideContentMaxHeight: 'auto',
-    clientMatches$: of([]),
-    schedulers$: of([]),
-    polygonColors: [],
-    spiderConfig: null,
-    bottomThumbs: true,
-    includeTime: true,
-    maxLength: 300,
-    includeGifMessage: true,
-    startDate: new Date(),
-    endDate: endOfDay(addDays(new Date(), 6)),
-    emptyMessage: '',
-    displayBookedStatuses: false,
-    displayEmptyDays: true,
-    loading$: of(false),
-    alertStatus: {},
-    showValueProportionLabel: false,
-    hideProgressBar: false,
-};
-
-class ChatMetaPipe {
-    transform(clientMatches$, prospectId) {
-        return clientMatches$?.pipe(map((clientMatches) => clientMatches.map((c) => c.prospectData)), map((chats) => {
-            const chat = chats.find((c) => c.prospectId === prospectId);
-            if (!chat || chat.messages.length === 0) {
-                return {
-                    lastResponseTimestamp: null,
-                    firstAnswer: false,
-                    waitingAnswer: false,
-                    conversationFlags: chat?.conversationFlags,
-                };
-            }
-            // --- one forward/backward scan, no extra arrays ---
-            let lastUserIndex = -1;
-            for (let i = chat.messages.length - 1; i >= 0; i--) {
-                if (chat.messages[i].sender === SenderTypes.USER) {
-                    lastUserIndex = i;
-                    break;
-                }
-            }
-            let firstProspectMessageAfterMe = null;
-            let waitingAnswer = false;
-            if (lastUserIndex !== -1) {
-                for (let i = lastUserIndex + 1; i < chat.messages.length; i++) {
-                    if (chat.messages[i].sender === SenderTypes.OTHER) {
-                        firstProspectMessageAfterMe = chat.messages[i].timestamp;
-                        waitingAnswer = true; // prospect wrote last → waiting
-                        break;
-                    }
-                }
-            }
-            if (!waitingAnswer) {
-                // Either I haven't written, or I wrote last
-                const lastMsg = chat.messages[chat.messages.length - 1];
-                waitingAnswer = !!lastMsg && lastMsg.sender === SenderTypes.OTHER && lastUserIndex === -1;
-            }
-            return {
-                lastResponseTimestamp: firstProspectMessageAfterMe,
-                firstAnswer: lastUserIndex !== -1,
-                waitingAnswer,
-                conversationFlags: chat.conversationFlags,
-            };
-        }));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ChatMetaPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: ChatMetaPipe, isStandalone: true, name: "chatMeta" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ChatMetaPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'chatMeta',
-                    standalone: true,
-                    pure: true, // default, but being explicit
-                }]
-        }] });
-
-class GetColorByMatcherPipe {
-    transform(match, config) {
-        const defaultColors = progressDefaultColors;
-        if (!config?.spiderConfig?.datasets?.length) {
-            return defaultColors;
-        }
-        const currentMatch = config.spiderConfig.datasets.find((ma) => ma.title === match.primary?.name || ma.title === match.secondary?.name);
-        return currentMatch
-            ? {
-                primary: currentMatch.polygon_color.value,
-                secondary: currentMatch.polygon_color.value,
-                tertiary: currentMatch.polygon_color.value,
-                gradientPrimary: currentMatch.polygon_color.value,
-                gradientSecondary: currentMatch.polygon_color.value,
-                complete: currentMatch.polygon_color.value,
-                incomplete: currentMatch.polygon_color.value,
-            }
-            : defaultColors;
+    initMainSwiper() {
+        const ref = this;
+        const swiperParams = {
+            ...this.mainSwiperOptions,
+            initialSlide: this.activeIndex,
+            autoHeight: true,
+            thumbs: {
+                swiper: this.thumbsSwiperInstance,
+            },
+            on: {
+                init(swiper) {
+                    ref.mainSwiperInstance = swiper;
+                },
+                slideChange(swiper) {
+                    if (ref.activeIndex !== swiper?.activeIndex) {
+                        ref.activeIndex = swiper?.activeIndex;
+                        ref.activeIndexChange.emit(swiper?.activeIndex);
+                    }
+                },
+            },
+        };
+        Object.assign(this.mainSwiper.nativeElement, swiperParams);
+        this.mainSwiper.nativeElement.initialize();
+        requestAnimationFrame(() => {
+            ref.mainSwiperInstance?.update();
+            ref.thumbsSwiperInstance?.update();
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: GetColorByMatcherPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: GetColorByMatcherPipe, isStandalone: true, name: "getColorByMatcher" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibDashboardSwipeableTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: LibDashboardSwipeableTabsComponent, isStandalone: true, selector: "lib-dashboard-swipeable-tabs", inputs: { thumbsSwiperOptions: "thumbsSwiperOptions", mainSwiperOptions: "mainSwiperOptions", activeIndex: "activeIndex", bottomThumbs: "bottomThumbs", slideContentMaxHeight: "slideContentMaxHeight", mainSwiperHeight: "mainSwiperHeight", subMainSwiperHeight: "subMainSwiperHeight", thumbsSwiperHeight: "thumbsSwiperHeight", generalSwiperHeight: "generalSwiperHeight" }, outputs: { activeIndexChange: "activeIndexChange" }, queries: [{ propertyName: "thumbSlides", first: true, predicate: ["thumbSlides"], descendants: true }], viewQueries: [{ propertyName: "thumbSwiper", first: true, predicate: ["thumbSwiper"], descendants: true }, { propertyName: "mainSwiper", first: true, predicate: ["mainSwiper"], descendants: true }], ngImport: i0, template: "<div class=\"swipeable-tabs-container\" [class.bottom-thumbs]=\"bottomThumbs\" [ngStyle]=\"{ height: generalSwiperHeight }\">\n  <!-- Thumbnail Swiper -->\n  <swiper-container #thumbSwiper init=\"false\" class=\"thumb-swiper container-sides-shadow\" [ngStyle]=\"{ height: thumbsSwiperHeight }\">\n    <ng-content select=\"[thumb-slides]\"></ng-content>\n  </swiper-container>\n\n  <!-- Main Swiper -->\n  <div class=\"swiper-container\" class=\"main-swiper\" [style.max-height]=\"slideContentMaxHeight\" [ngStyle]=\"{ height: mainSwiperHeight }\">\n    <swiper-container #mainSwiper init=\"false\" class=\"main-swiper\" [class.container-sides-shadow]=\"activeIndex !== 0\" [ngStyle]=\"{ height: subMainSwiperHeight }\">\n      <ng-content select=\"[main-slides]\"></ng-content>\n    </swiper-container>\n  </div>\n</div>\n", styles: [".swipeable-tabs-container{position:relative;display:flex;width:100%;flex-direction:column}.swipeable-tabs-container.bottom-thumbs{flex-direction:column-reverse}.swipeable-tabs-container swiper-container{position:relative;display:block;overflow:auto;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TranslateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: GetColorByMatcherPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'getColorByMatcher',
-                    standalone: true,
-                }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibDashboardSwipeableTabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-dashboard-swipeable-tabs', imports: [CommonModule, TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"swipeable-tabs-container\" [class.bottom-thumbs]=\"bottomThumbs\" [ngStyle]=\"{ height: generalSwiperHeight }\">\n  <!-- Thumbnail Swiper -->\n  <swiper-container #thumbSwiper init=\"false\" class=\"thumb-swiper container-sides-shadow\" [ngStyle]=\"{ height: thumbsSwiperHeight }\">\n    <ng-content select=\"[thumb-slides]\"></ng-content>\n  </swiper-container>\n\n  <!-- Main Swiper -->\n  <div class=\"swiper-container\" class=\"main-swiper\" [style.max-height]=\"slideContentMaxHeight\" [ngStyle]=\"{ height: mainSwiperHeight }\">\n    <swiper-container #mainSwiper init=\"false\" class=\"main-swiper\" [class.container-sides-shadow]=\"activeIndex !== 0\" [ngStyle]=\"{ height: subMainSwiperHeight }\">\n      <ng-content select=\"[main-slides]\"></ng-content>\n    </swiper-container>\n  </div>\n</div>\n", styles: [".swipeable-tabs-container{position:relative;display:flex;width:100%;flex-direction:column}.swipeable-tabs-container.bottom-thumbs{flex-direction:column-reverse}.swipeable-tabs-container swiper-container{position:relative;display:block;overflow:auto;width:100%}\n"] }]
+        }], propDecorators: { thumbSwiper: [{
+                type: ViewChild,
+                args: ['thumbSwiper', { static: false }]
+            }], mainSwiper: [{
+                type: ViewChild,
+                args: ['mainSwiper', { static: false }]
+            }], thumbSlides: [{
+                type: ContentChild,
+                args: ['thumbSlides', { static: false }]
+            }], thumbsSwiperOptions: [{
+                type: Input
+            }], mainSwiperOptions: [{
+                type: Input
+            }], activeIndex: [{
+                type: Input
+            }], bottomThumbs: [{
+                type: Input
+            }], slideContentMaxHeight: [{
+                type: Input
+            }], mainSwiperHeight: [{
+                type: Input
+            }], subMainSwiperHeight: [{
+                type: Input
+            }], thumbsSwiperHeight: [{
+                type: Input
+            }], generalSwiperHeight: [{
+                type: Input
+            }], activeIndexChange: [{
+                type: Output
+            }] } });
 
 class LibClientHomeComponent {
     constructor(cdr) {
@@ -3941,7 +3810,7 @@ class LibClientHomeComponent {
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibClientHomeComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LibClientHomeComponent, isStandalone: true, selector: "lib-client-home", inputs: { config: "config" }, outputs: { activeIndexChange: "activeIndexChange", addMessage: "addMessage", getMessages: "getMessages", bookEvent: "bookEvent", removeSuggestion: "removeSuggestion", handleAppearPopup: "handleAppearPopup" }, ngImport: i0, template: "<div class=\"client-home\">\n  @if (components.ClientMatchSpiderChart === config?.component) {\n    <lib-spider-chart\n      [datasets]=\"config.spiderConfig?.datasets\"\n      [config]=\"config?.spiderConfig\"\n      [polygon_colors]=\"config?.polygonColors\"\n      [showChartInfo]=\"false\"\n    ></lib-spider-chart>\n  } @else if (components.ClientMatchTraitChart === config?.component) {\n    <div class=\"trait-visual-container\">\n      <tv-trait-visual\n        [nodeData]=\"traitVisualNodes\"\n        [attributeWeights]=\"traitVisualAttrWeights\"\n        [preferenceWeights]=\"traitVisualPrefWeights\"\n      ></tv-trait-visual>\n    </div>\n  }\n\n  <lib-dashboard-swipeable-tabs\n    [activeIndex]=\"config?.activeIndex\"\n    [slideContentMaxHeight]=\"config?.slideContentMaxHeight\"\n    [thumbsSwiperOptions]=\"{\n      virtual: {\n        enabled: clientMatches?.length > 5,\n        addSlidesAfter: 8,\n        addSlidesBefore: 8,\n        cache: true,\n      },\n      slidesPerView: 'auto',\n      grabCursor: true,\n      centeredSlides: false,\n      freeMode: {\n        enabled: true,\n        sticky: true,\n      },\n      observer: true,\n      observeParents: true,\n    }\"\n    [mainSwiperOptions]=\"{\n      virtual: {\n        enabled: clientMatches?.length > 5,\n        addSlidesAfter: 2,\n        addSlidesBefore: 2,\n        cache: true,\n      },\n      centeredSlides: true,\n      grabCursor: true,\n      keyboard: { enabled: true, onlyInViewport: false },\n      effect: 'coverflow',\n      spaceBetween: 5,\n      coverflowEffect: {\n        rotate: 0,\n        slideShadows: false,\n        scale: 0.9,\n      },\n      observer: true,\n      observeParents: true,\n    }\"\n    [bottomThumbs]=\"config?.bottomThumbs\"\n    [generalSwiperHeight]=\"'100%'\"\n    [enableMainSwiper]=\"true\"\n    (activeIndexChange)=\"onActiveIndexChange($event)\"\n    *ngIf=\"(config?.loading$ | async) !== true || config?.default; else empty\"\n  >\n    <ng-container thumb-slides>\n      @if (config.default || !clientMatches?.length) {\n        @for (match of defaultNumberOfItems; let i = $index; track match) {\n          <swiper-slide>\n            <lib-client-match-overview\n              [overview]=\"{}\"\n              [expand]=\"0\"\n              [class.lib-client-match-overview-expand]=\"true\"\n              (click)=\"(null)\"\n              [partialColors]=\"null\"\n              [default]=\"config.default\"\n              [showValueProportionLabel]=\"false\"\n              [hideProgressBar]=\"false\"\n            ></lib-client-match-overview>\n          </swiper-slide>\n        }\n      } @else {\n        @for (match of clientMatches; let i = $index; track match._id) {\n          <swiper-slide>\n            @if (config?.chatAdsTemplate && i === 0) {\n              <ng-container *ngTemplateOutlet=\"config?.chatAdsTemplate\"></ng-container>\n            }\n            <lib-client-match-overview\n              [overview]=\"match\"\n              [expand]=\"config?.activeIndex === i\"\n              [class.lib-client-match-overview-expand]=\"config?.activeIndex === i\"\n              [partialColors]=\"match | getColorByMatcher: config\"\n              [loading]=\"config?.loading?.clientMatches\"\n              [showValueProportionLabel]=\"config?.showValueProportionLabel\"\n              [hideProgressBar]=\"config?.hideProgressBar\"\n              [meta]=\"config?.clientMatches$ | chatMeta: match._id | async\"\n            ></lib-client-match-overview>\n          </swiper-slide>\n        }\n      }\n    </ng-container>\n    <ng-container main-slides>\n      @switch (config?.component) {\n        @case (components.ChatScheduler) {\n          @if (config.default || !(config?.schedulers$ | async)?.length) {\n            @for (item of defaultNumberOfItems; track $index) {\n              <swiper-slide class=\"scheduler\">\n                <div class=\"slide-content without-shadow\">\n                  <lib-scheduler [loading$]=\"config?.loading$\" [default]=\"config.default\" [adsTemplate]=\"config?.schedulerAdsTemplate\" style=\"width: 100%\"></lib-scheduler>\n                </div>\n              </swiper-slide>\n            }\n          } @else {\n            @for (scheduler of config?.schedulers$ | async; let i = $index; track scheduler) {\n              <swiper-slide class=\"scheduler\">\n                <div class=\"slide-content without-shadow\">\n                  <lib-scheduler\n                    [adsTemplate]=\"config?.schedulerAdsTemplate\"\n                    [events$]=\"scheduler.events$\"\n                    [loading$]=\"config?.loading$\"\n                    (bookEvent)=\"bookEvent.emit($event, scheduler.matchRequest)\"\n                    (removeSuggestion)=\"removeSuggestion.emit($event)\"\n                  ></lib-scheduler>\n                </div>\n              </swiper-slide>\n            }\n          }\n        }\n        @case (components.ChatHandoff) {\n          @if (config.default || !(config?.clientMatches$ | async)?.length) {\n            @for (chat of defaultNumberOfItems; let i = $index; track chat) {\n              <swiper-slide class=\"chat\">\n                <lib-matcher-statuses\n                  [inputValue]=\"config.chatInputValue\"\n                  [messages]=\"chat?.messages || []\"\n                  (sendMessage)=\"addMessageEmit($event, chat.prospectId, {})\"\n                  (getMessages)=\"getMessages.emit()\"\n                  [maxLength]=\"maxLength\"\n                  [responseTime]=\"chat?.prospectResponseTime || ''\"\n                  [hideStatuses]=\"config.hideStatuses\"\n                ></lib-matcher-statuses>\n              </swiper-slide>\n            }\n          } @else {\n            @for (clientMatch of config?.clientMatches$ | async; let i = $index; track clientMatch.prospectData.prospectId) {\n              <swiper-slide class=\"chat\">\n                <div class=\"slide-content\">\n                  <lib-matcher-statuses\n                    [status]=\"clientMatch.prospectData.status\"\n                    [adsTemplate]=\"config?.chatTabAdsTemplate\"\n                    [inputValue]=\"config.chatInputValue\"\n                    [messages]=\"clientMatch.prospectData?.messages || []\"\n                    [includeTime]=\"config?.includeTime\"\n                    [includeGifMessage]=\"config?.includeGifMessage\"\n                    (getMessages)=\"getMessages.emit()\"\n                    [maxLength]=\"config?.maxLength\"\n                    [responseTime]=\"clientMatch.prospectData.prospectResponseTime\"\n                    (sendMessage)=\"addMessageEmit($event, clientMatch.prospectData.prospectId, clientMatch.matchRequest)\"\n                    [hideStatuses]=\"config.hideStatuses\"\n                    [prospectJoinDate]=\"clientMatch.prospectData.prospectJoinDate\"\n                  ></lib-matcher-statuses>\n                </div>\n              </swiper-slide>\n            }\n          }\n        }\n      }\n    </ng-container>\n  </lib-dashboard-swipeable-tabs>\n\n  <ng-template #empty>\n    <lib-section-separator></lib-section-separator>\n    <div class=\"messsage f-lg f-gilroy-regular\">{{ emptyMessage }}</div>\n  </ng-template>\n</div>\n", styles: [":host{--match-percentage-font-size: 1.5em;--container-sides-shadow-width: 15px;--match-percentage-value-height: 3em;position:relative}.messsage{margin-bottom:40px}.padding-20{padding:20px!important}.client-home{height:100%}swiper-slide{display:flex;overflow:hidden;position:relative;align-items:center;min-height:120px}swiper-slide.chat.swiper-slide-next,swiper-slide.chat.swiper-slide-prev{opacity:.5}swiper-slide.chat.swiper-slide-next:before,swiper-slide.chat.swiper-slide-prev:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:gray;opacity:.4;border-radius:10px}lib-client-match-overview{cursor:pointer}lib-client-match-overview:not(.lib-client-match-overview-expand){--lib-circle-progress-height: 65%;--lib-circle-progress-width: 65%;--primary-profile-height: 7em;--primary-profile-width: 7em;margin:auto 6px}lib-client-match-overview.lib-client-match-overview-expand{--primary-profile-height: 11em;--primary-profile-width: 11em;--secondary-profile-height: 3em;--secondary-profile-width: 3em}.slide-content{height:auto;width:100%;position:relative;display:block;overflow:visible;padding:0 5px}.slide-content:not(.without-shadow){border-radius:10px;box-shadow:5.70371px 5.70371px 11.40741px #00000052 inset,-3.42222px -3.42222px 4.56296px #ffffff1a inset}.slide-content:has(lib-chat){padding:0}.slide-content lib-chat{--max-width-container: 100%}.slide-content .status-list{position:absolute;top:.9em;left:.5em;display:flex;flex-direction:column;gap:.32em}lib-client-match-overview{--secondary-profile-margin: 0 0 0 -5px}@media (min-width: 350px){.left-side{left:0!important}}@media (max-width: 768px){swiper-slide{min-height:80px}}@media (max-width: 768px){swiper-slide{min-height:80px}lib-client-match-overview{--secondary-profile-margin: 0 0 0 -5px}.trait-visual-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%;min-height:240px}.trait-visual-container tv-trait-visual{width:100%;height:100%;max-width:270px;max-height:240px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LibClientMatchOverviewComponent, selector: "lib-client-match-overview", inputs: ["overview", "meta", "expand", "loading", "default", "hideProgressBar", "partialColors", "showExternalPartialCircleProgress", "maxValue", "enableChangeOverview"], outputs: ["sendConversationFlag"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: LibDashboardSwipeableTabsComponent, selector: "lib-dashboard-swipeable-tabs", inputs: ["thumbsSwiperOptions", "mainSwiperOptions", "activeIndex", "bottomThumbs", "slideContentMaxHeight", "mainSwiperHeight", "subMainSwiperHeight", "thumbsSwiperHeight", "generalSwiperHeight"], outputs: ["activeIndexChange"] }, { kind: "ngmodule", type: LibChatComponentModule }, { kind: "component", type: LibSchedulerComponent, selector: "lib-scheduler", inputs: ["adsTemplate", "loading$", "emptyMessage", "displayBookedStatuses", "displayEmptyDays", "events$", "startDate", "endDate", "default"], outputs: ["bookEvent", "removeSuggestion"] }, { kind: "component", type: SpiderChartComponent, selector: "lib-spider-chart", inputs: ["datasets", "config", "polygon_colors", "showChartInfo"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: MatcherStatusesComponent, selector: "lib-matcher-statuses", inputs: ["adsTemplate", "status", "hideStatuses", "messages", "inputValue", "maxLength", "responseTime", "disabled", "prospectJoinDate"], outputs: ["getMessages", "sendMessage"] }, { kind: "component", type: TraitVisualComponent, selector: "tv-trait-visual", inputs: ["nodeData", "attributeWeights", "preferenceWeights", "attributeCount", "preferenceCount"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: GetColorByMatcherPipe, name: "getColorByMatcher" }, { kind: "pipe", type: ChatMetaPipe, name: "chatMeta" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LibClientHomeComponent, isStandalone: true, selector: "lib-client-home", inputs: { config: "config" }, outputs: { activeIndexChange: "activeIndexChange", addMessage: "addMessage", getMessages: "getMessages", bookEvent: "bookEvent", removeSuggestion: "removeSuggestion", handleAppearPopup: "handleAppearPopup" }, ngImport: i0, template: "<div class=\"client-home\">\n  @if (components.ClientMatchSpiderChart === config?.component) {\n    <lib-spider-chart\n      [datasets]=\"config.spiderConfig?.datasets\"\n      [config]=\"config?.spiderConfig\"\n      [polygon_colors]=\"config?.polygonColors\"\n      [showChartInfo]=\"false\"\n    ></lib-spider-chart>\n  } @else if (components.ClientMatchTraitChart === config?.component) {\n    <div class=\"trait-visual-container\">\n      <tv-trait-visual [nodeData]=\"traitVisualNodes\" [attributeWeights]=\"traitVisualAttrWeights\" [preferenceWeights]=\"traitVisualPrefWeights\"></tv-trait-visual>\n    </div>\n  }\n\n  <lib-dashboard-swipeable-tabs\n    [activeIndex]=\"config?.activeIndex\"\n    [slideContentMaxHeight]=\"config?.slideContentMaxHeight\"\n    [thumbsSwiperOptions]=\"{\n      virtual: {\n        enabled: clientMatches?.length > 5,\n        addSlidesAfter: 8,\n        addSlidesBefore: 8,\n        cache: true,\n      },\n      slidesPerView: 'auto',\n      grabCursor: true,\n      centeredSlides: false,\n      freeMode: {\n        enabled: true,\n        sticky: true,\n      },\n      observer: true,\n      observeParents: true,\n    }\"\n    [mainSwiperOptions]=\"{\n      virtual: {\n        enabled: clientMatches?.length > 5,\n        addSlidesAfter: 2,\n        addSlidesBefore: 2,\n        cache: true,\n      },\n      centeredSlides: true,\n      grabCursor: true,\n      keyboard: { enabled: true, onlyInViewport: false },\n      effect: 'coverflow',\n      spaceBetween: 5,\n      coverflowEffect: {\n        rotate: 0,\n        slideShadows: false,\n        scale: 0.9,\n      },\n      observer: true,\n      observeParents: true,\n    }\"\n    [bottomThumbs]=\"config?.bottomThumbs\"\n    [generalSwiperHeight]=\"'100%'\"\n    [enableMainSwiper]=\"true\"\n    (activeIndexChange)=\"onActiveIndexChange($event)\"\n    *ngIf=\"(config?.loading$ | async) !== true || config?.default; else empty\"\n  >\n    <ng-container thumb-slides>\n      @if (config.default || !clientMatches?.length) {\n        @for (match of defaultNumberOfItems; let i = $index; track match) {\n          <swiper-slide>\n            <lib-client-match-overview\n              [overview]=\"{}\"\n              [expand]=\"0\"\n              [class.lib-client-match-overview-expand]=\"true\"\n              (click)=\"(null)\"\n              [partialColors]=\"null\"\n              [default]=\"config.default\"\n              [showValueProportionLabel]=\"false\"\n              [hideProgressBar]=\"false\"\n            ></lib-client-match-overview>\n          </swiper-slide>\n        }\n      } @else {\n        @for (match of clientMatches; let i = $index; track match._id) {\n          <swiper-slide>\n            @if (config?.chatAdsTemplate && i === 0) {\n              <ng-container *ngTemplateOutlet=\"config?.chatAdsTemplate\"></ng-container>\n            }\n            <lib-client-match-overview\n              [overview]=\"match\"\n              [expand]=\"config?.activeIndex === i\"\n              [class.lib-client-match-overview-expand]=\"config?.activeIndex === i\"\n              [partialColors]=\"match | getColorByMatcher: config\"\n              [loading]=\"config?.loading?.clientMatches\"\n              [showValueProportionLabel]=\"config?.showValueProportionLabel\"\n              [hideProgressBar]=\"config?.hideProgressBar\"\n              [meta]=\"config?.clientMatches$ | chatMeta: match._id | async\"\n            ></lib-client-match-overview>\n          </swiper-slide>\n        }\n      }\n    </ng-container>\n    <ng-container main-slides>\n      @switch (config?.component) {\n        @case (components.ChatScheduler) {\n          @if (config.default || !(config?.schedulers$ | async)?.length) {\n            @for (item of defaultNumberOfItems; track $index) {\n              <swiper-slide class=\"scheduler\">\n                <div class=\"slide-content without-shadow\">\n                  <lib-scheduler [loading$]=\"config?.loading$\" [default]=\"config.default\" [adsTemplate]=\"config?.schedulerAdsTemplate\" style=\"width: 100%\"></lib-scheduler>\n                </div>\n              </swiper-slide>\n            }\n          } @else {\n            @for (scheduler of config?.schedulers$ | async; let i = $index; track scheduler) {\n              <swiper-slide class=\"scheduler\">\n                <div class=\"slide-content without-shadow\">\n                  <lib-scheduler\n                    [adsTemplate]=\"config?.schedulerAdsTemplate\"\n                    [events$]=\"scheduler.events$\"\n                    [loading$]=\"config?.loading$\"\n                    (bookEvent)=\"bookEvent.emit($event, scheduler.matchRequest)\"\n                    (removeSuggestion)=\"removeSuggestion.emit($event)\"\n                  ></lib-scheduler>\n                </div>\n              </swiper-slide>\n            }\n          }\n        }\n        @case (components.ChatHandoff) {\n          @if (config.default || !(config?.clientMatches$ | async)?.length) {\n            @for (chat of defaultNumberOfItems; let i = $index; track chat) {\n              <swiper-slide class=\"chat\">\n                <lib-matcher-statuses\n                  [inputValue]=\"config.chatInputValue\"\n                  [messages]=\"chat?.messages || []\"\n                  (sendMessage)=\"addMessageEmit($event, chat.prospectId, {})\"\n                  (getMessages)=\"getMessages.emit()\"\n                  [maxLength]=\"maxLength\"\n                  [responseTime]=\"chat?.prospectResponseTime || ''\"\n                  [hideStatuses]=\"config.hideStatuses\"\n                ></lib-matcher-statuses>\n              </swiper-slide>\n            }\n          } @else {\n            @for (clientMatch of config?.clientMatches$ | async; let i = $index; track clientMatch?.prospectData?.prospectId ?? $index) {\n              <swiper-slide class=\"chat\">\n                <div class=\"slide-content\">\n                  <lib-matcher-statuses\n                    *ngIf=\"clientMatch.prospectData\"\n                    [status]=\"clientMatch.prospectData.status\"\n                    [adsTemplate]=\"config?.chatTabAdsTemplate\"\n                    [inputValue]=\"config.chatInputValue\"\n                    [messages]=\"clientMatch.prospectData?.messages || []\"\n                    [includeTime]=\"config?.includeTime\"\n                    [includeGifMessage]=\"config?.includeGifMessage\"\n                    (getMessages)=\"getMessages.emit()\"\n                    [maxLength]=\"config?.maxLength\"\n                    [responseTime]=\"clientMatch.prospectData.prospectResponseTime\"\n                    (sendMessage)=\"addMessageEmit($event, clientMatch?.prospectData?.prospectId, clientMatch?.matchRequest)\"\n                    [hideStatuses]=\"config.hideStatuses\"\n                    [prospectJoinDate]=\"clientMatch.prospectData.prospectJoinDate\"\n                  ></lib-matcher-statuses>\n                </div>\n              </swiper-slide>\n            }\n          }\n        }\n      }\n    </ng-container>\n  </lib-dashboard-swipeable-tabs>\n\n  <ng-template #empty>\n    <lib-section-separator></lib-section-separator>\n    <div class=\"messsage f-lg f-gilroy-regular\">{{ emptyMessage }}</div>\n  </ng-template>\n</div>\n", styles: [":host{--match-percentage-font-size: 1.5em;--container-sides-shadow-width: 15px;--match-percentage-value-height: 3em;position:relative}.messsage{margin-bottom:40px}.padding-20{padding:20px!important}.client-home{height:100%}swiper-slide{display:flex;overflow:hidden;position:relative;align-items:center;min-height:120px}swiper-slide.chat.swiper-slide-next,swiper-slide.chat.swiper-slide-prev{opacity:.5}swiper-slide.chat.swiper-slide-next:before,swiper-slide.chat.swiper-slide-prev:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:gray;opacity:.4;border-radius:10px}lib-client-match-overview{cursor:pointer}lib-client-match-overview:not(.lib-client-match-overview-expand){--lib-circle-progress-height: 65%;--lib-circle-progress-width: 65%;--primary-profile-height: 7em;--primary-profile-width: 7em;margin:auto 6px}lib-client-match-overview.lib-client-match-overview-expand{--primary-profile-height: 11em;--primary-profile-width: 11em;--secondary-profile-height: 3em;--secondary-profile-width: 3em}.slide-content{height:auto;width:100%;position:relative;display:block;overflow:visible;padding:0 5px}.slide-content:not(.without-shadow){border-radius:10px;box-shadow:5.70371px 5.70371px 11.40741px #00000052 inset,-3.42222px -3.42222px 4.56296px #ffffff1a inset}.slide-content:has(lib-chat){padding:0}.slide-content lib-chat{--max-width-container: 100%}.slide-content .status-list{position:absolute;top:.9em;left:.5em;display:flex;flex-direction:column;gap:.32em}lib-client-match-overview{--secondary-profile-margin: 0 0 0 -5px}@media (min-width: 350px){.left-side{left:0!important}}@media (max-width: 768px){swiper-slide{min-height:80px}}@media (max-width: 768px){swiper-slide{min-height:80px}lib-client-match-overview{--secondary-profile-margin: 0 0 0 -5px}.trait-visual-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%;min-height:240px}.trait-visual-container tv-trait-visual{width:100%;height:100%;max-width:270px;max-height:240px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LibClientMatchOverviewComponent, selector: "lib-client-match-overview", inputs: ["overview", "meta", "expand", "loading", "default", "hideProgressBar", "partialColors", "showExternalPartialCircleProgress", "maxValue", "enableChangeOverview"], outputs: ["sendConversationFlag"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: LibDashboardSwipeableTabsComponent, selector: "lib-dashboard-swipeable-tabs", inputs: ["thumbsSwiperOptions", "mainSwiperOptions", "activeIndex", "bottomThumbs", "slideContentMaxHeight", "mainSwiperHeight", "subMainSwiperHeight", "thumbsSwiperHeight", "generalSwiperHeight"], outputs: ["activeIndexChange"] }, { kind: "ngmodule", type: LibChatComponentModule }, { kind: "component", type: LibSchedulerComponent, selector: "lib-scheduler", inputs: ["adsTemplate", "loading$", "emptyMessage", "displayBookedStatuses", "displayEmptyDays", "events$", "startDate", "endDate", "default"], outputs: ["bookEvent", "removeSuggestion"] }, { kind: "component", type: SpiderChartComponent, selector: "lib-spider-chart", inputs: ["datasets", "config", "polygon_colors", "showChartInfo"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: MatcherStatusesComponent, selector: "lib-matcher-statuses", inputs: ["adsTemplate", "status", "hideStatuses", "messages", "inputValue", "maxLength", "responseTime", "disabled", "prospectJoinDate"], outputs: ["getMessages", "sendMessage"] }, { kind: "component", type: TraitVisualComponent, selector: "tv-trait-visual", inputs: ["nodeData", "attributeWeights", "preferenceWeights", "attributeCount", "preferenceCount"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: GetColorByMatcherPipe, name: "getColorByMatcher" }, { kind: "pipe", type: ChatMetaPipe, name: "chatMeta" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibClientHomeComponent, decorators: [{
             type: Component,
@@ -3959,7 +3828,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                         GetColorByMatcherPipe,
                         ChatMetaPipe,
                         TraitVisualComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"client-home\">\n  @if (components.ClientMatchSpiderChart === config?.component) {\n    <lib-spider-chart\n      [datasets]=\"config.spiderConfig?.datasets\"\n      [config]=\"config?.spiderConfig\"\n      [polygon_colors]=\"config?.polygonColors\"\n      [showChartInfo]=\"false\"\n    ></lib-spider-chart>\n  } @else if (components.ClientMatchTraitChart === config?.component) {\n    <div class=\"trait-visual-container\">\n      <tv-trait-visual\n        [nodeData]=\"traitVisualNodes\"\n        [attributeWeights]=\"traitVisualAttrWeights\"\n        [preferenceWeights]=\"traitVisualPrefWeights\"\n      ></tv-trait-visual>\n    </div>\n  }\n\n  <lib-dashboard-swipeable-tabs\n    [activeIndex]=\"config?.activeIndex\"\n    [slideContentMaxHeight]=\"config?.slideContentMaxHeight\"\n    [thumbsSwiperOptions]=\"{\n      virtual: {\n        enabled: clientMatches?.length > 5,\n        addSlidesAfter: 8,\n        addSlidesBefore: 8,\n        cache: true,\n      },\n      slidesPerView: 'auto',\n      grabCursor: true,\n      centeredSlides: false,\n      freeMode: {\n        enabled: true,\n        sticky: true,\n      },\n      observer: true,\n      observeParents: true,\n    }\"\n    [mainSwiperOptions]=\"{\n      virtual: {\n        enabled: clientMatches?.length > 5,\n        addSlidesAfter: 2,\n        addSlidesBefore: 2,\n        cache: true,\n      },\n      centeredSlides: true,\n      grabCursor: true,\n      keyboard: { enabled: true, onlyInViewport: false },\n      effect: 'coverflow',\n      spaceBetween: 5,\n      coverflowEffect: {\n        rotate: 0,\n        slideShadows: false,\n        scale: 0.9,\n      },\n      observer: true,\n      observeParents: true,\n    }\"\n    [bottomThumbs]=\"config?.bottomThumbs\"\n    [generalSwiperHeight]=\"'100%'\"\n    [enableMainSwiper]=\"true\"\n    (activeIndexChange)=\"onActiveIndexChange($event)\"\n    *ngIf=\"(config?.loading$ | async) !== true || config?.default; else empty\"\n  >\n    <ng-container thumb-slides>\n      @if (config.default || !clientMatches?.length) {\n        @for (match of defaultNumberOfItems; let i = $index; track match) {\n          <swiper-slide>\n            <lib-client-match-overview\n              [overview]=\"{}\"\n              [expand]=\"0\"\n              [class.lib-client-match-overview-expand]=\"true\"\n              (click)=\"(null)\"\n              [partialColors]=\"null\"\n              [default]=\"config.default\"\n              [showValueProportionLabel]=\"false\"\n              [hideProgressBar]=\"false\"\n            ></lib-client-match-overview>\n          </swiper-slide>\n        }\n      } @else {\n        @for (match of clientMatches; let i = $index; track match._id) {\n          <swiper-slide>\n            @if (config?.chatAdsTemplate && i === 0) {\n              <ng-container *ngTemplateOutlet=\"config?.chatAdsTemplate\"></ng-container>\n            }\n            <lib-client-match-overview\n              [overview]=\"match\"\n              [expand]=\"config?.activeIndex === i\"\n              [class.lib-client-match-overview-expand]=\"config?.activeIndex === i\"\n              [partialColors]=\"match | getColorByMatcher: config\"\n              [loading]=\"config?.loading?.clientMatches\"\n              [showValueProportionLabel]=\"config?.showValueProportionLabel\"\n              [hideProgressBar]=\"config?.hideProgressBar\"\n              [meta]=\"config?.clientMatches$ | chatMeta: match._id | async\"\n            ></lib-client-match-overview>\n          </swiper-slide>\n        }\n      }\n    </ng-container>\n    <ng-container main-slides>\n      @switch (config?.component) {\n        @case (components.ChatScheduler) {\n          @if (config.default || !(config?.schedulers$ | async)?.length) {\n            @for (item of defaultNumberOfItems; track $index) {\n              <swiper-slide class=\"scheduler\">\n                <div class=\"slide-content without-shadow\">\n                  <lib-scheduler [loading$]=\"config?.loading$\" [default]=\"config.default\" [adsTemplate]=\"config?.schedulerAdsTemplate\" style=\"width: 100%\"></lib-scheduler>\n                </div>\n              </swiper-slide>\n            }\n          } @else {\n            @for (scheduler of config?.schedulers$ | async; let i = $index; track scheduler) {\n              <swiper-slide class=\"scheduler\">\n                <div class=\"slide-content without-shadow\">\n                  <lib-scheduler\n                    [adsTemplate]=\"config?.schedulerAdsTemplate\"\n                    [events$]=\"scheduler.events$\"\n                    [loading$]=\"config?.loading$\"\n                    (bookEvent)=\"bookEvent.emit($event, scheduler.matchRequest)\"\n                    (removeSuggestion)=\"removeSuggestion.emit($event)\"\n                  ></lib-scheduler>\n                </div>\n              </swiper-slide>\n            }\n          }\n        }\n        @case (components.ChatHandoff) {\n          @if (config.default || !(config?.clientMatches$ | async)?.length) {\n            @for (chat of defaultNumberOfItems; let i = $index; track chat) {\n              <swiper-slide class=\"chat\">\n                <lib-matcher-statuses\n                  [inputValue]=\"config.chatInputValue\"\n                  [messages]=\"chat?.messages || []\"\n                  (sendMessage)=\"addMessageEmit($event, chat.prospectId, {})\"\n                  (getMessages)=\"getMessages.emit()\"\n                  [maxLength]=\"maxLength\"\n                  [responseTime]=\"chat?.prospectResponseTime || ''\"\n                  [hideStatuses]=\"config.hideStatuses\"\n                ></lib-matcher-statuses>\n              </swiper-slide>\n            }\n          } @else {\n            @for (clientMatch of config?.clientMatches$ | async; let i = $index; track clientMatch.prospectData.prospectId) {\n              <swiper-slide class=\"chat\">\n                <div class=\"slide-content\">\n                  <lib-matcher-statuses\n                    [status]=\"clientMatch.prospectData.status\"\n                    [adsTemplate]=\"config?.chatTabAdsTemplate\"\n                    [inputValue]=\"config.chatInputValue\"\n                    [messages]=\"clientMatch.prospectData?.messages || []\"\n                    [includeTime]=\"config?.includeTime\"\n                    [includeGifMessage]=\"config?.includeGifMessage\"\n                    (getMessages)=\"getMessages.emit()\"\n                    [maxLength]=\"config?.maxLength\"\n                    [responseTime]=\"clientMatch.prospectData.prospectResponseTime\"\n                    (sendMessage)=\"addMessageEmit($event, clientMatch.prospectData.prospectId, clientMatch.matchRequest)\"\n                    [hideStatuses]=\"config.hideStatuses\"\n                    [prospectJoinDate]=\"clientMatch.prospectData.prospectJoinDate\"\n                  ></lib-matcher-statuses>\n                </div>\n              </swiper-slide>\n            }\n          }\n        }\n      }\n    </ng-container>\n  </lib-dashboard-swipeable-tabs>\n\n  <ng-template #empty>\n    <lib-section-separator></lib-section-separator>\n    <div class=\"messsage f-lg f-gilroy-regular\">{{ emptyMessage }}</div>\n  </ng-template>\n</div>\n", styles: [":host{--match-percentage-font-size: 1.5em;--container-sides-shadow-width: 15px;--match-percentage-value-height: 3em;position:relative}.messsage{margin-bottom:40px}.padding-20{padding:20px!important}.client-home{height:100%}swiper-slide{display:flex;overflow:hidden;position:relative;align-items:center;min-height:120px}swiper-slide.chat.swiper-slide-next,swiper-slide.chat.swiper-slide-prev{opacity:.5}swiper-slide.chat.swiper-slide-next:before,swiper-slide.chat.swiper-slide-prev:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:gray;opacity:.4;border-radius:10px}lib-client-match-overview{cursor:pointer}lib-client-match-overview:not(.lib-client-match-overview-expand){--lib-circle-progress-height: 65%;--lib-circle-progress-width: 65%;--primary-profile-height: 7em;--primary-profile-width: 7em;margin:auto 6px}lib-client-match-overview.lib-client-match-overview-expand{--primary-profile-height: 11em;--primary-profile-width: 11em;--secondary-profile-height: 3em;--secondary-profile-width: 3em}.slide-content{height:auto;width:100%;position:relative;display:block;overflow:visible;padding:0 5px}.slide-content:not(.without-shadow){border-radius:10px;box-shadow:5.70371px 5.70371px 11.40741px #00000052 inset,-3.42222px -3.42222px 4.56296px #ffffff1a inset}.slide-content:has(lib-chat){padding:0}.slide-content lib-chat{--max-width-container: 100%}.slide-content .status-list{position:absolute;top:.9em;left:.5em;display:flex;flex-direction:column;gap:.32em}lib-client-match-overview{--secondary-profile-margin: 0 0 0 -5px}@media (min-width: 350px){.left-side{left:0!important}}@media (max-width: 768px){swiper-slide{min-height:80px}}@media (max-width: 768px){swiper-slide{min-height:80px}lib-client-match-overview{--secondary-profile-margin: 0 0 0 -5px}.trait-visual-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%;min-height:240px}.trait-visual-container tv-trait-visual{width:100%;height:100%;max-width:270px;max-height:240px}}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"client-home\">\n  @if (components.ClientMatchSpiderChart === config?.component) {\n    <lib-spider-chart\n      [datasets]=\"config.spiderConfig?.datasets\"\n      [config]=\"config?.spiderConfig\"\n      [polygon_colors]=\"config?.polygonColors\"\n      [showChartInfo]=\"false\"\n    ></lib-spider-chart>\n  } @else if (components.ClientMatchTraitChart === config?.component) {\n    <div class=\"trait-visual-container\">\n      <tv-trait-visual [nodeData]=\"traitVisualNodes\" [attributeWeights]=\"traitVisualAttrWeights\" [preferenceWeights]=\"traitVisualPrefWeights\"></tv-trait-visual>\n    </div>\n  }\n\n  <lib-dashboard-swipeable-tabs\n    [activeIndex]=\"config?.activeIndex\"\n    [slideContentMaxHeight]=\"config?.slideContentMaxHeight\"\n    [thumbsSwiperOptions]=\"{\n      virtual: {\n        enabled: clientMatches?.length > 5,\n        addSlidesAfter: 8,\n        addSlidesBefore: 8,\n        cache: true,\n      },\n      slidesPerView: 'auto',\n      grabCursor: true,\n      centeredSlides: false,\n      freeMode: {\n        enabled: true,\n        sticky: true,\n      },\n      observer: true,\n      observeParents: true,\n    }\"\n    [mainSwiperOptions]=\"{\n      virtual: {\n        enabled: clientMatches?.length > 5,\n        addSlidesAfter: 2,\n        addSlidesBefore: 2,\n        cache: true,\n      },\n      centeredSlides: true,\n      grabCursor: true,\n      keyboard: { enabled: true, onlyInViewport: false },\n      effect: 'coverflow',\n      spaceBetween: 5,\n      coverflowEffect: {\n        rotate: 0,\n        slideShadows: false,\n        scale: 0.9,\n      },\n      observer: true,\n      observeParents: true,\n    }\"\n    [bottomThumbs]=\"config?.bottomThumbs\"\n    [generalSwiperHeight]=\"'100%'\"\n    [enableMainSwiper]=\"true\"\n    (activeIndexChange)=\"onActiveIndexChange($event)\"\n    *ngIf=\"(config?.loading$ | async) !== true || config?.default; else empty\"\n  >\n    <ng-container thumb-slides>\n      @if (config.default || !clientMatches?.length) {\n        @for (match of defaultNumberOfItems; let i = $index; track match) {\n          <swiper-slide>\n            <lib-client-match-overview\n              [overview]=\"{}\"\n              [expand]=\"0\"\n              [class.lib-client-match-overview-expand]=\"true\"\n              (click)=\"(null)\"\n              [partialColors]=\"null\"\n              [default]=\"config.default\"\n              [showValueProportionLabel]=\"false\"\n              [hideProgressBar]=\"false\"\n            ></lib-client-match-overview>\n          </swiper-slide>\n        }\n      } @else {\n        @for (match of clientMatches; let i = $index; track match._id) {\n          <swiper-slide>\n            @if (config?.chatAdsTemplate && i === 0) {\n              <ng-container *ngTemplateOutlet=\"config?.chatAdsTemplate\"></ng-container>\n            }\n            <lib-client-match-overview\n              [overview]=\"match\"\n              [expand]=\"config?.activeIndex === i\"\n              [class.lib-client-match-overview-expand]=\"config?.activeIndex === i\"\n              [partialColors]=\"match | getColorByMatcher: config\"\n              [loading]=\"config?.loading?.clientMatches\"\n              [showValueProportionLabel]=\"config?.showValueProportionLabel\"\n              [hideProgressBar]=\"config?.hideProgressBar\"\n              [meta]=\"config?.clientMatches$ | chatMeta: match._id | async\"\n            ></lib-client-match-overview>\n          </swiper-slide>\n        }\n      }\n    </ng-container>\n    <ng-container main-slides>\n      @switch (config?.component) {\n        @case (components.ChatScheduler) {\n          @if (config.default || !(config?.schedulers$ | async)?.length) {\n            @for (item of defaultNumberOfItems; track $index) {\n              <swiper-slide class=\"scheduler\">\n                <div class=\"slide-content without-shadow\">\n                  <lib-scheduler [loading$]=\"config?.loading$\" [default]=\"config.default\" [adsTemplate]=\"config?.schedulerAdsTemplate\" style=\"width: 100%\"></lib-scheduler>\n                </div>\n              </swiper-slide>\n            }\n          } @else {\n            @for (scheduler of config?.schedulers$ | async; let i = $index; track scheduler) {\n              <swiper-slide class=\"scheduler\">\n                <div class=\"slide-content without-shadow\">\n                  <lib-scheduler\n                    [adsTemplate]=\"config?.schedulerAdsTemplate\"\n                    [events$]=\"scheduler.events$\"\n                    [loading$]=\"config?.loading$\"\n                    (bookEvent)=\"bookEvent.emit($event, scheduler.matchRequest)\"\n                    (removeSuggestion)=\"removeSuggestion.emit($event)\"\n                  ></lib-scheduler>\n                </div>\n              </swiper-slide>\n            }\n          }\n        }\n        @case (components.ChatHandoff) {\n          @if (config.default || !(config?.clientMatches$ | async)?.length) {\n            @for (chat of defaultNumberOfItems; let i = $index; track chat) {\n              <swiper-slide class=\"chat\">\n                <lib-matcher-statuses\n                  [inputValue]=\"config.chatInputValue\"\n                  [messages]=\"chat?.messages || []\"\n                  (sendMessage)=\"addMessageEmit($event, chat.prospectId, {})\"\n                  (getMessages)=\"getMessages.emit()\"\n                  [maxLength]=\"maxLength\"\n                  [responseTime]=\"chat?.prospectResponseTime || ''\"\n                  [hideStatuses]=\"config.hideStatuses\"\n                ></lib-matcher-statuses>\n              </swiper-slide>\n            }\n          } @else {\n            @for (clientMatch of config?.clientMatches$ | async; let i = $index; track clientMatch?.prospectData?.prospectId ?? $index) {\n              <swiper-slide class=\"chat\">\n                <div class=\"slide-content\">\n                  <lib-matcher-statuses\n                    *ngIf=\"clientMatch.prospectData\"\n                    [status]=\"clientMatch.prospectData.status\"\n                    [adsTemplate]=\"config?.chatTabAdsTemplate\"\n                    [inputValue]=\"config.chatInputValue\"\n                    [messages]=\"clientMatch.prospectData?.messages || []\"\n                    [includeTime]=\"config?.includeTime\"\n                    [includeGifMessage]=\"config?.includeGifMessage\"\n                    (getMessages)=\"getMessages.emit()\"\n                    [maxLength]=\"config?.maxLength\"\n                    [responseTime]=\"clientMatch.prospectData.prospectResponseTime\"\n                    (sendMessage)=\"addMessageEmit($event, clientMatch?.prospectData?.prospectId, clientMatch?.matchRequest)\"\n                    [hideStatuses]=\"config.hideStatuses\"\n                    [prospectJoinDate]=\"clientMatch.prospectData.prospectJoinDate\"\n                  ></lib-matcher-statuses>\n                </div>\n              </swiper-slide>\n            }\n          }\n        }\n      }\n    </ng-container>\n  </lib-dashboard-swipeable-tabs>\n\n  <ng-template #empty>\n    <lib-section-separator></lib-section-separator>\n    <div class=\"messsage f-lg f-gilroy-regular\">{{ emptyMessage }}</div>\n  </ng-template>\n</div>\n", styles: [":host{--match-percentage-font-size: 1.5em;--container-sides-shadow-width: 15px;--match-percentage-value-height: 3em;position:relative}.messsage{margin-bottom:40px}.padding-20{padding:20px!important}.client-home{height:100%}swiper-slide{display:flex;overflow:hidden;position:relative;align-items:center;min-height:120px}swiper-slide.chat.swiper-slide-next,swiper-slide.chat.swiper-slide-prev{opacity:.5}swiper-slide.chat.swiper-slide-next:before,swiper-slide.chat.swiper-slide-prev:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:gray;opacity:.4;border-radius:10px}lib-client-match-overview{cursor:pointer}lib-client-match-overview:not(.lib-client-match-overview-expand){--lib-circle-progress-height: 65%;--lib-circle-progress-width: 65%;--primary-profile-height: 7em;--primary-profile-width: 7em;margin:auto 6px}lib-client-match-overview.lib-client-match-overview-expand{--primary-profile-height: 11em;--primary-profile-width: 11em;--secondary-profile-height: 3em;--secondary-profile-width: 3em}.slide-content{height:auto;width:100%;position:relative;display:block;overflow:visible;padding:0 5px}.slide-content:not(.without-shadow){border-radius:10px;box-shadow:5.70371px 5.70371px 11.40741px #00000052 inset,-3.42222px -3.42222px 4.56296px #ffffff1a inset}.slide-content:has(lib-chat){padding:0}.slide-content lib-chat{--max-width-container: 100%}.slide-content .status-list{position:absolute;top:.9em;left:.5em;display:flex;flex-direction:column;gap:.32em}lib-client-match-overview{--secondary-profile-margin: 0 0 0 -5px}@media (min-width: 350px){.left-side{left:0!important}}@media (max-width: 768px){swiper-slide{min-height:80px}}@media (max-width: 768px){swiper-slide{min-height:80px}lib-client-match-overview{--secondary-profile-margin: 0 0 0 -5px}.trait-visual-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%;min-height:240px}.trait-visual-container tv-trait-visual{width:100%;height:100%;max-width:270px;max-height:240px}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { config: [{
                 type: Input
             }], activeIndexChange: [{
@@ -3976,68 +3845,91 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 type: Output
             }] } });
 
-const innerProgressPurpleColors = {
-    primary: 'rgb(209, 8, 209)',
-    secondary: 'rgb(255, 46, 192)',
-    tertiary: 'rgb(255, 46, 164)',
-};
-
-const progressWhiteColors = {
-    primary: 'rgb(255, 255, 255)',
-    secondary: 'rgb(215, 215, 215)',
-    tertiary: 'rgb(214, 214, 214)',
-    gradientPrimary: 'rgb(255, 255, 255)',
-    gradientSecondary: 'rgb(231, 231, 231)',
-    incomplete: 'rgb(214, 214, 214)',
-    complete: 'rgb(255, 255, 255)',
-};
-
-const mainswiperDefaultOptions = {
-    spaceBetween: 10,
-    slidesPerView: 1,
-    centeredSlides: true,
-    loop: false,
-    autoplay: {
-        delay: 3000,
-        disableOnInteraction: false,
-    },
-    pagination: {
-        el: '.swiper-pagination',
-        clickable: true,
-    },
-    navigation: {
-        nextEl: '.swiper-button-next',
-        prevEl: '.swiper-button-prev',
-    },
-};
-
-const thumbsSwiperDefaultOptions = {
-    spaceBetween: 10,
-    slidesPerView: 4,
-    freeMode: true,
-    watchSlidesProgress: true,
-    breakpoints: {
-        320: {
-            slidesPerView: 2,
-            spaceBetween: 10,
-        },
-        640: {
-            slidesPerView: 3,
-            spaceBetween: 10,
-        },
-        768: {
-            slidesPerView: 4,
-            spaceBetween: 10,
-        },
-    },
-};
-
-var ClientDashboardTabs;
-(function (ClientDashboardTabs) {
-    ClientDashboardTabs[ClientDashboardTabs["ChatScheduler"] = 0] = "ChatScheduler";
-    ClientDashboardTabs[ClientDashboardTabs["ChatCompatibility"] = 1] = "ChatCompatibility";
-    ClientDashboardTabs[ClientDashboardTabs["ChatHandoff"] = 2] = "ChatHandoff";
-})(ClientDashboardTabs || (ClientDashboardTabs = {}));
+class LibHandoffPanelComponent {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.config = {
+            version: HandoffPanelVersion.STANDARD,
+            messages$: of([]),
+            scheduleSlots: [],
+            datePrepInfo: {
+                title: 'Date Prep Handoff info',
+                items: [],
+            },
+            default: false,
+            activeTabIndex: 0,
+        };
+        this.addMessage = new EventEmitter();
+        this.scheduleSlotToggle = new EventEmitter();
+        this.HandoffPanelVersion = HandoffPanelVersion;
+        this.activeTabIndex = 0;
+        this.messages$ = of([]);
+        this.scheduleSlots = [];
+        this.slotControls = new Map();
+        this.datePrepInfo = {
+            title: 'Date Prep Handoff info',
+            items: [],
+        };
+    }
+    ngOnInit() {
+        this.activeTabIndex = this.config.activeTabIndex ?? 0;
+        this.messages$ = this.config.messages$ ?? of([]);
+        this.scheduleSlots = this.config.scheduleSlots ?? [];
+        this.datePrepInfo = this.config.datePrepInfo ?? {
+            title: 'Date Prep Handoff info',
+            items: [],
+        };
+        this.initializeSlotControls();
+        this.cdr.detectChanges();
+    }
+    initializeSlotControls() {
+        this.slotControls.clear();
+        this.scheduleSlots.forEach((slot) => {
+            const control = new FormControl(slot.selected);
+            control.valueChanges.subscribe((value) => {
+                slot.selected = value;
+                this.scheduleSlotToggle.emit(slot);
+                this.cdr.detectChanges();
+            });
+            this.slotControls.set(slot.id, control);
+        });
+    }
+    onTabChange(index) {
+        this.activeTabIndex = index;
+        this.cdr.detectChanges();
+    }
+    getSlotControl(slot) {
+        let control = this.slotControls.get(slot.id);
+        if (!control) {
+            control = new FormControl(slot.selected);
+            control.valueChanges.subscribe((value) => {
+                slot.selected = value;
+                this.scheduleSlotToggle.emit(slot);
+                this.cdr.detectChanges();
+            });
+            this.slotControls.set(slot.id, control);
+        }
+        return control;
+    }
+    onMessageAdd(message) {
+        this.addMessage.emit(message);
+    }
+    getVersionClass() {
+        return `handoff-panel--${this.config.version || HandoffPanelVersion.STANDARD}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibHandoffPanelComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LibHandoffPanelComponent, isStandalone: true, selector: "lib-handoff-panel", inputs: { config: "config" }, outputs: { addMessage: "addMessage", scheduleSlotToggle: "scheduleSlotToggle" }, ngImport: i0, template: "<div class=\"handoff-panel\" [ngClass]=\"getVersionClass()\">\n  <div class=\"handoff-panel__tabs\">\n    <button class=\"handoff-panel__tab\" [ngClass]=\"{ 'handoff-panel__tab--active': activeTabIndex === 0 }\" (click)=\"onTabChange(0)\">Chat Handoff</button>\n    <button class=\"handoff-panel__tab\" [ngClass]=\"{ 'handoff-panel__tab--active': activeTabIndex === 1 }\" (click)=\"onTabChange(1)\">Schedule</button>\n    <button class=\"handoff-panel__tab\" [ngClass]=\"{ 'handoff-panel__tab--active': activeTabIndex === 2 }\" (click)=\"onTabChange(2)\">Date Prep</button>\n  </div>\n\n  <div class=\"handoff-panel__content\">\n    <!-- Chat Handoff Tab -->\n    @if (activeTabIndex === 0) {\n      <div class=\"handoff-panel__chat\">\n        <lib-chat [default]=\"config.default\" [messages$]=\"messages$\" (addMessage)=\"onMessageAdd($event)\"></lib-chat>\n      </div>\n    }\n\n    <!-- Schedule Tab -->\n    @if (activeTabIndex === 1) {\n      <div class=\"handoff-panel__schedule\">\n        @if (scheduleSlots && scheduleSlots.length > 0) {\n          <div class=\"schedule-list\">\n            @for (slot of scheduleSlots; track slot.id) {\n              <div class=\"schedule-item\">\n                <div class=\"schedule-item__info\">\n                  @if (slot.profileImage) {\n                    <img class=\"schedule-item__avatar\" [src]=\"slot.profileImage\" alt=\"Profile\" />\n                  }\n                  <div class=\"schedule-item__details\">\n                    <div class=\"schedule-item__time\">{{ slot.time }} - {{ slot.duration }}</div>\n                    @if (slot.description) {\n                      <div class=\"schedule-item__description\">{{ slot.description }}</div>\n                    }\n                  </div>\n                </div>\n                <lib-toggle [formControl]=\"getSlotControl(slot)\"></lib-toggle>\n              </div>\n            }\n          </div>\n        } @else {\n          <div class=\"handoff-panel__empty\">\n            <p>No schedule slots available</p>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Date Prep Tab -->\n    @if (activeTabIndex === 2) {\n      <div class=\"handoff-panel__date-prep\">\n        <div class=\"date-prep-info\">\n          <h3 class=\"date-prep-info__title\">{{ datePrepInfo.title }}</h3>\n          @if (datePrepInfo.items && datePrepInfo.items.length > 0) {\n            <ul class=\"date-prep-info__list\">\n              @for (item of datePrepInfo.items; track $index) {\n                <li class=\"date-prep-info__item\">{{ item }}</li>\n              }\n            </ul>\n          } @else {\n            <div class=\"handoff-panel__empty\">\n              <p>No date prep information available</p>\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.handoff-panel{display:flex;flex-direction:column;height:100%;background-color:var(--ion-background-color);color:#666}.handoff-panel__tabs{display:flex;border-bottom:1px solid #dfe0e3;background-color:#464a4c}.handoff-panel__tab{flex:1;padding:12px 16px;background:transparent;border:none;border-bottom:2px solid transparent;color:#f4f6f7;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s ease}.handoff-panel__tab:hover{color:#a6a6a6;background-color:#ffffff0d}.handoff-panel__tab--active{color:#666;border-bottom-color:#45899b;background-color:#ffffff05}.handoff-panel__content{flex:1;overflow-y:auto;padding:16px}.handoff-panel__chat,.handoff-panel__schedule,.handoff-panel__date-prep{height:100%}.handoff-panel__empty{display:flex;align-items:center;justify-content:center;height:200px;color:#f4f6f7;font-size:14px}.handoff-panel--standard .handoff-panel__tab--active{border-bottom-color:#45899b}.handoff-panel--pro .handoff-panel__tab--active{border-bottom-color:#9c27b0}.handoff-panel--super .handoff-panel__tab--active{border-bottom-color:#d4863d}.schedule-list{display:flex;flex-direction:column;gap:12px}.schedule-item{display:flex;align-items:center;justify-content:space-between;padding:12px;background-color:#464a4c;border-radius:8px;border:1px solid #dfe0e3;transition:all .3s ease}.schedule-item:hover{background-color:#464a4c;border-color:#ccc}.schedule-item__info{display:flex;align-items:center;gap:12px;flex:1}.schedule-item__avatar{width:40px;height:40px;border-radius:50%;object-fit:cover}.schedule-item__details{display:flex;flex-direction:column;gap:4px}.schedule-item__time{font-size:14px;font-weight:500;color:#666}.schedule-item__description{font-size:12px;color:#f4f6f7}.date-prep-info__title{font-size:18px;font-weight:600;color:#666;margin-bottom:16px}.date-prep-info__list{list-style:none;padding:0;margin:0}.date-prep-info__item{padding:8px 0 8px 20px;position:relative;color:#a6a6a6;font-size:14px;line-height:1.5}.date-prep-info__item:before{content:\"\\2022\";position:absolute;left:0;color:#45899b;font-size:18px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: LibChatComponentModule }, { kind: "component", type: ChatComponent, selector: "lib-chat", inputs: ["default", "responseTime", "inputValue", "emojiPickerConfig", "includeGifMessage", "includeTime", "dateMessages", "maxLength", "enableGifPicker", "prospectJoinDate", "disabled"], outputs: ["sendMessage", "getMessages"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "ngmodule", type: FormFieldModule }, { kind: "ngmodule", type: InputFieldModule }, { kind: "ngmodule", type: ToggleModule }, { kind: "component", type: i2.ToggleComponent, selector: "lib-toggle", inputs: ["disabled", "toggleState", "variant", "left", "right", "thumbImg", "multipleOptions"], outputs: ["toggleStateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibHandoffPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-handoff-panel', imports: [CommonModule, TranslateModule, LibChatComponentModule, FormsModule, ReactiveFormsModule, ButtonsModule, FormFieldModule, InputFieldModule, ToggleModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"handoff-panel\" [ngClass]=\"getVersionClass()\">\n  <div class=\"handoff-panel__tabs\">\n    <button class=\"handoff-panel__tab\" [ngClass]=\"{ 'handoff-panel__tab--active': activeTabIndex === 0 }\" (click)=\"onTabChange(0)\">Chat Handoff</button>\n    <button class=\"handoff-panel__tab\" [ngClass]=\"{ 'handoff-panel__tab--active': activeTabIndex === 1 }\" (click)=\"onTabChange(1)\">Schedule</button>\n    <button class=\"handoff-panel__tab\" [ngClass]=\"{ 'handoff-panel__tab--active': activeTabIndex === 2 }\" (click)=\"onTabChange(2)\">Date Prep</button>\n  </div>\n\n  <div class=\"handoff-panel__content\">\n    <!-- Chat Handoff Tab -->\n    @if (activeTabIndex === 0) {\n      <div class=\"handoff-panel__chat\">\n        <lib-chat [default]=\"config.default\" [messages$]=\"messages$\" (addMessage)=\"onMessageAdd($event)\"></lib-chat>\n      </div>\n    }\n\n    <!-- Schedule Tab -->\n    @if (activeTabIndex === 1) {\n      <div class=\"handoff-panel__schedule\">\n        @if (scheduleSlots && scheduleSlots.length > 0) {\n          <div class=\"schedule-list\">\n            @for (slot of scheduleSlots; track slot.id) {\n              <div class=\"schedule-item\">\n                <div class=\"schedule-item__info\">\n                  @if (slot.profileImage) {\n                    <img class=\"schedule-item__avatar\" [src]=\"slot.profileImage\" alt=\"Profile\" />\n                  }\n                  <div class=\"schedule-item__details\">\n                    <div class=\"schedule-item__time\">{{ slot.time }} - {{ slot.duration }}</div>\n                    @if (slot.description) {\n                      <div class=\"schedule-item__description\">{{ slot.description }}</div>\n                    }\n                  </div>\n                </div>\n                <lib-toggle [formControl]=\"getSlotControl(slot)\"></lib-toggle>\n              </div>\n            }\n          </div>\n        } @else {\n          <div class=\"handoff-panel__empty\">\n            <p>No schedule slots available</p>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Date Prep Tab -->\n    @if (activeTabIndex === 2) {\n      <div class=\"handoff-panel__date-prep\">\n        <div class=\"date-prep-info\">\n          <h3 class=\"date-prep-info__title\">{{ datePrepInfo.title }}</h3>\n          @if (datePrepInfo.items && datePrepInfo.items.length > 0) {\n            <ul class=\"date-prep-info__list\">\n              @for (item of datePrepInfo.items; track $index) {\n                <li class=\"date-prep-info__item\">{{ item }}</li>\n              }\n            </ul>\n          } @else {\n            <div class=\"handoff-panel__empty\">\n              <p>No date prep information available</p>\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.handoff-panel{display:flex;flex-direction:column;height:100%;background-color:var(--ion-background-color);color:#666}.handoff-panel__tabs{display:flex;border-bottom:1px solid #dfe0e3;background-color:#464a4c}.handoff-panel__tab{flex:1;padding:12px 16px;background:transparent;border:none;border-bottom:2px solid transparent;color:#f4f6f7;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s ease}.handoff-panel__tab:hover{color:#a6a6a6;background-color:#ffffff0d}.handoff-panel__tab--active{color:#666;border-bottom-color:#45899b;background-color:#ffffff05}.handoff-panel__content{flex:1;overflow-y:auto;padding:16px}.handoff-panel__chat,.handoff-panel__schedule,.handoff-panel__date-prep{height:100%}.handoff-panel__empty{display:flex;align-items:center;justify-content:center;height:200px;color:#f4f6f7;font-size:14px}.handoff-panel--standard .handoff-panel__tab--active{border-bottom-color:#45899b}.handoff-panel--pro .handoff-panel__tab--active{border-bottom-color:#9c27b0}.handoff-panel--super .handoff-panel__tab--active{border-bottom-color:#d4863d}.schedule-list{display:flex;flex-direction:column;gap:12px}.schedule-item{display:flex;align-items:center;justify-content:space-between;padding:12px;background-color:#464a4c;border-radius:8px;border:1px solid #dfe0e3;transition:all .3s ease}.schedule-item:hover{background-color:#464a4c;border-color:#ccc}.schedule-item__info{display:flex;align-items:center;gap:12px;flex:1}.schedule-item__avatar{width:40px;height:40px;border-radius:50%;object-fit:cover}.schedule-item__details{display:flex;flex-direction:column;gap:4px}.schedule-item__time{font-size:14px;font-weight:500;color:#666}.schedule-item__description{font-size:12px;color:#f4f6f7}.date-prep-info__title{font-size:18px;font-weight:600;color:#666;margin-bottom:16px}.date-prep-info__list{list-style:none;padding:0;margin:0}.date-prep-info__item{padding:8px 0 8px 20px;position:relative;color:#a6a6a6;font-size:14px;line-height:1.5}.date-prep-info__item:before{content:\"\\2022\";position:absolute;left:0;color:#45899b;font-size:18px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { config: [{
+                type: Input
+            }], addMessage: [{
+                type: Output
+            }], scheduleSlotToggle: [{
+                type: Output
+            }] } });
 
 const defaultSpiderConfig = {
     w: 200,
@@ -4129,6 +4021,211 @@ const defaultClientDashboardConfig = {
     alertStatus: {},
 };
 
+class LibVisualManagerModalComponent {
+    get selectedItems() {
+        return this.preferences.filter((p) => p.isSelected);
+    }
+    get deselectedItems() {
+        return this.preferences.filter((p) => !p.isSelected);
+    }
+    constructor(changeDetectorRef, popupModalService, modalData) {
+        this.changeDetectorRef = changeDetectorRef;
+        this.popupModalService = popupModalService;
+        this.modalData = modalData;
+        this.event = new EventEmitter();
+        this.componentData = null;
+        this.preferences = [];
+        this.originalPreferences = [];
+        this.preferenceControls = new Map();
+        if (modalData) {
+            this.componentData = modalData;
+        }
+    }
+    ngOnInit() {
+        if (!this.componentData) {
+            this.componentData = {
+                data: this.data || { preferences: [] },
+            };
+        }
+        // Create a deep copy for working state
+        this.preferences = JSON.parse(JSON.stringify(this.componentData.data.preferences || []));
+        // Keep original for reset
+        this.originalPreferences = JSON.parse(JSON.stringify(this.componentData.data.preferences || []));
+        // Create FormControls for each preference name
+        this.preferences.forEach((preference) => {
+            this.preferenceControls.set(preference.id, new FormControl(preference.name));
+        });
+    }
+    ngAfterViewInit() {
+        if (this.childModalElementRef) {
+            this.popupModalService.setChildModalElementRef(this.childModalElementRef);
+        }
+    }
+    togglePreference(preference, event) {
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        const index = this.preferences.findIndex((p) => p.id === preference.id);
+        if (index !== -1) {
+            const wasSelected = this.preferences[index].isSelected;
+            this.preferences[index].isSelected = !wasSelected;
+            // Force change detection to update the view
+            this.changeDetectorRef.detectChanges();
+            const eventValue = this.preferences[index].isSelected ? VisualManagerModalEventValue.AddPreference : VisualManagerModalEventValue.RemovePreference;
+            // Emit event but don't close the modal - user can continue toggling items
+            if (this.data) {
+                this.event.emit({
+                    type: VisualManagerModalEventTypes.Click,
+                    value: eventValue,
+                    data: { preferenceId: preference.id, preferences: this.preferences },
+                });
+            }
+        }
+    }
+    apply() {
+        if (this.data) {
+            this.event.emit({
+                type: VisualManagerModalEventTypes.Click,
+                value: VisualManagerModalEventValue.Apply,
+                data: { preferences: this.preferences },
+            });
+        }
+        else {
+            this.popupModalService.hide({
+                type: VisualManagerModalEventTypes.Click,
+                value: VisualManagerModalEventValue.Apply,
+                data: { preferences: this.preferences },
+            });
+        }
+    }
+    reset() {
+        // Reset to original state
+        this.preferences = JSON.parse(JSON.stringify(this.originalPreferences));
+        // Reset FormControls
+        this.preferences.forEach((preference) => {
+            const control = this.preferenceControls.get(preference.id);
+            if (control) {
+                control.setValue(preference.name);
+            }
+            else {
+                this.preferenceControls.set(preference.id, new FormControl(preference.name));
+            }
+        });
+        this.changeDetectorRef.detectChanges();
+        if (this.data) {
+            this.event.emit({
+                type: VisualManagerModalEventTypes.Click,
+                value: VisualManagerModalEventValue.Reset,
+                data: { preferences: this.preferences },
+            });
+        }
+        else {
+            this.popupModalService.hide({
+                type: VisualManagerModalEventTypes.Click,
+                value: VisualManagerModalEventValue.Reset,
+                data: { preferences: this.preferences },
+            });
+        }
+    }
+    close() {
+        if (this.data) {
+            this.event.emit({
+                type: VisualManagerModalEventTypes.Close,
+                value: VisualManagerModalEventValue.Close,
+            });
+        }
+        else {
+            this.popupModalService.hide({
+                type: VisualManagerModalEventTypes.Close,
+                value: VisualManagerModalEventValue.Close,
+            });
+        }
+    }
+    onPreferenceNameChange(preference, newName) {
+        const index = this.preferences.findIndex((p) => p.id === preference.id);
+        if (index !== -1) {
+            this.preferences[index].name = newName || '';
+            const control = this.preferenceControls.get(preference.id);
+            if (control && control.value !== newName) {
+                control.setValue(newName || '', { emitEvent: false });
+            }
+            this.changeDetectorRef.detectChanges();
+        }
+    }
+    getPreferenceControl(preferenceId) {
+        return this.preferenceControls.get(preferenceId) || new FormControl('');
+    }
+    onDragStart(event, preference, isSelected) {
+        if (event.dataTransfer) {
+            event.dataTransfer.effectAllowed = 'move';
+            event.dataTransfer.setData('text/plain', JSON.stringify({ id: preference.id, isSelected }));
+        }
+        if (event.target) {
+            event.target.style.opacity = '0.5';
+        }
+    }
+    onDragEnd(event) {
+        if (event.target) {
+            event.target.style.opacity = '1';
+        }
+    }
+    onDragOver(event) {
+        event.preventDefault();
+        if (event.dataTransfer) {
+            event.dataTransfer.dropEffect = 'move';
+        }
+    }
+    onDrop(event, targetPreference, isSelected) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!event.dataTransfer) {
+            return;
+        }
+        const data = event.dataTransfer.getData('text/plain');
+        if (!data) {
+            return;
+        }
+        try {
+            const { id: draggedId, isSelected: draggedIsSelected } = JSON.parse(data);
+            // Only allow reordering within the same section (selected or deselected)
+            if (draggedIsSelected !== isSelected) {
+                return;
+            }
+            const draggedIndex = this.preferences.findIndex((p) => p.id === draggedId);
+            const targetIndex = this.preferences.findIndex((p) => p.id === targetPreference.id);
+            if (draggedIndex === -1 || targetIndex === -1 || draggedIndex === targetIndex) {
+                return;
+            }
+            // Reorder the items
+            const [draggedItem] = this.preferences.splice(draggedIndex, 1);
+            this.preferences.splice(targetIndex, 0, draggedItem);
+            this.changeDetectorRef.detectChanges();
+        }
+        catch (error) {
+            console.error('Error handling drop:', error);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibVisualManagerModalComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2.PopupModalService }, { token: MODAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LibVisualManagerModalComponent, isStandalone: true, selector: "lib-visual-manager-modal", inputs: { data: "data" }, outputs: { event: "event" }, providers: [LibModalComponent], viewQueries: [{ propertyName: "childModalElementRef", first: true, predicate: ["childModalElementRef"], descendants: true }], ngImport: i0, template: "<div class=\"visual-manager-modal\" #childModalElementRef>\n  <header class=\"visual-manager-modal__header\">\n    <div class=\"visual-manager-modal__header-left\">\n      <img class=\"visual-manager-modal__filter-icon\" src=\"assets/icons/filter-icon.svg\" alt=\"Filter icon\" />\n      <h2 class=\"visual-manager-modal__title\">{{ 'VISUAL_MANAGER_MODAL.TITLE' | translate }}</h2>\n    </div>\n    <button class=\"visual-manager-modal__close-button\" (click)=\"close()\">\n      <img class=\"visual-manager-modal__close-icon\" src=\"assets/icons/close-icon.svg\" alt=\"Close\" />\n    </button>\n  </header>\n\n  <div class=\"visual-manager-modal__content\">\n    <!-- Selected Items Section -->\n    @if (selectedItems.length > 0) {\n      <div class=\"visual-manager-modal__section\">\n        <ol class=\"visual-manager-modal__list visual-manager-modal__list--ordered\">\n          @for (preference of selectedItems; track preference.id; let i = $index) {\n            <li class=\"visual-manager-modal__item\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, preference, true)\">\n              <span class=\"visual-manager-modal__item-number\">{{ i + 1 }}</span>\n              <div class=\"visual-manager-modal__input-wrapper\">\n                <lib-input-field\n                  class=\"visual-manager-modal__item-name\"\n                  [formControl]=\"getPreferenceControl(preference.id)\"\n                  (valueChange)=\"onPreferenceNameChange(preference, $event)\"\n                ></lib-input-field>\n                <button class=\"visual-manager-modal__action-button1\"></button>\n                <button class=\"visual-manager-modal__action-button\" (click)=\"togglePreference(preference, $event)\">\n                  <img class=\"visual-manager-modal__action-icon\" src=\"assets/icons/close-icon.svg\" alt=\"Remove\" />\n                </button>\n              </div>\n              <img\n                class=\"visual-manager-modal__drag-handle\"\n                src=\"assets/icons/drag-handle.svg\"\n                alt=\"Drag handle\"\n                draggable=\"true\"\n                (dragstart)=\"onDragStart($event, preference, true)\"\n                (dragend)=\"onDragEnd($event)\"\n              />\n            </li>\n          }\n        </ol>\n      </div>\n    }\n\n    <!-- Separator -->\n    @if (selectedItems.length > 0 && deselectedItems.length > 0) {\n      <div class=\"visual-manager-modal__separator\"></div>\n    }\n\n    <!-- Deselected Items Section -->\n    @if (deselectedItems.length > 0) {\n      <div class=\"visual-manager-modal__section\">\n        <ul class=\"visual-manager-modal__list\">\n          @for (preference of deselectedItems; track preference.id) {\n            <li class=\"visual-manager-modal__item\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, preference, false)\">\n              <div class=\"visual-manager-modal__input-wrapper\">\n                <lib-input-field\n                  class=\"visual-manager-modal__item-name\"\n                  [formControl]=\"getPreferenceControl(preference.id)\"\n                  (valueChange)=\"onPreferenceNameChange(preference, $event)\"\n                ></lib-input-field>\n                <button class=\"visual-manager-modal__action-button1\"></button>\n                <button class=\"visual-manager-modal__action-button\" (click)=\"togglePreference(preference, $event)\">\n                  <img class=\"visual-manager-modal__action-icon\" src=\"assets/icons/plus.svg\" alt=\"Add\" />\n                </button>\n              </div>\n              <img\n                class=\"visual-manager-modal__drag-handle\"\n                src=\"assets/icons/drag-handle.svg\"\n                alt=\"Drag handle\"\n                draggable=\"true\"\n                (dragstart)=\"onDragStart($event, preference, false)\"\n                (dragend)=\"onDragEnd($event)\"\n              />\n            </li>\n          }\n        </ul>\n      </div>\n    }\n  </div>\n\n  <footer class=\"visual-manager-modal__footer\">\n    <lib-secondary-btn (click)=\"reset()\">\n      {{ 'VISUAL_MANAGER_MODAL.RESET' | translate }}\n    </lib-secondary-btn>\n    <lib-primary-btn (click)=\"apply()\">\n      {{ 'VISUAL_MANAGER_MODAL.APPLY' | translate }}\n    </lib-primary-btn>\n  </footer>\n</div>\n", styles: [":host{font-size:clamp(0px,3.2dvw,15px)}:host *{box-sizing:border-box}.visual-manager-modal{-webkit-backdrop-filter:blur(.625em);backdrop-filter:blur(.625em);background:linear-gradient(180deg,#323133,#1f1e20);color:#fff;padding:1.5em 2em;width:28.125em;margin:0 auto;border-radius:1.5625em;font-family:Gilroy;box-shadow:.5em .5em 1em #00000080,-.5em -.5em 1em #ffffff0d;position:relative;display:flex;flex-direction:column}.visual-manager-modal__header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.5em;padding-bottom:1em;border-bottom:1px solid rgba(255,255,255,.1);gap:.75em}.visual-manager-modal__header-left{display:flex;flex-direction:column;align-items:center;gap:.5em;flex:1}.visual-manager-modal__filter-icon{width:3em;height:3em;cursor:pointer;flex-shrink:0}.visual-manager-modal__title{font-size:1.25em;font-weight:500;font-family:Gilroy;margin:0;color:#fff}.visual-manager-modal__close-button{background:transparent;border:none;cursor:pointer;padding:.25em;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s}.visual-manager-modal__close-button:hover{background:#ffffff1a}.visual-manager-modal__close-icon{width:2em;height:2em;filter:brightness(0) saturate(100%) invert(39%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(98%) contrast(105%)}.visual-manager-modal__content{margin-bottom:1.5em;max-height:50vh;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:1em}.visual-manager-modal__section{display:flex;flex-direction:column;gap:.75em}.visual-manager-modal__section-label{font-size:.9em;font-weight:500;color:#4a9eff;margin-bottom:.25em}.visual-manager-modal__separator{height:1px;background:#ffffff1a;margin:.5em 0}.visual-manager-modal__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75em}.visual-manager-modal__list--ordered{list-style:none}.visual-manager-modal__item{display:flex;align-items:center;gap:.5em;width:100%}.visual-manager-modal__item-number{display:flex;align-items:center;justify-content:center;min-width:1.5em;height:1.5em;font-size:.9em;font-weight:500;color:#ffffffb3;flex-shrink:0}.visual-manager-modal__input-wrapper{position:relative;flex:1;min-width:0}.visual-manager-modal__item-name{width:100%}.visual-manager-modal__item-name ::ng-deep .content-wrapper{position:relative}.visual-manager-modal__item-name ::ng-deep .input-field,.visual-manager-modal__item-name ::ng-deep .input-field-readonly{padding-right:2.5em}.visual-manager-modal__action-button{position:absolute;right:.4em;top:50%;transform:translateY(-50%);background:linear-gradient(174.9deg,#595859cf -26.99%,#29252dcf 22.7% 100.94%);border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .2s;width:3em;height:3em;border-radius:50%;pointer-events:auto;-webkit-backdrop-filter:blur(.5326657891px);backdrop-filter:blur(.5326657891px);box-shadow:7.24px 6.58px 17.77px 1.65px #121212a6,0 0 2.45px #0000004d}.visual-manager-modal__action-button:active{opacity:.9;box-shadow:inset 2px 2px 4px #0006,inset -2px -2px 4px #ffffff14}.visual-manager-modal__action-button1{position:absolute;right:.4em;top:50%;transform:translateY(-50%);background:linear-gradient(174.9deg,#69686acf 28.4%,#29252dcf 92.06% 100.94%);border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .2s;width:3em;height:3em;border-radius:50%;pointer-events:auto;-webkit-backdrop-filter:blur(.5326657891px);backdrop-filter:blur(.5326657891px);box-shadow:0 2.56px 2.56px .82px #0000006e,0 0 10.65px 5.33px #4242429c}.visual-manager-modal__action-icon{width:1em;height:1em;display:block}.visual-manager-modal__drag-handle{width:1em;height:1em;cursor:grab;flex-shrink:0;opacity:.6;-webkit-user-select:none;user-select:none}.visual-manager-modal__drag-handle:active{cursor:grabbing}.visual-manager-modal__item.dragging{opacity:.5}.visual-manager-modal__footer{display:flex;justify-content:space-between;gap:1em;padding-top:1em;border-top:1px solid rgba(255,255,255,.1);margin-top:auto}.visual-manager-modal__footer lib-secondary-btn,.visual-manager-modal__footer lib-primary-btn{flex:1}.visual-manager-modal__content::-webkit-scrollbar{width:.5em}.visual-manager-modal__content::-webkit-scrollbar-track{background:#0003;border-radius:.25em}.visual-manager-modal__content::-webkit-scrollbar-thumb{background:#fff3;border-radius:.25em}.visual-manager-modal__content::-webkit-scrollbar-thumb:hover{background:#ffffff4d}@media (max-width: 768px){:host{font-size:calc(clamp(0px,3.2dvw,15px)*.8)}.visual-manager-modal{width:90%;padding:1.25em 1.5em}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2.PrimaryBtnComponent, selector: "lib-primary-btn", inputs: ["hoverOutline", "disabled", "type", "form", "label", "showArrowIcon", "disableTextShadow", "loading$"] }, { kind: "component", type: i2.SecondaryBtnComponent, selector: "lib-secondary-btn", inputs: ["hoverOutline", "disabled", "type", "form", "label", "showArrowIcon", "disableTextShadow", "loading$"] }, { kind: "ngmodule", type: InputFieldModule }, { kind: "component", type: i2.InputFieldComponent, selector: "lib-input-field,[lib-input-field]", inputs: ["name", "autocomplete", "label", "placeholder", "type", "readonly", "focus", "enableGoogleAddress", "locationAutocompleteConfig", "defaultLocation", "mask", "prefix", "suffix", "maxLength", "value", "address", "textarea", "resize", "counter", "patterns", "trimWhiteSpace", "disabled"], outputs: ["mapError", "locationChange", "keyDown", "onBlur"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibVisualManagerModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-visual-manager-modal', standalone: true, imports: [CommonModule, TranslateModule, ButtonsModule, InputFieldModule, ReactiveFormsModule], providers: [LibModalComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"visual-manager-modal\" #childModalElementRef>\n  <header class=\"visual-manager-modal__header\">\n    <div class=\"visual-manager-modal__header-left\">\n      <img class=\"visual-manager-modal__filter-icon\" src=\"assets/icons/filter-icon.svg\" alt=\"Filter icon\" />\n      <h2 class=\"visual-manager-modal__title\">{{ 'VISUAL_MANAGER_MODAL.TITLE' | translate }}</h2>\n    </div>\n    <button class=\"visual-manager-modal__close-button\" (click)=\"close()\">\n      <img class=\"visual-manager-modal__close-icon\" src=\"assets/icons/close-icon.svg\" alt=\"Close\" />\n    </button>\n  </header>\n\n  <div class=\"visual-manager-modal__content\">\n    <!-- Selected Items Section -->\n    @if (selectedItems.length > 0) {\n      <div class=\"visual-manager-modal__section\">\n        <ol class=\"visual-manager-modal__list visual-manager-modal__list--ordered\">\n          @for (preference of selectedItems; track preference.id; let i = $index) {\n            <li class=\"visual-manager-modal__item\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, preference, true)\">\n              <span class=\"visual-manager-modal__item-number\">{{ i + 1 }}</span>\n              <div class=\"visual-manager-modal__input-wrapper\">\n                <lib-input-field\n                  class=\"visual-manager-modal__item-name\"\n                  [formControl]=\"getPreferenceControl(preference.id)\"\n                  (valueChange)=\"onPreferenceNameChange(preference, $event)\"\n                ></lib-input-field>\n                <button class=\"visual-manager-modal__action-button1\"></button>\n                <button class=\"visual-manager-modal__action-button\" (click)=\"togglePreference(preference, $event)\">\n                  <img class=\"visual-manager-modal__action-icon\" src=\"assets/icons/close-icon.svg\" alt=\"Remove\" />\n                </button>\n              </div>\n              <img\n                class=\"visual-manager-modal__drag-handle\"\n                src=\"assets/icons/drag-handle.svg\"\n                alt=\"Drag handle\"\n                draggable=\"true\"\n                (dragstart)=\"onDragStart($event, preference, true)\"\n                (dragend)=\"onDragEnd($event)\"\n              />\n            </li>\n          }\n        </ol>\n      </div>\n    }\n\n    <!-- Separator -->\n    @if (selectedItems.length > 0 && deselectedItems.length > 0) {\n      <div class=\"visual-manager-modal__separator\"></div>\n    }\n\n    <!-- Deselected Items Section -->\n    @if (deselectedItems.length > 0) {\n      <div class=\"visual-manager-modal__section\">\n        <ul class=\"visual-manager-modal__list\">\n          @for (preference of deselectedItems; track preference.id) {\n            <li class=\"visual-manager-modal__item\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, preference, false)\">\n              <div class=\"visual-manager-modal__input-wrapper\">\n                <lib-input-field\n                  class=\"visual-manager-modal__item-name\"\n                  [formControl]=\"getPreferenceControl(preference.id)\"\n                  (valueChange)=\"onPreferenceNameChange(preference, $event)\"\n                ></lib-input-field>\n                <button class=\"visual-manager-modal__action-button1\"></button>\n                <button class=\"visual-manager-modal__action-button\" (click)=\"togglePreference(preference, $event)\">\n                  <img class=\"visual-manager-modal__action-icon\" src=\"assets/icons/plus.svg\" alt=\"Add\" />\n                </button>\n              </div>\n              <img\n                class=\"visual-manager-modal__drag-handle\"\n                src=\"assets/icons/drag-handle.svg\"\n                alt=\"Drag handle\"\n                draggable=\"true\"\n                (dragstart)=\"onDragStart($event, preference, false)\"\n                (dragend)=\"onDragEnd($event)\"\n              />\n            </li>\n          }\n        </ul>\n      </div>\n    }\n  </div>\n\n  <footer class=\"visual-manager-modal__footer\">\n    <lib-secondary-btn (click)=\"reset()\">\n      {{ 'VISUAL_MANAGER_MODAL.RESET' | translate }}\n    </lib-secondary-btn>\n    <lib-primary-btn (click)=\"apply()\">\n      {{ 'VISUAL_MANAGER_MODAL.APPLY' | translate }}\n    </lib-primary-btn>\n  </footer>\n</div>\n", styles: [":host{font-size:clamp(0px,3.2dvw,15px)}:host *{box-sizing:border-box}.visual-manager-modal{-webkit-backdrop-filter:blur(.625em);backdrop-filter:blur(.625em);background:linear-gradient(180deg,#323133,#1f1e20);color:#fff;padding:1.5em 2em;width:28.125em;margin:0 auto;border-radius:1.5625em;font-family:Gilroy;box-shadow:.5em .5em 1em #00000080,-.5em -.5em 1em #ffffff0d;position:relative;display:flex;flex-direction:column}.visual-manager-modal__header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.5em;padding-bottom:1em;border-bottom:1px solid rgba(255,255,255,.1);gap:.75em}.visual-manager-modal__header-left{display:flex;flex-direction:column;align-items:center;gap:.5em;flex:1}.visual-manager-modal__filter-icon{width:3em;height:3em;cursor:pointer;flex-shrink:0}.visual-manager-modal__title{font-size:1.25em;font-weight:500;font-family:Gilroy;margin:0;color:#fff}.visual-manager-modal__close-button{background:transparent;border:none;cursor:pointer;padding:.25em;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s}.visual-manager-modal__close-button:hover{background:#ffffff1a}.visual-manager-modal__close-icon{width:2em;height:2em;filter:brightness(0) saturate(100%) invert(39%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(98%) contrast(105%)}.visual-manager-modal__content{margin-bottom:1.5em;max-height:50vh;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:1em}.visual-manager-modal__section{display:flex;flex-direction:column;gap:.75em}.visual-manager-modal__section-label{font-size:.9em;font-weight:500;color:#4a9eff;margin-bottom:.25em}.visual-manager-modal__separator{height:1px;background:#ffffff1a;margin:.5em 0}.visual-manager-modal__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75em}.visual-manager-modal__list--ordered{list-style:none}.visual-manager-modal__item{display:flex;align-items:center;gap:.5em;width:100%}.visual-manager-modal__item-number{display:flex;align-items:center;justify-content:center;min-width:1.5em;height:1.5em;font-size:.9em;font-weight:500;color:#ffffffb3;flex-shrink:0}.visual-manager-modal__input-wrapper{position:relative;flex:1;min-width:0}.visual-manager-modal__item-name{width:100%}.visual-manager-modal__item-name ::ng-deep .content-wrapper{position:relative}.visual-manager-modal__item-name ::ng-deep .input-field,.visual-manager-modal__item-name ::ng-deep .input-field-readonly{padding-right:2.5em}.visual-manager-modal__action-button{position:absolute;right:.4em;top:50%;transform:translateY(-50%);background:linear-gradient(174.9deg,#595859cf -26.99%,#29252dcf 22.7% 100.94%);border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .2s;width:3em;height:3em;border-radius:50%;pointer-events:auto;-webkit-backdrop-filter:blur(.5326657891px);backdrop-filter:blur(.5326657891px);box-shadow:7.24px 6.58px 17.77px 1.65px #121212a6,0 0 2.45px #0000004d}.visual-manager-modal__action-button:active{opacity:.9;box-shadow:inset 2px 2px 4px #0006,inset -2px -2px 4px #ffffff14}.visual-manager-modal__action-button1{position:absolute;right:.4em;top:50%;transform:translateY(-50%);background:linear-gradient(174.9deg,#69686acf 28.4%,#29252dcf 92.06% 100.94%);border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .2s;width:3em;height:3em;border-radius:50%;pointer-events:auto;-webkit-backdrop-filter:blur(.5326657891px);backdrop-filter:blur(.5326657891px);box-shadow:0 2.56px 2.56px .82px #0000006e,0 0 10.65px 5.33px #4242429c}.visual-manager-modal__action-icon{width:1em;height:1em;display:block}.visual-manager-modal__drag-handle{width:1em;height:1em;cursor:grab;flex-shrink:0;opacity:.6;-webkit-user-select:none;user-select:none}.visual-manager-modal__drag-handle:active{cursor:grabbing}.visual-manager-modal__item.dragging{opacity:.5}.visual-manager-modal__footer{display:flex;justify-content:space-between;gap:1em;padding-top:1em;border-top:1px solid rgba(255,255,255,.1);margin-top:auto}.visual-manager-modal__footer lib-secondary-btn,.visual-manager-modal__footer lib-primary-btn{flex:1}.visual-manager-modal__content::-webkit-scrollbar{width:.5em}.visual-manager-modal__content::-webkit-scrollbar-track{background:#0003;border-radius:.25em}.visual-manager-modal__content::-webkit-scrollbar-thumb{background:#fff3;border-radius:.25em}.visual-manager-modal__content::-webkit-scrollbar-thumb:hover{background:#ffffff4d}@media (max-width: 768px){:host{font-size:calc(clamp(0px,3.2dvw,15px)*.8)}.visual-manager-modal{width:90%;padding:1.25em 1.5em}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i2.PopupModalService }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MODAL_DATA]
+                }] }], propDecorators: { childModalElementRef: [{
+                type: ViewChild,
+                args: ['childModalElementRef']
+            }], data: [{
+                type: Input
+            }], event: [{
+                type: Output
+            }] } });
+
 class LibClientDashboardComponent {
     constructor(cdr) {
         this.cdr = cdr;
@@ -4282,11 +4379,11 @@ class LibClientDashboardComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibClientDashboardComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LibClientDashboardComponent, isStandalone: true, selector: "lib-client-dashboard", inputs: { config: "config", agendaAdsData: "agendaAdsData" }, outputs: { addMessage: "addMessage", getMessages: "getMessages", bookEvent: "bookEvent", removeSuggestion: "removeSuggestion", activeIndexChange: "activeIndexChange", handleClosedAlert: "handleClosedAlert", handleAppearPopup: "handleAppearPopup" }, ngImport: i0, template: "<!-- Horizontal Agenda -->\n<div class=\"agenda-handler\" [class.height-zero]=\"isMinimizeVisual\" [class.has-ads]=\"config?.agendaAdsTemplate\">\n  <h3 class=\"agenda-title\">\n    {{ 'CLIENT_DASHBOARD.TITLES.UPCOMING_DATES' | translate }}\n    <span (click)=\"onHandleAppearPopup(alertStatusFields.upcomingDates)\"><img [width]=\"12\" [height]=\"12\" [src]=\"assetPaths.defaultIcon\" [alt]=\"item?.label + ' icon'\" /></span>\n  </h3>\n  <lib-agenda [events]=\"config?.events\" [adsTemplate]=\"config?.agendaAdsTemplate\" [agendaAdsData]=\"agendaAdsData\"></lib-agenda>\n  @if (config.alertStatus.upcomingDates) {\n    <div class=\"alert-popup-agenda\" [class.opacity-zero]=\"isMinimizeVisual\">\n      <lib-alert-popup\n        [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.UPCOMING_DATES.TITLE' | translate\"\n        [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.UPCOMING_DATES.DESCRIPTION' | translate\"\n        (closed)=\"\n          onClosedAlert({\n            event: $event,\n            field: alertStatusFields.upcomingDates,\n          })\n        \"\n      ></lib-alert-popup>\n    </div>\n  }\n</div>\n<!-- Scheduler - Trait - Spider - Handoff -->\n<div\n  (click)=\"onClick($event)\"\n  [class.height-zero-activated]=\"isMinimizeVisual\"\n  (touchstart)=\"onTouchStart($event)\"\n  [class.has-ads]=\"!!config?.agendaAdsTemplate?.elementRef\" class=\"client-home__container\">\n  <lib-dashboard-swipeable-tabs\n    [activeIndex]=\"config?.activeTabIndex\"\n    [thumbsSwiperOptions]=\"dashboardThumbsSwiperOptions\"\n    [mainSwiperOptions]=\"mainSwiperOptions\"\n    [slideContentMaxHeight]=\"config?.slideContentMaxHeight\"\n    [bottomThumbs]=\"false\"\n    [generalSwiperHeight]=\"'100%'\"\n    [mainSwiperHeight]=\"'calc(100% - 34px)'\"\n    [thumbsSwiperHeight]=\"'34px'\"\n    [subMainSwiperHeight]=\"'100%'\"\n    (activeIndexChange)=\"onActiveTabIndexChange($event)\"\n  >\n    <ng-container thumb-slides>\n      @for (item of items; let i = $index; track item) {\n        <swiper-slide class=\"main-tab\">\n          <span\n            class=\"tab\"\n            [class.active]=\"i === config.activeTabIndex\"\n            [class.disabled]=\"item?.key === 'CHAT_HANDOFF' && !(config?.clientMatches$ | async)?.[config?.activeIndex]?.showHandoff && !config.default\"\n          >\n            {{ item?.label | translate }}\n            @if (i === config.activeTabIndex) {\n              <ng-container>\n                <img\n                  [width]=\"12\"\n                  [height]=\"12\"\n                  [src]=\"assetPaths.defaultIcon\"\n                  [alt]=\"item?.label + ' info icon'\"\n                  (click)=\"item.onClickInfo()\"\n                />\n                <img\n                  [width]=\"12\"\n                  [height]=\"12\"\n                  [src]=\"assetPaths.settingsIcon\"\n                  alt=\"Settings icon\"\n                  (click)=\"onSettingsClick(); $event.stopPropagation()\"\n                  style=\"cursor: pointer;\"\n                />\n              </ng-container>\n            }\n          </span>\n        </swiper-slide>\n      }\n    </ng-container>\n    <ng-container main-slides>\n      <swiper-slide class=\"no-swiping-selector swiper__scheduler\">\n        <div class=\"swiper__client-home\">\n          @if (config.alertStatus.chatMeetupAgenda) {\n            <div class=\"alert-popup-client-scheduler\">\n              <lib-alert-popup\n                [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.CHAT_MEETUP_AGENDA.TITLE' | translate\"\n                [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.CHAT_MEETUP_AGENDA.DESCRIPTION' | translate\"\n                (closed)=\"\n                  onClosedAlert({\n                    event: $event,\n                    field: alertStatusFields.chatMeetupAgenda,\n                  })\n                \"\n              ></lib-alert-popup>\n            </div>\n          }\n          <lib-client-home\n            [config]=\"{\n              schedulerAdsTemplate: config?.schedulerAdsTemplate,\n              schedulerTabAdsTemplate: config?.schedulerTabAdsTemplate,\n              chatAdsTemplate: config?.chatAdsTemplate,\n              chatTabAdsTemplate: config?.chatTabAdsTemplate,\n              traitVisualAdsTemplate: config?.traitVisualAdsTemplate,\n              activeIndex: config?.activeIndex,\n              clientMatches$: config?.clientMatches$,\n              schedulers$: config?.schedulers$,\n              component: components.ChatScheduler,\n              default: config?.default,\n              thumbsSwiperOptions: clientHomeThumbsSwiperOptions,\n              alertStatus: config.alertStatus,\n              bottomThumbs: true,\n              showValueProportionLabel: false,\n              hideProgressBar: true,\n            }\"\n            (bookEvent)=\"bookEvent?.emit($event)\"\n            (removeSuggestion)=\"removeSuggestion?.emit($event)\"\n            (addMessage)=\"handleNewMessage($event)\"\n            (getMessages)=\"getMessages.emit($event)\"\n            (activeIndexChange)=\"onActiveProspectChange($event)\"\n            (handleClosedAlert)=\"onClosedAlert($event)\"\n            (handleAppearPopup)=\"onHandleAppearPopup($event)\"\n          ></lib-client-home>\n        </div>\n      </swiper-slide>\n      <swiper-slide class=\"no-swiping-selector\">\n        <div class=\"swiper__client-home\">\n          @if (config.alertStatus.compatibilityProfileTrait) {\n            <div class=\"alert-popup-trait-chart\">\n              <lib-alert-popup\n                [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.FORCE_GRAPH_COMPATIBILITY.TITLE' | translate\"\n                [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.FORCE_GRAPH_COMPATIBILITY.DESCRIPTION' | translate\"\n                (closed)=\"\n                  onClosedAlert({\n                    event: $event,\n                    field: alertStatusFields.compatibilityProfileTrait,\n                  })\n                \"\n              ></lib-alert-popup>\n            </div>\n          }\n          <lib-client-home\n            [config]=\"{\n              schedulerAdsTemplate: config?.schedulerAdsTemplate,\n              schedulerTabAdsTemplate: config?.schedulerTabAdsTemplate,\n              chatAdsTemplate: config?.chatAdsTemplate,\n              chatTabAdsTemplate: config?.chatTabAdsTemplate,\n              traitVisualAdsTemplate: config?.traitVisualAdsTemplate,\n              activeIndex: config?.activeChartItem,\n              clientMatches$: config?.clientMatches$,\n              component: components.ClientMatchTraitChart,\n              default: config?.default,\n              thumbsSwiperOptions: clientHomeThumbsSwiperOptions,\n              polygonColors: config?.polygonColors,\n              spiderConfig: config?.spiderConfig,\n              alertStatus: config.alertStatus,\n              bottomThumbs: true,\n              showValueProportionLabel: false,\n              hideProgressBar: true,\n            }\"\n          ></lib-client-home>\n        </div>\n      </swiper-slide>\n      <swiper-slide class=\"no-swiping-selector\">\n        <div class=\"swiper__client-home\">\n          @if (config.alertStatus.compatibilityProfileSpider) {\n            <div class=\"alert-popup-spider-chart\">\n              <lib-alert-popup\n                [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.COMPATIBILITY_PROFILE.TITLE' | translate\"\n                [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.COMPATIBILITY_PROFILE.DESCRIPTION' | translate\"\n                (closed)=\"\n                  onClosedAlert({\n                    event: $event,\n                    field: alertStatusFields.compatibilityProfileSpider,\n                  })\n                \"\n              ></lib-alert-popup>\n            </div>\n          }\n          <div [class.spider-chart___active]=\"isMinimizeVisual\">\n            <lib-client-home\n              [config]=\"{\n                schedulerAdsTemplate: config?.schedulerAdsTemplate,\n                schedulerTabAdsTemplate: config?.schedulerTabAdsTemplate,\n                chatAdsTemplate: config?.chatAdsTemplate,\n                chatTabAdsTemplate: config?.chatTabAdsTemplate,\n                traitVisualAdsTemplate: config?.traitVisualAdsTemplate,\n                activeIndex: config?.activeChartItem,\n                clientMatches$: config?.clientMatches$,\n                component: components.ClientMatchSpiderChart,\n                default: config?.default,\n                spiderConfig: config?.spiderConfig,\n                polygonColors: config?.polygonColors,\n                alertStatus: config.alertStatus,\n                bottomThumbs: true,\n                showValueProportionLabel: false,\n                hideProgressBar: true,\n              }\"\n            ></lib-client-home>\n          </div>\n        </div>\n      </swiper-slide>\n      @if ((config?.clientMatches$ | async)?.[config?.activeIndex]?.showHandoff || config.default) {\n        <swiper-slide class=\"no-swiping-selector\">\n          <div class=\"swiper__client-home\">\n            @if (config.alertStatus.chatHandoff) {\n              <div class=\"alert-popup-chat-handoff\">\n                <lib-alert-popup\n                  [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.HANDOFF_CHAT.TITLE' | translate\"\n                  [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.HANDOFF_CHAT.DESCRIPTION' | translate\"\n                  (closed)=\"\n                    onClosedAlert({\n                      event: $event,\n                      field: alertStatusFields.chatHandoff,\n                    })\n                  \"\n                ></lib-alert-popup>\n              </div>\n            }\n            @if (config.alertStatus.chatProgress) {\n              <div class=\"alert-popup-chat-progress\">\n                <lib-alert-popup\n                  [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.CHAT_PROGRESS.TITLE' | translate\"\n                  [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.CHAT_PROGRESS.DESCRIPTION' | translate\"\n                  (closed)=\"\n                    onClosedAlert({\n                      event: $event,\n                      field: alertStatusFields.chatProgress,\n                    })\n                  \"\n                ></lib-alert-popup>\n              </div>\n            }\n            <lib-client-home\n              [config]=\"{\n                schedulerAdsTemplate: config?.schedulerAdsTemplate,\n                schedulerTabAdsTemplate: config?.schedulerTabAdsTemplate,\n                chatAdsTemplate: config?.chatAdsTemplate,\n                chatTabAdsTemplate: config?.chatTabAdsTemplate,\n                traitVisualAdsTemplate: config?.traitVisualAdsTemplate,\n                activeIndex: config?.activeIndex,\n                clientMatches$: config?.clientMatches$,\n                component: components.ChatHandoff,\n                default: config?.default,\n                alertStatus: config.alertStatus,\n                hideStatuses: true,\n                bottomThumbs: true,\n                showValueProportionLabel: false,\n                hideProgressBar: true,\n              }\"\n              (addMessage)=\"handleNewMessage($event)\"\n              (getMessages)=\"getMessages?.emit($event)\"\n              (activeIndexChange)=\"onActiveProspectChange($event)\"\n            ></lib-client-home>\n          </div>\n        </swiper-slide>\n      }\n    </ng-container>\n  </lib-dashboard-swipeable-tabs>\n</div>\n", styles: [":host{--match-percentage-font-size: 1.5em;--container-sides-shadow-width: 15px;--match-percentage-value-height: 3em;position:relative}.agenda-handler{height:133px;overflow:hidden;transition:height .5s ease;position:relative}.agenda-handler.has-ads{height:fit-content}.agenda-handler.height-zero-activated{height:100%!important}.agenda-handler .agenda-title{display:flex;width:100%;padding:0 23.5px;font-size:12px}.agenda-handler .agenda-title span{margin-left:5px}.agenda-handler lib-agenda{position:relative;display:block;width:100%;margin:auto;padding:0 5px}.agenda-handler .alert-popup-agenda{position:absolute;opacity:1;top:40px;right:40px;z-index:999;transition:opacity .3s ease}.client-home__container{height:calc(100% - 133px)}.client-home__container.has-ads{height:calc(100% - 190px)}.client-home__container>lib-swipeable-tabs{height:100%;display:block}.height-zero{height:0px!important}.opacity-zero{opacity:0!important;pointer-events:none}.tab{display:flex;gap:7px;padding:10px 30px;color:#fff9;cursor:pointer}.tab.active{color:#fff}.tab.disabled{opacity:.3;color:#fff9!important;pointer-events:none}.swiper__scheduler{height:100%}.swiper__scheduler lib-client-home{height:100%;display:block}.swiper__client-home{position:relative;width:100%;height:100%}.swiper__client-home .alert-popup-client-scheduler{position:absolute;z-index:999;top:100px;right:40px}.swiper__client-home .alert-popup-chat-handoff{position:absolute;z-index:999;top:40px;right:40px}.swiper__client-home .alert-popup-chat-progress{position:absolute;z-index:999;top:200px;right:40px}.swiper__client-home .alert-popup-trait-chart,.swiper__client-home .alert-popup-spider-chart{position:absolute;z-index:999;top:123px;right:40px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: LibChatComponentModule }, { kind: "ngmodule", type: LibAgendaModule }, { kind: "component", type: AgendaComponent, selector: "lib-agenda", inputs: ["adsTemplate", "agendaAdsData", "loading$", "startDate", "endDate", "events", "setAdsData"] }, { kind: "ngmodule", type: PipeModule }, { kind: "component", type: LibClientHomeComponent, selector: "lib-client-home", inputs: ["config"], outputs: ["activeIndexChange", "addMessage", "getMessages", "bookEvent", "removeSuggestion", "handleAppearPopup"] }, { kind: "component", type: LibDashboardSwipeableTabsComponent, selector: "lib-dashboard-swipeable-tabs", inputs: ["thumbsSwiperOptions", "mainSwiperOptions", "activeIndex", "bottomThumbs", "slideContentMaxHeight", "mainSwiperHeight", "subMainSwiperHeight", "thumbsSwiperHeight", "generalSwiperHeight"], outputs: ["activeIndexChange"] }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: AlertPopupComponent, selector: "lib-alert-popup", inputs: ["title", "description", "timeState", "number"], outputs: ["closed"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LibClientDashboardComponent, isStandalone: true, selector: "lib-client-dashboard", inputs: { config: "config", agendaAdsData: "agendaAdsData" }, outputs: { addMessage: "addMessage", getMessages: "getMessages", bookEvent: "bookEvent", removeSuggestion: "removeSuggestion", activeIndexChange: "activeIndexChange", handleClosedAlert: "handleClosedAlert", handleAppearPopup: "handleAppearPopup" }, ngImport: i0, template: "<!-- Horizontal Agenda -->\n<div class=\"agenda-handler\" [class.height-zero]=\"isMinimizeVisual\" [class.has-ads]=\"config?.agendaAdsTemplate\">\n  <h3 class=\"agenda-title\">\n    {{ 'CLIENT_DASHBOARD.TITLES.UPCOMING_DATES' | translate }}\n    <span (click)=\"onHandleAppearPopup(alertStatusFields.upcomingDates)\"><img [width]=\"12\" [height]=\"12\" [src]=\"assetPaths.defaultIcon\" [alt]=\"item?.label + ' icon'\" /></span>\n  </h3>\n  <lib-agenda [events]=\"config?.events\" [adsTemplate]=\"config?.agendaAdsTemplate\" [agendaAdsData]=\"agendaAdsData\"></lib-agenda>\n  @if (config.alertStatus.upcomingDates) {\n    <div class=\"alert-popup-agenda\" [class.opacity-zero]=\"isMinimizeVisual\">\n      <lib-alert-popup\n        [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.UPCOMING_DATES.TITLE' | translate\"\n        [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.UPCOMING_DATES.DESCRIPTION' | translate\"\n        (closed)=\"\n          onClosedAlert({\n            event: $event,\n            field: alertStatusFields.upcomingDates,\n          })\n        \"\n      ></lib-alert-popup>\n    </div>\n  }\n</div>\n<!-- Scheduler - Trait - Spider - Handoff -->\n<div\n  (click)=\"onClick($event)\"\n  [class.height-zero-activated]=\"isMinimizeVisual\"\n  (touchstart)=\"onTouchStart($event)\"\n  [class.has-ads]=\"!!config?.agendaAdsTemplate?.elementRef\"\n  class=\"client-home__container\"\n>\n  <lib-dashboard-swipeable-tabs\n    [activeIndex]=\"config?.activeTabIndex\"\n    [thumbsSwiperOptions]=\"dashboardThumbsSwiperOptions\"\n    [mainSwiperOptions]=\"mainSwiperOptions\"\n    [slideContentMaxHeight]=\"config?.slideContentMaxHeight\"\n    [bottomThumbs]=\"false\"\n    [generalSwiperHeight]=\"'100%'\"\n    [mainSwiperHeight]=\"'calc(100% - 34px)'\"\n    [thumbsSwiperHeight]=\"'34px'\"\n    [subMainSwiperHeight]=\"'100%'\"\n    (activeIndexChange)=\"onActiveTabIndexChange($event)\"\n  >\n    <ng-container thumb-slides>\n      @for (item of items; let i = $index; track item) {\n        <swiper-slide class=\"main-tab\">\n          <span\n            class=\"tab\"\n            [class.active]=\"i === config.activeTabIndex\"\n            [class.disabled]=\"item?.key === 'CHAT_HANDOFF' && !(config?.clientMatches$ | async)?.[config?.activeIndex]?.showHandoff && !config.default\"\n          >\n            {{ item?.label | translate }}\n            @if (i === config.activeTabIndex) {\n              <ng-container>\n                <img [width]=\"12\" [height]=\"12\" [src]=\"assetPaths.defaultIcon\" [alt]=\"item?.label + ' info icon'\" (click)=\"item.onClickInfo()\" />\n                <img [width]=\"12\" [height]=\"12\" [src]=\"assetPaths.settingsIcon\" alt=\"Settings icon\" (click)=\"onSettingsClick(); $event.stopPropagation()\" style=\"cursor: pointer\" />\n              </ng-container>\n            }\n          </span>\n        </swiper-slide>\n      }\n    </ng-container>\n    <ng-container main-slides>\n      <swiper-slide class=\"no-swiping-selector swiper__scheduler\">\n        <div class=\"swiper__client-home\">\n          @if (config.alertStatus.chatMeetupAgenda) {\n            <div class=\"alert-popup-client-scheduler\">\n              <lib-alert-popup\n                [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.CHAT_MEETUP_AGENDA.TITLE' | translate\"\n                [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.CHAT_MEETUP_AGENDA.DESCRIPTION' | translate\"\n                (closed)=\"\n                  onClosedAlert({\n                    event: $event,\n                    field: alertStatusFields.chatMeetupAgenda,\n                  })\n                \"\n              ></lib-alert-popup>\n            </div>\n          }\n          <lib-client-home\n            [config]=\"{\n              schedulerAdsTemplate: config?.schedulerAdsTemplate,\n              schedulerTabAdsTemplate: config?.schedulerTabAdsTemplate,\n              chatAdsTemplate: config?.chatAdsTemplate,\n              chatTabAdsTemplate: config?.chatTabAdsTemplate,\n              traitVisualAdsTemplate: config?.traitVisualAdsTemplate,\n              activeIndex: config?.activeIndex,\n              clientMatches$: config?.clientMatches$,\n              schedulers$: config?.schedulers$,\n              component: components.ChatScheduler,\n              default: config?.default,\n              thumbsSwiperOptions: clientHomeThumbsSwiperOptions,\n              alertStatus: config.alertStatus,\n              bottomThumbs: true,\n              showValueProportionLabel: false,\n              hideProgressBar: true,\n            }\"\n            (bookEvent)=\"bookEvent?.emit($event)\"\n            (removeSuggestion)=\"removeSuggestion?.emit($event)\"\n            (addMessage)=\"handleNewMessage($event)\"\n            (getMessages)=\"getMessages.emit($event)\"\n            (activeIndexChange)=\"onActiveProspectChange($event)\"\n            (handleClosedAlert)=\"onClosedAlert($event)\"\n            (handleAppearPopup)=\"onHandleAppearPopup($event)\"\n          ></lib-client-home>\n        </div>\n      </swiper-slide>\n      <swiper-slide class=\"no-swiping-selector\">\n        <div class=\"swiper__client-home\">\n          @if (config.alertStatus.compatibilityProfileTrait) {\n            <div class=\"alert-popup-trait-chart\">\n              <lib-alert-popup\n                [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.FORCE_GRAPH_COMPATIBILITY.TITLE' | translate\"\n                [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.FORCE_GRAPH_COMPATIBILITY.DESCRIPTION' | translate\"\n                (closed)=\"\n                  onClosedAlert({\n                    event: $event,\n                    field: alertStatusFields.compatibilityProfileTrait,\n                  })\n                \"\n              ></lib-alert-popup>\n            </div>\n          }\n          <lib-client-home\n            [config]=\"{\n              schedulerAdsTemplate: config?.schedulerAdsTemplate,\n              schedulerTabAdsTemplate: config?.schedulerTabAdsTemplate,\n              chatAdsTemplate: config?.chatAdsTemplate,\n              chatTabAdsTemplate: config?.chatTabAdsTemplate,\n              traitVisualAdsTemplate: config?.traitVisualAdsTemplate,\n              activeIndex: config?.activeChartItem,\n              clientMatches$: config?.clientMatches$,\n              component: components.ClientMatchTraitChart,\n              default: config?.default,\n              thumbsSwiperOptions: clientHomeThumbsSwiperOptions,\n              polygonColors: config?.polygonColors,\n              spiderConfig: config?.spiderConfig,\n              alertStatus: config.alertStatus,\n              bottomThumbs: true,\n              showValueProportionLabel: false,\n              hideProgressBar: true,\n            }\"\n          ></lib-client-home>\n        </div>\n      </swiper-slide>\n      <swiper-slide class=\"no-swiping-selector\">\n        <div class=\"swiper__client-home\">\n          @if (config.alertStatus.compatibilityProfileSpider) {\n            <div class=\"alert-popup-spider-chart\">\n              <lib-alert-popup\n                [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.COMPATIBILITY_PROFILE.TITLE' | translate\"\n                [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.COMPATIBILITY_PROFILE.DESCRIPTION' | translate\"\n                (closed)=\"\n                  onClosedAlert({\n                    event: $event,\n                    field: alertStatusFields.compatibilityProfileSpider,\n                  })\n                \"\n              ></lib-alert-popup>\n            </div>\n          }\n          <div [class.spider-chart___active]=\"isMinimizeVisual\">\n            <lib-client-home\n              [config]=\"{\n                schedulerAdsTemplate: config?.schedulerAdsTemplate,\n                schedulerTabAdsTemplate: config?.schedulerTabAdsTemplate,\n                chatAdsTemplate: config?.chatAdsTemplate,\n                chatTabAdsTemplate: config?.chatTabAdsTemplate,\n                traitVisualAdsTemplate: config?.traitVisualAdsTemplate,\n                activeIndex: config?.activeChartItem,\n                clientMatches$: config?.clientMatches$,\n                component: components.ClientMatchSpiderChart,\n                default: config?.default,\n                spiderConfig: config?.spiderConfig,\n                polygonColors: config?.polygonColors,\n                alertStatus: config.alertStatus,\n                bottomThumbs: true,\n                showValueProportionLabel: false,\n                hideProgressBar: true,\n              }\"\n            ></lib-client-home>\n          </div>\n        </div>\n      </swiper-slide>\n      @if ((config?.clientMatches$ | async)?.[config?.activeIndex]?.showHandoff || config.default) {\n        <swiper-slide class=\"no-swiping-selector\">\n          <div class=\"swiper__client-home\">\n            @if (config.alertStatus.chatHandoff) {\n              <div class=\"alert-popup-chat-handoff\">\n                <lib-alert-popup\n                  [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.HANDOFF_CHAT.TITLE' | translate\"\n                  [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.HANDOFF_CHAT.DESCRIPTION' | translate\"\n                  (closed)=\"\n                    onClosedAlert({\n                      event: $event,\n                      field: alertStatusFields.chatHandoff,\n                    })\n                  \"\n                ></lib-alert-popup>\n              </div>\n            }\n            @if (config.alertStatus.chatProgress) {\n              <div class=\"alert-popup-chat-progress\">\n                <lib-alert-popup\n                  [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.CHAT_PROGRESS.TITLE' | translate\"\n                  [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.CHAT_PROGRESS.DESCRIPTION' | translate\"\n                  (closed)=\"\n                    onClosedAlert({\n                      event: $event,\n                      field: alertStatusFields.chatProgress,\n                    })\n                  \"\n                ></lib-alert-popup>\n              </div>\n            }\n            <lib-client-home\n              [config]=\"{\n                schedulerAdsTemplate: config?.schedulerAdsTemplate,\n                schedulerTabAdsTemplate: config?.schedulerTabAdsTemplate,\n                chatAdsTemplate: config?.chatAdsTemplate,\n                chatTabAdsTemplate: config?.chatTabAdsTemplate,\n                traitVisualAdsTemplate: config?.traitVisualAdsTemplate,\n                activeIndex: config?.activeIndex,\n                clientMatches$: config?.clientMatches$,\n                component: components.ChatHandoff,\n                default: config?.default,\n                alertStatus: config.alertStatus,\n                hideStatuses: true,\n                bottomThumbs: true,\n                showValueProportionLabel: false,\n                hideProgressBar: true,\n              }\"\n              (addMessage)=\"handleNewMessage($event)\"\n              (getMessages)=\"getMessages?.emit($event)\"\n              (activeIndexChange)=\"onActiveProspectChange($event)\"\n            ></lib-client-home>\n          </div>\n        </swiper-slide>\n      }\n    </ng-container>\n  </lib-dashboard-swipeable-tabs>\n</div>\n", styles: [":host{--match-percentage-font-size: 1.5em;--container-sides-shadow-width: 15px;--match-percentage-value-height: 3em;position:relative}.agenda-handler{height:133px;overflow:hidden;transition:height .5s ease;position:relative}.agenda-handler.has-ads{height:fit-content}.agenda-handler.height-zero-activated{height:100%!important}.agenda-handler .agenda-title{display:flex;width:100%;padding:0 23.5px;font-size:12px}.agenda-handler .agenda-title span{margin-left:5px}.agenda-handler lib-agenda{position:relative;display:block;width:100%;margin:auto;padding:0 5px}.agenda-handler .alert-popup-agenda{position:absolute;opacity:1;top:40px;right:40px;z-index:999;transition:opacity .3s ease}.client-home__container{height:calc(100% - 133px)}.client-home__container.has-ads{height:calc(100% - 190px)}.client-home__container>lib-swipeable-tabs{height:100%;display:block}.height-zero{height:0px!important}.opacity-zero{opacity:0!important;pointer-events:none}.tab{display:flex;gap:7px;padding:10px 30px;color:#fff9;cursor:pointer}.tab.active{color:#fff}.tab.disabled{opacity:.3;color:#fff9!important;pointer-events:none}.swiper__scheduler{height:100%}.swiper__scheduler lib-client-home{height:100%;display:block}.swiper__client-home{position:relative;width:100%;height:100%}.swiper__client-home .alert-popup-client-scheduler{position:absolute;z-index:999;top:100px;right:40px}.swiper__client-home .alert-popup-chat-handoff{position:absolute;z-index:999;top:40px;right:40px}.swiper__client-home .alert-popup-chat-progress{position:absolute;z-index:999;top:200px;right:40px}.swiper__client-home .alert-popup-trait-chart,.swiper__client-home .alert-popup-spider-chart{position:absolute;z-index:999;top:123px;right:40px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: LibChatComponentModule }, { kind: "ngmodule", type: LibAgendaModule }, { kind: "component", type: AgendaComponent, selector: "lib-agenda", inputs: ["adsTemplate", "agendaAdsData", "loading$", "startDate", "endDate", "events", "setAdsData"] }, { kind: "ngmodule", type: PipeModule }, { kind: "component", type: LibClientHomeComponent, selector: "lib-client-home", inputs: ["config"], outputs: ["activeIndexChange", "addMessage", "getMessages", "bookEvent", "removeSuggestion", "handleAppearPopup"] }, { kind: "component", type: LibDashboardSwipeableTabsComponent, selector: "lib-dashboard-swipeable-tabs", inputs: ["thumbsSwiperOptions", "mainSwiperOptions", "activeIndex", "bottomThumbs", "slideContentMaxHeight", "mainSwiperHeight", "subMainSwiperHeight", "thumbsSwiperHeight", "generalSwiperHeight"], outputs: ["activeIndexChange"] }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: AlertPopupComponent, selector: "lib-alert-popup", inputs: ["title", "description", "timeState", "number"], outputs: ["closed"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibClientDashboardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-client-dashboard', imports: [CommonModule, TranslateModule, LibChatComponentModule, LibAgendaModule, PipeModule, LibClientHomeComponent, LibDashboardSwipeableTabsComponent, SharedModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Horizontal Agenda -->\n<div class=\"agenda-handler\" [class.height-zero]=\"isMinimizeVisual\" [class.has-ads]=\"config?.agendaAdsTemplate\">\n  <h3 class=\"agenda-title\">\n    {{ 'CLIENT_DASHBOARD.TITLES.UPCOMING_DATES' | translate }}\n    <span (click)=\"onHandleAppearPopup(alertStatusFields.upcomingDates)\"><img [width]=\"12\" [height]=\"12\" [src]=\"assetPaths.defaultIcon\" [alt]=\"item?.label + ' icon'\" /></span>\n  </h3>\n  <lib-agenda [events]=\"config?.events\" [adsTemplate]=\"config?.agendaAdsTemplate\" [agendaAdsData]=\"agendaAdsData\"></lib-agenda>\n  @if (config.alertStatus.upcomingDates) {\n    <div class=\"alert-popup-agenda\" [class.opacity-zero]=\"isMinimizeVisual\">\n      <lib-alert-popup\n        [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.UPCOMING_DATES.TITLE' | translate\"\n        [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.UPCOMING_DATES.DESCRIPTION' | translate\"\n        (closed)=\"\n          onClosedAlert({\n            event: $event,\n            field: alertStatusFields.upcomingDates,\n          })\n        \"\n      ></lib-alert-popup>\n    </div>\n  }\n</div>\n<!-- Scheduler - Trait - Spider - Handoff -->\n<div\n  (click)=\"onClick($event)\"\n  [class.height-zero-activated]=\"isMinimizeVisual\"\n  (touchstart)=\"onTouchStart($event)\"\n  [class.has-ads]=\"!!config?.agendaAdsTemplate?.elementRef\" class=\"client-home__container\">\n  <lib-dashboard-swipeable-tabs\n    [activeIndex]=\"config?.activeTabIndex\"\n    [thumbsSwiperOptions]=\"dashboardThumbsSwiperOptions\"\n    [mainSwiperOptions]=\"mainSwiperOptions\"\n    [slideContentMaxHeight]=\"config?.slideContentMaxHeight\"\n    [bottomThumbs]=\"false\"\n    [generalSwiperHeight]=\"'100%'\"\n    [mainSwiperHeight]=\"'calc(100% - 34px)'\"\n    [thumbsSwiperHeight]=\"'34px'\"\n    [subMainSwiperHeight]=\"'100%'\"\n    (activeIndexChange)=\"onActiveTabIndexChange($event)\"\n  >\n    <ng-container thumb-slides>\n      @for (item of items; let i = $index; track item) {\n        <swiper-slide class=\"main-tab\">\n          <span\n            class=\"tab\"\n            [class.active]=\"i === config.activeTabIndex\"\n            [class.disabled]=\"item?.key === 'CHAT_HANDOFF' && !(config?.clientMatches$ | async)?.[config?.activeIndex]?.showHandoff && !config.default\"\n          >\n            {{ item?.label | translate }}\n            @if (i === config.activeTabIndex) {\n              <ng-container>\n                <img\n                  [width]=\"12\"\n                  [height]=\"12\"\n                  [src]=\"assetPaths.defaultIcon\"\n                  [alt]=\"item?.label + ' info icon'\"\n                  (click)=\"item.onClickInfo()\"\n                />\n                <img\n                  [width]=\"12\"\n                  [height]=\"12\"\n                  [src]=\"assetPaths.settingsIcon\"\n                  alt=\"Settings icon\"\n                  (click)=\"onSettingsClick(); $event.stopPropagation()\"\n                  style=\"cursor: pointer;\"\n                />\n              </ng-container>\n            }\n          </span>\n        </swiper-slide>\n      }\n    </ng-container>\n    <ng-container main-slides>\n      <swiper-slide class=\"no-swiping-selector swiper__scheduler\">\n        <div class=\"swiper__client-home\">\n          @if (config.alertStatus.chatMeetupAgenda) {\n            <div class=\"alert-popup-client-scheduler\">\n              <lib-alert-popup\n                [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.CHAT_MEETUP_AGENDA.TITLE' | translate\"\n                [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.CHAT_MEETUP_AGENDA.DESCRIPTION' | translate\"\n                (closed)=\"\n                  onClosedAlert({\n                    event: $event,\n                    field: alertStatusFields.chatMeetupAgenda,\n                  })\n                \"\n              ></lib-alert-popup>\n            </div>\n          }\n          <lib-client-home\n            [config]=\"{\n              schedulerAdsTemplate: config?.schedulerAdsTemplate,\n              schedulerTabAdsTemplate: config?.schedulerTabAdsTemplate,\n              chatAdsTemplate: config?.chatAdsTemplate,\n              chatTabAdsTemplate: config?.chatTabAdsTemplate,\n              traitVisualAdsTemplate: config?.traitVisualAdsTemplate,\n              activeIndex: config?.activeIndex,\n              clientMatches$: config?.clientMatches$,\n              schedulers$: config?.schedulers$,\n              component: components.ChatScheduler,\n              default: config?.default,\n              thumbsSwiperOptions: clientHomeThumbsSwiperOptions,\n              alertStatus: config.alertStatus,\n              bottomThumbs: true,\n              showValueProportionLabel: false,\n              hideProgressBar: true,\n            }\"\n            (bookEvent)=\"bookEvent?.emit($event)\"\n            (removeSuggestion)=\"removeSuggestion?.emit($event)\"\n            (addMessage)=\"handleNewMessage($event)\"\n            (getMessages)=\"getMessages.emit($event)\"\n            (activeIndexChange)=\"onActiveProspectChange($event)\"\n            (handleClosedAlert)=\"onClosedAlert($event)\"\n            (handleAppearPopup)=\"onHandleAppearPopup($event)\"\n          ></lib-client-home>\n        </div>\n      </swiper-slide>\n      <swiper-slide class=\"no-swiping-selector\">\n        <div class=\"swiper__client-home\">\n          @if (config.alertStatus.compatibilityProfileTrait) {\n            <div class=\"alert-popup-trait-chart\">\n              <lib-alert-popup\n                [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.FORCE_GRAPH_COMPATIBILITY.TITLE' | translate\"\n                [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.FORCE_GRAPH_COMPATIBILITY.DESCRIPTION' | translate\"\n                (closed)=\"\n                  onClosedAlert({\n                    event: $event,\n                    field: alertStatusFields.compatibilityProfileTrait,\n                  })\n                \"\n              ></lib-alert-popup>\n            </div>\n          }\n          <lib-client-home\n            [config]=\"{\n              schedulerAdsTemplate: config?.schedulerAdsTemplate,\n              schedulerTabAdsTemplate: config?.schedulerTabAdsTemplate,\n              chatAdsTemplate: config?.chatAdsTemplate,\n              chatTabAdsTemplate: config?.chatTabAdsTemplate,\n              traitVisualAdsTemplate: config?.traitVisualAdsTemplate,\n              activeIndex: config?.activeChartItem,\n              clientMatches$: config?.clientMatches$,\n              component: components.ClientMatchTraitChart,\n              default: config?.default,\n              thumbsSwiperOptions: clientHomeThumbsSwiperOptions,\n              polygonColors: config?.polygonColors,\n              spiderConfig: config?.spiderConfig,\n              alertStatus: config.alertStatus,\n              bottomThumbs: true,\n              showValueProportionLabel: false,\n              hideProgressBar: true,\n            }\"\n          ></lib-client-home>\n        </div>\n      </swiper-slide>\n      <swiper-slide class=\"no-swiping-selector\">\n        <div class=\"swiper__client-home\">\n          @if (config.alertStatus.compatibilityProfileSpider) {\n            <div class=\"alert-popup-spider-chart\">\n              <lib-alert-popup\n                [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.COMPATIBILITY_PROFILE.TITLE' | translate\"\n                [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.COMPATIBILITY_PROFILE.DESCRIPTION' | translate\"\n                (closed)=\"\n                  onClosedAlert({\n                    event: $event,\n                    field: alertStatusFields.compatibilityProfileSpider,\n                  })\n                \"\n              ></lib-alert-popup>\n            </div>\n          }\n          <div [class.spider-chart___active]=\"isMinimizeVisual\">\n            <lib-client-home\n              [config]=\"{\n                schedulerAdsTemplate: config?.schedulerAdsTemplate,\n                schedulerTabAdsTemplate: config?.schedulerTabAdsTemplate,\n                chatAdsTemplate: config?.chatAdsTemplate,\n                chatTabAdsTemplate: config?.chatTabAdsTemplate,\n                traitVisualAdsTemplate: config?.traitVisualAdsTemplate,\n                activeIndex: config?.activeChartItem,\n                clientMatches$: config?.clientMatches$,\n                component: components.ClientMatchSpiderChart,\n                default: config?.default,\n                spiderConfig: config?.spiderConfig,\n                polygonColors: config?.polygonColors,\n                alertStatus: config.alertStatus,\n                bottomThumbs: true,\n                showValueProportionLabel: false,\n                hideProgressBar: true,\n              }\"\n            ></lib-client-home>\n          </div>\n        </div>\n      </swiper-slide>\n      @if ((config?.clientMatches$ | async)?.[config?.activeIndex]?.showHandoff || config.default) {\n        <swiper-slide class=\"no-swiping-selector\">\n          <div class=\"swiper__client-home\">\n            @if (config.alertStatus.chatHandoff) {\n              <div class=\"alert-popup-chat-handoff\">\n                <lib-alert-popup\n                  [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.HANDOFF_CHAT.TITLE' | translate\"\n                  [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.HANDOFF_CHAT.DESCRIPTION' | translate\"\n                  (closed)=\"\n                    onClosedAlert({\n                      event: $event,\n                      field: alertStatusFields.chatHandoff,\n                    })\n                  \"\n                ></lib-alert-popup>\n              </div>\n            }\n            @if (config.alertStatus.chatProgress) {\n              <div class=\"alert-popup-chat-progress\">\n                <lib-alert-popup\n                  [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.CHAT_PROGRESS.TITLE' | translate\"\n                  [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.CHAT_PROGRESS.DESCRIPTION' | translate\"\n                  (closed)=\"\n                    onClosedAlert({\n                      event: $event,\n                      field: alertStatusFields.chatProgress,\n                    })\n                  \"\n                ></lib-alert-popup>\n              </div>\n            }\n            <lib-client-home\n              [config]=\"{\n                schedulerAdsTemplate: config?.schedulerAdsTemplate,\n                schedulerTabAdsTemplate: config?.schedulerTabAdsTemplate,\n                chatAdsTemplate: config?.chatAdsTemplate,\n                chatTabAdsTemplate: config?.chatTabAdsTemplate,\n                traitVisualAdsTemplate: config?.traitVisualAdsTemplate,\n                activeIndex: config?.activeIndex,\n                clientMatches$: config?.clientMatches$,\n                component: components.ChatHandoff,\n                default: config?.default,\n                alertStatus: config.alertStatus,\n                hideStatuses: true,\n                bottomThumbs: true,\n                showValueProportionLabel: false,\n                hideProgressBar: true,\n              }\"\n              (addMessage)=\"handleNewMessage($event)\"\n              (getMessages)=\"getMessages?.emit($event)\"\n              (activeIndexChange)=\"onActiveProspectChange($event)\"\n            ></lib-client-home>\n          </div>\n        </swiper-slide>\n      }\n    </ng-container>\n  </lib-dashboard-swipeable-tabs>\n</div>\n", styles: [":host{--match-percentage-font-size: 1.5em;--container-sides-shadow-width: 15px;--match-percentage-value-height: 3em;position:relative}.agenda-handler{height:133px;overflow:hidden;transition:height .5s ease;position:relative}.agenda-handler.has-ads{height:fit-content}.agenda-handler.height-zero-activated{height:100%!important}.agenda-handler .agenda-title{display:flex;width:100%;padding:0 23.5px;font-size:12px}.agenda-handler .agenda-title span{margin-left:5px}.agenda-handler lib-agenda{position:relative;display:block;width:100%;margin:auto;padding:0 5px}.agenda-handler .alert-popup-agenda{position:absolute;opacity:1;top:40px;right:40px;z-index:999;transition:opacity .3s ease}.client-home__container{height:calc(100% - 133px)}.client-home__container.has-ads{height:calc(100% - 190px)}.client-home__container>lib-swipeable-tabs{height:100%;display:block}.height-zero{height:0px!important}.opacity-zero{opacity:0!important;pointer-events:none}.tab{display:flex;gap:7px;padding:10px 30px;color:#fff9;cursor:pointer}.tab.active{color:#fff}.tab.disabled{opacity:.3;color:#fff9!important;pointer-events:none}.swiper__scheduler{height:100%}.swiper__scheduler lib-client-home{height:100%;display:block}.swiper__client-home{position:relative;width:100%;height:100%}.swiper__client-home .alert-popup-client-scheduler{position:absolute;z-index:999;top:100px;right:40px}.swiper__client-home .alert-popup-chat-handoff{position:absolute;z-index:999;top:40px;right:40px}.swiper__client-home .alert-popup-chat-progress{position:absolute;z-index:999;top:200px;right:40px}.swiper__client-home .alert-popup-trait-chart,.swiper__client-home .alert-popup-spider-chart{position:absolute;z-index:999;top:123px;right:40px}\n"] }]
+            args: [{ selector: 'lib-client-dashboard', imports: [CommonModule, TranslateModule, LibChatComponentModule, LibAgendaModule, PipeModule, LibClientHomeComponent, LibDashboardSwipeableTabsComponent, SharedModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Horizontal Agenda -->\n<div class=\"agenda-handler\" [class.height-zero]=\"isMinimizeVisual\" [class.has-ads]=\"config?.agendaAdsTemplate\">\n  <h3 class=\"agenda-title\">\n    {{ 'CLIENT_DASHBOARD.TITLES.UPCOMING_DATES' | translate }}\n    <span (click)=\"onHandleAppearPopup(alertStatusFields.upcomingDates)\"><img [width]=\"12\" [height]=\"12\" [src]=\"assetPaths.defaultIcon\" [alt]=\"item?.label + ' icon'\" /></span>\n  </h3>\n  <lib-agenda [events]=\"config?.events\" [adsTemplate]=\"config?.agendaAdsTemplate\" [agendaAdsData]=\"agendaAdsData\"></lib-agenda>\n  @if (config.alertStatus.upcomingDates) {\n    <div class=\"alert-popup-agenda\" [class.opacity-zero]=\"isMinimizeVisual\">\n      <lib-alert-popup\n        [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.UPCOMING_DATES.TITLE' | translate\"\n        [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.UPCOMING_DATES.DESCRIPTION' | translate\"\n        (closed)=\"\n          onClosedAlert({\n            event: $event,\n            field: alertStatusFields.upcomingDates,\n          })\n        \"\n      ></lib-alert-popup>\n    </div>\n  }\n</div>\n<!-- Scheduler - Trait - Spider - Handoff -->\n<div\n  (click)=\"onClick($event)\"\n  [class.height-zero-activated]=\"isMinimizeVisual\"\n  (touchstart)=\"onTouchStart($event)\"\n  [class.has-ads]=\"!!config?.agendaAdsTemplate?.elementRef\"\n  class=\"client-home__container\"\n>\n  <lib-dashboard-swipeable-tabs\n    [activeIndex]=\"config?.activeTabIndex\"\n    [thumbsSwiperOptions]=\"dashboardThumbsSwiperOptions\"\n    [mainSwiperOptions]=\"mainSwiperOptions\"\n    [slideContentMaxHeight]=\"config?.slideContentMaxHeight\"\n    [bottomThumbs]=\"false\"\n    [generalSwiperHeight]=\"'100%'\"\n    [mainSwiperHeight]=\"'calc(100% - 34px)'\"\n    [thumbsSwiperHeight]=\"'34px'\"\n    [subMainSwiperHeight]=\"'100%'\"\n    (activeIndexChange)=\"onActiveTabIndexChange($event)\"\n  >\n    <ng-container thumb-slides>\n      @for (item of items; let i = $index; track item) {\n        <swiper-slide class=\"main-tab\">\n          <span\n            class=\"tab\"\n            [class.active]=\"i === config.activeTabIndex\"\n            [class.disabled]=\"item?.key === 'CHAT_HANDOFF' && !(config?.clientMatches$ | async)?.[config?.activeIndex]?.showHandoff && !config.default\"\n          >\n            {{ item?.label | translate }}\n            @if (i === config.activeTabIndex) {\n              <ng-container>\n                <img [width]=\"12\" [height]=\"12\" [src]=\"assetPaths.defaultIcon\" [alt]=\"item?.label + ' info icon'\" (click)=\"item.onClickInfo()\" />\n                <img [width]=\"12\" [height]=\"12\" [src]=\"assetPaths.settingsIcon\" alt=\"Settings icon\" (click)=\"onSettingsClick(); $event.stopPropagation()\" style=\"cursor: pointer\" />\n              </ng-container>\n            }\n          </span>\n        </swiper-slide>\n      }\n    </ng-container>\n    <ng-container main-slides>\n      <swiper-slide class=\"no-swiping-selector swiper__scheduler\">\n        <div class=\"swiper__client-home\">\n          @if (config.alertStatus.chatMeetupAgenda) {\n            <div class=\"alert-popup-client-scheduler\">\n              <lib-alert-popup\n                [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.CHAT_MEETUP_AGENDA.TITLE' | translate\"\n                [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.CHAT_MEETUP_AGENDA.DESCRIPTION' | translate\"\n                (closed)=\"\n                  onClosedAlert({\n                    event: $event,\n                    field: alertStatusFields.chatMeetupAgenda,\n                  })\n                \"\n              ></lib-alert-popup>\n            </div>\n          }\n          <lib-client-home\n            [config]=\"{\n              schedulerAdsTemplate: config?.schedulerAdsTemplate,\n              schedulerTabAdsTemplate: config?.schedulerTabAdsTemplate,\n              chatAdsTemplate: config?.chatAdsTemplate,\n              chatTabAdsTemplate: config?.chatTabAdsTemplate,\n              traitVisualAdsTemplate: config?.traitVisualAdsTemplate,\n              activeIndex: config?.activeIndex,\n              clientMatches$: config?.clientMatches$,\n              schedulers$: config?.schedulers$,\n              component: components.ChatScheduler,\n              default: config?.default,\n              thumbsSwiperOptions: clientHomeThumbsSwiperOptions,\n              alertStatus: config.alertStatus,\n              bottomThumbs: true,\n              showValueProportionLabel: false,\n              hideProgressBar: true,\n            }\"\n            (bookEvent)=\"bookEvent?.emit($event)\"\n            (removeSuggestion)=\"removeSuggestion?.emit($event)\"\n            (addMessage)=\"handleNewMessage($event)\"\n            (getMessages)=\"getMessages.emit($event)\"\n            (activeIndexChange)=\"onActiveProspectChange($event)\"\n            (handleClosedAlert)=\"onClosedAlert($event)\"\n            (handleAppearPopup)=\"onHandleAppearPopup($event)\"\n          ></lib-client-home>\n        </div>\n      </swiper-slide>\n      <swiper-slide class=\"no-swiping-selector\">\n        <div class=\"swiper__client-home\">\n          @if (config.alertStatus.compatibilityProfileTrait) {\n            <div class=\"alert-popup-trait-chart\">\n              <lib-alert-popup\n                [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.FORCE_GRAPH_COMPATIBILITY.TITLE' | translate\"\n                [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.FORCE_GRAPH_COMPATIBILITY.DESCRIPTION' | translate\"\n                (closed)=\"\n                  onClosedAlert({\n                    event: $event,\n                    field: alertStatusFields.compatibilityProfileTrait,\n                  })\n                \"\n              ></lib-alert-popup>\n            </div>\n          }\n          <lib-client-home\n            [config]=\"{\n              schedulerAdsTemplate: config?.schedulerAdsTemplate,\n              schedulerTabAdsTemplate: config?.schedulerTabAdsTemplate,\n              chatAdsTemplate: config?.chatAdsTemplate,\n              chatTabAdsTemplate: config?.chatTabAdsTemplate,\n              traitVisualAdsTemplate: config?.traitVisualAdsTemplate,\n              activeIndex: config?.activeChartItem,\n              clientMatches$: config?.clientMatches$,\n              component: components.ClientMatchTraitChart,\n              default: config?.default,\n              thumbsSwiperOptions: clientHomeThumbsSwiperOptions,\n              polygonColors: config?.polygonColors,\n              spiderConfig: config?.spiderConfig,\n              alertStatus: config.alertStatus,\n              bottomThumbs: true,\n              showValueProportionLabel: false,\n              hideProgressBar: true,\n            }\"\n          ></lib-client-home>\n        </div>\n      </swiper-slide>\n      <swiper-slide class=\"no-swiping-selector\">\n        <div class=\"swiper__client-home\">\n          @if (config.alertStatus.compatibilityProfileSpider) {\n            <div class=\"alert-popup-spider-chart\">\n              <lib-alert-popup\n                [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.COMPATIBILITY_PROFILE.TITLE' | translate\"\n                [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.COMPATIBILITY_PROFILE.DESCRIPTION' | translate\"\n                (closed)=\"\n                  onClosedAlert({\n                    event: $event,\n                    field: alertStatusFields.compatibilityProfileSpider,\n                  })\n                \"\n              ></lib-alert-popup>\n            </div>\n          }\n          <div [class.spider-chart___active]=\"isMinimizeVisual\">\n            <lib-client-home\n              [config]=\"{\n                schedulerAdsTemplate: config?.schedulerAdsTemplate,\n                schedulerTabAdsTemplate: config?.schedulerTabAdsTemplate,\n                chatAdsTemplate: config?.chatAdsTemplate,\n                chatTabAdsTemplate: config?.chatTabAdsTemplate,\n                traitVisualAdsTemplate: config?.traitVisualAdsTemplate,\n                activeIndex: config?.activeChartItem,\n                clientMatches$: config?.clientMatches$,\n                component: components.ClientMatchSpiderChart,\n                default: config?.default,\n                spiderConfig: config?.spiderConfig,\n                polygonColors: config?.polygonColors,\n                alertStatus: config.alertStatus,\n                bottomThumbs: true,\n                showValueProportionLabel: false,\n                hideProgressBar: true,\n              }\"\n            ></lib-client-home>\n          </div>\n        </div>\n      </swiper-slide>\n      @if ((config?.clientMatches$ | async)?.[config?.activeIndex]?.showHandoff || config.default) {\n        <swiper-slide class=\"no-swiping-selector\">\n          <div class=\"swiper__client-home\">\n            @if (config.alertStatus.chatHandoff) {\n              <div class=\"alert-popup-chat-handoff\">\n                <lib-alert-popup\n                  [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.HANDOFF_CHAT.TITLE' | translate\"\n                  [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.HANDOFF_CHAT.DESCRIPTION' | translate\"\n                  (closed)=\"\n                    onClosedAlert({\n                      event: $event,\n                      field: alertStatusFields.chatHandoff,\n                    })\n                  \"\n                ></lib-alert-popup>\n              </div>\n            }\n            @if (config.alertStatus.chatProgress) {\n              <div class=\"alert-popup-chat-progress\">\n                <lib-alert-popup\n                  [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.CHAT_PROGRESS.TITLE' | translate\"\n                  [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.CHAT_PROGRESS.DESCRIPTION' | translate\"\n                  (closed)=\"\n                    onClosedAlert({\n                      event: $event,\n                      field: alertStatusFields.chatProgress,\n                    })\n                  \"\n                ></lib-alert-popup>\n              </div>\n            }\n            <lib-client-home\n              [config]=\"{\n                schedulerAdsTemplate: config?.schedulerAdsTemplate,\n                schedulerTabAdsTemplate: config?.schedulerTabAdsTemplate,\n                chatAdsTemplate: config?.chatAdsTemplate,\n                chatTabAdsTemplate: config?.chatTabAdsTemplate,\n                traitVisualAdsTemplate: config?.traitVisualAdsTemplate,\n                activeIndex: config?.activeIndex,\n                clientMatches$: config?.clientMatches$,\n                component: components.ChatHandoff,\n                default: config?.default,\n                alertStatus: config.alertStatus,\n                hideStatuses: true,\n                bottomThumbs: true,\n                showValueProportionLabel: false,\n                hideProgressBar: true,\n              }\"\n              (addMessage)=\"handleNewMessage($event)\"\n              (getMessages)=\"getMessages?.emit($event)\"\n              (activeIndexChange)=\"onActiveProspectChange($event)\"\n            ></lib-client-home>\n          </div>\n        </swiper-slide>\n      }\n    </ng-container>\n  </lib-dashboard-swipeable-tabs>\n</div>\n", styles: [":host{--match-percentage-font-size: 1.5em;--container-sides-shadow-width: 15px;--match-percentage-value-height: 3em;position:relative}.agenda-handler{height:133px;overflow:hidden;transition:height .5s ease;position:relative}.agenda-handler.has-ads{height:fit-content}.agenda-handler.height-zero-activated{height:100%!important}.agenda-handler .agenda-title{display:flex;width:100%;padding:0 23.5px;font-size:12px}.agenda-handler .agenda-title span{margin-left:5px}.agenda-handler lib-agenda{position:relative;display:block;width:100%;margin:auto;padding:0 5px}.agenda-handler .alert-popup-agenda{position:absolute;opacity:1;top:40px;right:40px;z-index:999;transition:opacity .3s ease}.client-home__container{height:calc(100% - 133px)}.client-home__container.has-ads{height:calc(100% - 190px)}.client-home__container>lib-swipeable-tabs{height:100%;display:block}.height-zero{height:0px!important}.opacity-zero{opacity:0!important;pointer-events:none}.tab{display:flex;gap:7px;padding:10px 30px;color:#fff9;cursor:pointer}.tab.active{color:#fff}.tab.disabled{opacity:.3;color:#fff9!important;pointer-events:none}.swiper__scheduler{height:100%}.swiper__scheduler lib-client-home{height:100%;display:block}.swiper__client-home{position:relative;width:100%;height:100%}.swiper__client-home .alert-popup-client-scheduler{position:absolute;z-index:999;top:100px;right:40px}.swiper__client-home .alert-popup-chat-handoff{position:absolute;z-index:999;top:40px;right:40px}.swiper__client-home .alert-popup-chat-progress{position:absolute;z-index:999;top:200px;right:40px}.swiper__client-home .alert-popup-trait-chart,.swiper__client-home .alert-popup-spider-chart{position:absolute;z-index:999;top:123px;right:40px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { config: [{
                 type: Input
             }], agendaAdsData: [{
@@ -4307,6 +4404,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 type: Output
             }] } });
 
+class GetProfileWithProgressPipe {
+    transform(clientMatch) {
+        return {
+            name: clientMatch?.primary?.name,
+            photo: clientMatch?.primary?.src,
+            progress: 10, // TODO: get progress from clientMatch
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: GetProfileWithProgressPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: GetProfileWithProgressPipe, isStandalone: true, name: "getProfileWithProgress" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: GetProfileWithProgressPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'getProfileWithProgress',
+                    standalone: true,
+                }]
+        }] });
+
 class UpdateLLMPreferencePipe {
     transform(values, llmPreferenceLoading) {
         return values.map((option) => {
@@ -4375,24 +4491,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 }]
         }] });
 
-class GetProfileWithProgressPipe {
-    transform(clientMatch) {
-        return {
-            name: clientMatch?.primary?.name,
-            photo: clientMatch?.primary?.src,
-            progress: 10, // TODO: get progress from clientMatch
+class LibProfileComparisonComponent {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.config = {
+            data: {
+                leftProfile: {
+                    name: '',
+                    attributes: [],
+                },
+                rightProfile: {
+                    name: '',
+                    attributes: [],
+                },
+            },
+            default: false,
+        };
+        this.comparisonData = {
+            leftProfile: {
+                name: '',
+                attributes: [],
+            },
+            rightProfile: {
+                name: '',
+                attributes: [],
+            },
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: GetProfileWithProgressPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: GetProfileWithProgressPipe, isStandalone: true, name: "getProfileWithProgress" }); }
+    ngOnInit() {
+        if (this.config.data) {
+            this.comparisonData = this.config.data;
+        }
+        this.cdr.detectChanges();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibProfileComparisonComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LibProfileComparisonComponent, isStandalone: true, selector: "lib-profile-comparison", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"profile-comparison\">\n  <div class=\"profile-comparison__container\">\n    <!-- Left Profile -->\n    <div class=\"profile-comparison__card profile-comparison__card--left\">\n      <h3 class=\"profile-comparison__name\">{{ comparisonData.leftProfile.name }}</h3>\n      <div class=\"profile-comparison__attributes\">\n        @for (attr of comparisonData.leftProfile.attributes; track $index) {\n          <div class=\"profile-comparison__attribute\" [ngClass]=\"{ 'profile-comparison__attribute--match': attr.match }\">\n            <span class=\"profile-comparison__attribute-label\">{{ attr.label }}</span>\n            <span class=\"profile-comparison__attribute-value\">{{ attr.value }}</span>\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- Right Profile -->\n    <div class=\"profile-comparison__card profile-comparison__card--right\">\n      <h3 class=\"profile-comparison__name\">{{ comparisonData.rightProfile.name }}</h3>\n      <div class=\"profile-comparison__attributes\">\n        @for (attr of comparisonData.rightProfile.attributes; track $index) {\n          <div class=\"profile-comparison__attribute\" [ngClass]=\"{ 'profile-comparison__attribute--match': attr.match }\">\n            <span class=\"profile-comparison__attribute-label\">{{ attr.label }}</span>\n            <span class=\"profile-comparison__attribute-value\">{{ attr.value }}</span>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".profile-comparison{width:100%;padding:16px}.profile-comparison__container{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1200px;margin:0 auto}@media (max-width: 768px){.profile-comparison__container{grid-template-columns:1fr;gap:24px}}.profile-comparison__card{background-color:#464a4c;border:1px solid #dfe0e3;border-radius:8px;padding:20px;transition:all .3s ease}.profile-comparison__card:hover{border-color:#ccc;box-shadow:0 4px 12px #00000026}.profile-comparison__card--left{border-left:3px solid #45899b}.profile-comparison__card--right{border-left:3px solid #9c27b0}.profile-comparison__name{font-size:20px;font-weight:600;color:#666;margin:0 0 20px;padding-bottom:12px;border-bottom:1px solid #dfe0e3}.profile-comparison__attributes{display:flex;flex-direction:column;gap:12px}.profile-comparison__attribute{display:flex;flex-direction:column;gap:4px;padding:12px;background-color:#464a4c;border-radius:6px;border:1px solid transparent;transition:all .2s ease}.profile-comparison__attribute:hover{background-color:#eeeef0;border-color:#ccc}.profile-comparison__attribute--match{border-left:3px solid #599b4e;background-color:#599b4e1a}.profile-comparison__attribute-label{font-size:12px;color:#f4f6f7;text-transform:uppercase;letter-spacing:.5px;font-weight:500}.profile-comparison__attribute-value{font-size:14px;color:#666;font-weight:400}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: GetProfileWithProgressPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'getProfileWithProgress',
-                    standalone: true,
-                }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibProfileComparisonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-profile-comparison', imports: [CommonModule, TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"profile-comparison\">\n  <div class=\"profile-comparison__container\">\n    <!-- Left Profile -->\n    <div class=\"profile-comparison__card profile-comparison__card--left\">\n      <h3 class=\"profile-comparison__name\">{{ comparisonData.leftProfile.name }}</h3>\n      <div class=\"profile-comparison__attributes\">\n        @for (attr of comparisonData.leftProfile.attributes; track $index) {\n          <div class=\"profile-comparison__attribute\" [ngClass]=\"{ 'profile-comparison__attribute--match': attr.match }\">\n            <span class=\"profile-comparison__attribute-label\">{{ attr.label }}</span>\n            <span class=\"profile-comparison__attribute-value\">{{ attr.value }}</span>\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- Right Profile -->\n    <div class=\"profile-comparison__card profile-comparison__card--right\">\n      <h3 class=\"profile-comparison__name\">{{ comparisonData.rightProfile.name }}</h3>\n      <div class=\"profile-comparison__attributes\">\n        @for (attr of comparisonData.rightProfile.attributes; track $index) {\n          <div class=\"profile-comparison__attribute\" [ngClass]=\"{ 'profile-comparison__attribute--match': attr.match }\">\n            <span class=\"profile-comparison__attribute-label\">{{ attr.label }}</span>\n            <span class=\"profile-comparison__attribute-value\">{{ attr.value }}</span>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".profile-comparison{width:100%;padding:16px}.profile-comparison__container{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1200px;margin:0 auto}@media (max-width: 768px){.profile-comparison__container{grid-template-columns:1fr;gap:24px}}.profile-comparison__card{background-color:#464a4c;border:1px solid #dfe0e3;border-radius:8px;padding:20px;transition:all .3s ease}.profile-comparison__card:hover{border-color:#ccc;box-shadow:0 4px 12px #00000026}.profile-comparison__card--left{border-left:3px solid #45899b}.profile-comparison__card--right{border-left:3px solid #9c27b0}.profile-comparison__name{font-size:20px;font-weight:600;color:#666;margin:0 0 20px;padding-bottom:12px;border-bottom:1px solid #dfe0e3}.profile-comparison__attributes{display:flex;flex-direction:column;gap:12px}.profile-comparison__attribute{display:flex;flex-direction:column;gap:4px;padding:12px;background-color:#464a4c;border-radius:6px;border:1px solid transparent;transition:all .2s ease}.profile-comparison__attribute:hover{background-color:#eeeef0;border-color:#ccc}.profile-comparison__attribute--match{border-left:3px solid #599b4e;background-color:#599b4e1a}.profile-comparison__attribute-label{font-size:12px;color:#f4f6f7;text-transform:uppercase;letter-spacing:.5px;font-weight:500}.profile-comparison__attribute-value{font-size:14px;color:#666;font-weight:400}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { config: [{
+                type: Input
+            }] } });
 
 class LibComposeMacherDashComponent {
     constructor(cdr) {
@@ -4435,6 +4575,7 @@ class LibComposeMacherDashComponent {
             { title: 'Notes', icon: 'assets/icons/compose-matcher/notes.svg' },
             { title: 'Visuals', icon: 'assets/icons/compose-matcher/visual.svg' },
             { title: 'Profile', icon: 'assets/icons/compose-matcher/profile.svg' },
+            { title: 'Compare', icon: 'assets/icons/compose-matcher/profile.svg' },
         ];
         this.FormFieldType = FormFieldType;
         this.componentDestroyed$ = new Subject();
@@ -4472,8 +4613,26 @@ class LibComposeMacherDashComponent {
     suggestClicked(suggest) {
         this.suggest = suggest;
     }
+    getClientAttributes(match) {
+        if (!match?.primary)
+            return [];
+        return [
+            { label: 'Name', value: match.primary.name || '' },
+            { label: 'Location', value: match.primary.location || '' },
+            { label: 'Age', value: match.primary.age?.toString() || '' },
+        ];
+    }
+    getProspectAttributes(match) {
+        if (!match?.secondary)
+            return [];
+        return [
+            { label: 'Name', value: match.secondary.name || '' },
+            { label: 'Location', value: match.secondary.location || '' },
+            { label: 'Age', value: match.secondary.age?.toString() || '' },
+        ];
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibComposeMacherDashComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LibComposeMacherDashComponent, isStandalone: true, selector: "lib-compose-matcher-dash", inputs: { config: "config" }, outputs: { addMessage: "addMessage", updateLLMConversation: "updateLLMConversation", getMessages: "getMessages", bookEvent: "bookEvent", removeSuggestion: "removeSuggestion", activeIndexChange: "activeIndexChange" }, ngImport: i0, template: "<div class=\"compose-matcher\">\n  <lib-client-home\n    [config]=\"{\n      chatAdsTemplate: config.chatAdsTemplate,\n      schedulerAdsTemplate: config.schedulerAdsTemplate,\n      schedulerTabAdsTemplate: config.schedulerTabAdsTemplate,\n      loading: config.loading,\n      activeIndex: config.activeIndex,\n      clientMatches$: config.clientMatches$,\n      component: components.ChatHandoff,\n      chatInputValue: suggest,\n      bottomThumbs: false,\n      default: config.default,\n      alertStatus: config.alertStatus,\n      showValueProportionLabel: true,\n    }\"\n    (addMessage)=\"addMessage?.emit($event)\"\n    (getMessages)=\"getMessages?.emit($event)\"\n    (updateLLMConversation)=\"updateLLMConversation?.emit($event)\"\n    (activeIndexChange)=\"onActiveProspectChange($event)\"\n  ></lib-client-home>\n  <lib-swipeable-tabs\n    [activeIndex]=\"config?.activeTabIndex\"\n    [slideContentMaxHeight]=\"config?.slideContentMaxHeight\"\n    [bottomThumbs]=\"false\"\n    (activeIndexChange)=\"onActiveTabIndexChange($event)\"\n  >\n    <ng-container thumb-slides>\n      @for (status of statuses; let i = $index; track status) {\n        <swiper-slide class=\"bubble-btn\">\n          <lib-bubble-btn class=\"custom-bubble-status\" [title]=\"status.title\" [hasIcon]=\"true\" (click)=\"config.activeTabIndex = i\">\n            @if (status.isText) {\n              <div class=\"time-wrapper\">\n                <span\n                  *ngFor=\"let part of ((clientMatches$ | async)?.[config?.activeIndex]?.prospectResponseTime ?? '0h 0m 0s').split(' ')\"\n                  class=\"time\"\n                  [ngClass]=\"{ active: config?.activeTabIndex === i }\"\n                >\n                  {{ part }}\n                </span>\n              </div>\n            } @else {\n              <img [src]=\"status.icon\" width=\"18px\" height=\"18px\" [ngClass]=\"{ active: config?.activeTabIndex === i }\" />\n            }\n          </lib-bubble-btn>\n        </swiper-slide>\n      }\n    </ng-container>\n    <ng-container main-slides>\n      <swiper-slide *ngIf=\"config?.clientMatches$ | async as clientMatches\">\n        <ng-container *ngIf=\"clientMatches[config?.activeIndex]?.prospectData as activeChat\">\n          <lib-chat-suggestion [chatSuggestions]=\"activeChat.chatSuggestions\" (suggestClicked)=\"suggest = $event\" [default]=\"config?.default\"></lib-chat-suggestion>\n\n          <div class=\"llm-preference-container\">\n            <lib-form-field\n              [label]=\"'LLM Preference'\"\n              [defaultValue]=\"activeChat.llmPreference\"\n              [placeholder]=\"'Select LLM Preference'\"\n              [options]=\"config.llmPreferenceOptions | updateLLMPreference: (activeChat?.llmPreferenceLoading$ | async)\"\n              [type]=\"FormFieldType.radio\"\n              (valueChange)=\"updateLLMConversation.emit({ chatId: activeChat._id, llmPreference: $event, prospectName: activeChat.name })\"\n            ></lib-form-field>\n          </div>\n        </ng-container>\n      </swiper-slide>\n      <swiper-slide>\n        <div class=\"slide-content without-shadow\">\n          <div class=\"count-booked\">{{ schedularCounts.booked }} booked - {{ schedularCounts.suggested }} suggested</div>\n          <lib-scheduler\n            [adsTemplate]=\"config?.schedulerAdsTemplate\"\n            [events$]=\"config?.events$\"\n            (bookEvent)=\"bookEvent?.emit($event)\"\n            (removeSuggestion)=\"removeSuggestion?.emit($event)\"\n            [default]=\"config?.default\"\n          ></lib-scheduler>\n          <div class=\"prospect-calendar\">Fill in Client and Prospect calendar data for more</div>\n        </div>\n      </swiper-slide>\n      <swiper-slide>\n        <div class=\"plan-container\">\n          <lib-spider-chart\n            [config]=\"config?.spiderConfig\"\n            [datasets]=\"config?.spiderConfig.datasets\"\n            [polygon_colors]=\"config?.polygonColors\"\n            [default]=\"config?.default\"\n          ></lib-spider-chart>\n          <img width=\"280px\" height=\"250px\" src=\"assets/trait-visual/force-directed-graph.png\" />\n        </div>\n      </swiper-slide>\n      <swiper-slide>\n        <lib-profile-card [profile]=\"(config?.clientMatches$ | async)?.[config?.activeIndex] | getProfileWithProgress\"></lib-profile-card>\n      </swiper-slide>\n    </ng-container>\n  </lib-swipeable-tabs>\n  @if (\n    (config?.default && config?.activeTabIndex === 0) ||\n    (config?.default && config?.activeTabIndex === 1) ||\n    (config?.default && config?.activeTabIndex === 2) ||\n    (config?.default && config?.activeTabIndex === 3)\n  ) {\n    <div class=\"alert-popup\">\n      <lib-alert-popup [title]=\"'Compatibility Profile'\" [description]=\"'Once you have prospects, we will show you they stock up!'\"></lib-alert-popup>\n    </div>\n  }\n</div>\n", styles: [":host{--match-percentage-fornt-size: 1.5em;--container-sides-shadow-width: 25px;--match-percentage-value-height: 3em}.compose-matcher{position:relative;padding:0 60px;gap:20px}.compose-matcher img.active{filter:brightness(0) saturate(100%) invert(49%) sepia(70%) saturate(5452%) hue-rotate(321deg) brightness(99%) contrast(102%)}.compose-matcher span.active{color:#fe3c72}.compose-matcher .time-wrapper{display:flex;flex-direction:column;align-items:center}.compose-matcher .time{font-size:8px;height:8px;line-height:8px}swiper-slide{display:flex;justify-content:center}swiper-slide lib-chat-suggestion,swiper-slide lib-profile-card{margin-top:1em}.slide-content{height:auto;width:100%;position:relative;display:block;overflow:auto;padding:0 5px}.slide-content:not(.without-shadow){border-radius:10px;padding:20px;box-shadow:5.70371px 5.70371px 11.40741px #00000052 inset,-3.42222px -3.42222px 4.56296px #ffffff1a inset}.bubble-btn{padding:12px;min-width:25%}.prospect-calendar{display:flex;justify-content:center;margin-top:10px;color:#ebebf599;font-size:10px}.count-booked{display:flex;justify-content:center;margin-top:10px}.plan-container{display:flex}.alert-popup{position:absolute;z-index:999;bottom:100px;right:0}.llm-preference-container{display:flex;gap:.5em;align-items:center;justify-content:space-around;margin-left:16px;margin-right:-50px;flex-direction:column}@media (max-width: 576px){.compose-matcher{padding:0}.plan-container{flex-direction:column;align-items:center}.alert-popup{position:absolute;z-index:999;top:280px;right:5px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: LibChatComponentModule }, { kind: "ngmodule", type: LibAgendaModule }, { kind: "ngmodule", type: PipeModule }, { kind: "component", type: LibClientHomeComponent, selector: "lib-client-home", inputs: ["config"], outputs: ["activeIndexChange", "addMessage", "getMessages", "bookEvent", "removeSuggestion", "handleAppearPopup"] }, { kind: "component", type: ChatSuggestionComponent, selector: "lib-chat-suggestion", inputs: ["chatSuggestions"], outputs: ["suggestClicked"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2.BubbleBtnComponent, selector: "lib-bubble-btn", inputs: ["title", "subTitle", "hasIcon", "checked", "disabled", "loading$"] }, { kind: "component", type: LibSchedulerComponent, selector: "lib-scheduler", inputs: ["adsTemplate", "loading$", "emptyMessage", "displayBookedStatuses", "displayEmptyDays", "events$", "startDate", "endDate", "default"], outputs: ["bookEvent", "removeSuggestion"] }, { kind: "component", type: SpiderChartComponent, selector: "lib-spider-chart", inputs: ["datasets", "config", "polygon_colors", "showChartInfo"] }, { kind: "ngmodule", type: ProfileCardModule }, { kind: "component", type: ProfileCardComponent, selector: "lib-profile-card", inputs: ["profile", "progressText"] }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: AlertPopupComponent, selector: "lib-alert-popup", inputs: ["title", "description", "timeState", "number"], outputs: ["closed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormFieldModule }, { kind: "component", type: i2.FormFieldComponent, selector: "lib-form-field", inputs: ["fieldName", "label", "placeholder", "message", "useTooltips", "descriptionText", "formFieldControl", "submitted", "required", "type", "plusIconUrl", "minusIconUrl", "maxLength", "max", "min", "pinValue", "dualKnobs", "reverseBarColor", "defaultValue", "noMargin", "options", "iconHtml", "invalidPatternMessage", "dateFormat", "currencySymbol", "hideCents", "isEditable", "rowEditConfirmationObsv", "errorInlineMode", "showLabelInRequiredErrorMessage", "decimalPosition", "hyperlinkTarget", "readOnly", "focus", "showRequiredIndicator", "maxDate", "minDate", "radioTranslateLabels", "radioDeselectable", "radioRippleEffect"], outputs: ["rowEdit", "focusOut", "valueChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: UpdateLLMPreferencePipe, name: "updateLLMPreference" }, { kind: "pipe", type: GetProfileWithProgressPipe, name: "getProfileWithProgress" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LibComposeMacherDashComponent, isStandalone: true, selector: "lib-compose-matcher-dash", inputs: { config: "config" }, outputs: { addMessage: "addMessage", updateLLMConversation: "updateLLMConversation", getMessages: "getMessages", bookEvent: "bookEvent", removeSuggestion: "removeSuggestion", activeIndexChange: "activeIndexChange" }, ngImport: i0, template: "<div class=\"compose-matcher\">\n  <lib-client-home\n    [config]=\"{\n      chatAdsTemplate: config.chatAdsTemplate,\n      schedulerAdsTemplate: config.schedulerAdsTemplate,\n      schedulerTabAdsTemplate: config.schedulerTabAdsTemplate,\n      loading: config.loading,\n      activeIndex: config.activeIndex,\n      clientMatches$: config.clientMatches$,\n      component: components.ChatHandoff,\n      chatInputValue: suggest,\n      bottomThumbs: false,\n      default: config.default,\n      alertStatus: config.alertStatus,\n      showValueProportionLabel: true,\n    }\"\n    (addMessage)=\"addMessage?.emit($event)\"\n    (getMessages)=\"getMessages?.emit($event)\"\n    (updateLLMConversation)=\"updateLLMConversation?.emit($event)\"\n    (activeIndexChange)=\"onActiveProspectChange($event)\"\n  ></lib-client-home>\n  <lib-swipeable-tabs\n    [activeIndex]=\"config?.activeTabIndex\"\n    [slideContentMaxHeight]=\"config?.slideContentMaxHeight\"\n    [bottomThumbs]=\"false\"\n    (activeIndexChange)=\"onActiveTabIndexChange($event)\"\n  >\n    <ng-container thumb-slides>\n      @for (status of statuses; let i = $index; track status) {\n        <swiper-slide class=\"bubble-btn\">\n          <lib-bubble-btn class=\"custom-bubble-status\" [title]=\"status.title\" [hasIcon]=\"true\" (click)=\"config.activeTabIndex = i\">\n            @if (status.isText) {\n              <div class=\"time-wrapper\">\n                <span\n                  *ngFor=\"let part of ((clientMatches$ | async)?.[config?.activeIndex]?.prospectResponseTime ?? '0h 0m 0s').split(' ')\"\n                  class=\"time\"\n                  [ngClass]=\"{ active: config?.activeTabIndex === i }\"\n                >\n                  {{ part }}\n                </span>\n              </div>\n            } @else {\n              <img [src]=\"status.icon\" width=\"18px\" height=\"18px\" [ngClass]=\"{ active: config?.activeTabIndex === i }\" />\n            }\n          </lib-bubble-btn>\n        </swiper-slide>\n      }\n    </ng-container>\n    <ng-container main-slides>\n      <swiper-slide *ngIf=\"config?.clientMatches$ | async as clientMatches\">\n        <ng-container *ngIf=\"clientMatches[config?.activeIndex]?.prospectData as activeChat\">\n          <lib-chat-suggestion [chatSuggestions]=\"activeChat.chatSuggestions\" (suggestClicked)=\"suggest = $event\" [default]=\"config?.default\"></lib-chat-suggestion>\n\n          <div class=\"llm-preference-container\">\n            <lib-form-field\n              [label]=\"'LLM Preference'\"\n              [defaultValue]=\"activeChat.llmPreference\"\n              [placeholder]=\"'Select LLM Preference'\"\n              [options]=\"config.llmPreferenceOptions | updateLLMPreference: (activeChat?.llmPreferenceLoading$ | async)\"\n              [type]=\"FormFieldType.radio\"\n              (valueChange)=\"updateLLMConversation.emit({ chatId: activeChat._id, llmPreference: $event, prospectName: activeChat.name })\"\n            ></lib-form-field>\n          </div>\n        </ng-container>\n      </swiper-slide>\n      <swiper-slide>\n        <div class=\"slide-content without-shadow\">\n          <div class=\"count-booked\">{{ schedularCounts.booked }} booked - {{ schedularCounts.suggested }} suggested</div>\n          <lib-scheduler\n            [adsTemplate]=\"config?.schedulerAdsTemplate\"\n            [events$]=\"config?.events$\"\n            (bookEvent)=\"bookEvent?.emit($event)\"\n            (removeSuggestion)=\"removeSuggestion?.emit($event)\"\n            [default]=\"config?.default\"\n          ></lib-scheduler>\n          <div class=\"prospect-calendar\">Fill in Client and Prospect calendar data for more</div>\n        </div>\n      </swiper-slide>\n      <swiper-slide>\n        <div class=\"plan-container\">\n          <lib-spider-chart\n            [config]=\"config?.spiderConfig\"\n            [datasets]=\"config?.spiderConfig.datasets\"\n            [polygon_colors]=\"config?.polygonColors\"\n            [default]=\"config?.default\"\n          ></lib-spider-chart>\n          <img width=\"280px\" height=\"250px\" src=\"assets/trait-visual/force-directed-graph.png\" />\n        </div>\n      </swiper-slide>\n      <swiper-slide>\n        <lib-profile-card [profile]=\"(config?.clientMatches$ | async)?.[config?.activeIndex] | getProfileWithProgress\"></lib-profile-card>\n      </swiper-slide>\n      <swiper-slide>\n        <div class=\"slide-content\">\n          <ng-container *ngIf=\"config?.clientMatches$ | async as clientMatches\">\n            <lib-profile-comparison\n              [config]=\"{\n                data: {\n                  leftProfile: {\n                    name: clientMatches[config?.activeIndex]?.primary?.name || 'Client',\n                    attributes: getClientAttributes(clientMatches[config?.activeIndex]),\n                  },\n                  rightProfile: {\n                    name: clientMatches[config?.activeIndex]?.secondary?.name || 'Prospect',\n                    attributes: getProspectAttributes(clientMatches[config?.activeIndex]),\n                  },\n                },\n                default: config?.default,\n              }\"\n            ></lib-profile-comparison>\n          </ng-container>\n        </div>\n      </swiper-slide>\n    </ng-container>\n  </lib-swipeable-tabs>\n  @if (\n    (config?.default && config?.activeTabIndex === 0) ||\n    (config?.default && config?.activeTabIndex === 1) ||\n    (config?.default && config?.activeTabIndex === 2) ||\n    (config?.default && config?.activeTabIndex === 3)\n  ) {\n    <div class=\"alert-popup\">\n      <lib-alert-popup [title]=\"'Compatibility Profile'\" [description]=\"'Once you have prospects, we will show you they stock up!'\"></lib-alert-popup>\n    </div>\n  }\n</div>\n", styles: [":host{--match-percentage-fornt-size: 1.5em;--container-sides-shadow-width: 25px;--match-percentage-value-height: 3em}.compose-matcher{position:relative;padding:0 60px;gap:20px}.compose-matcher img.active{filter:brightness(0) saturate(100%) invert(49%) sepia(70%) saturate(5452%) hue-rotate(321deg) brightness(99%) contrast(102%)}.compose-matcher span.active{color:#fe3c72}.compose-matcher .time-wrapper{display:flex;flex-direction:column;align-items:center}.compose-matcher .time{font-size:8px;height:8px;line-height:8px}swiper-slide{display:flex;justify-content:center}swiper-slide lib-chat-suggestion,swiper-slide lib-profile-card{margin-top:1em}.slide-content{height:auto;width:100%;position:relative;display:block;overflow:auto;padding:0 5px}.slide-content:not(.without-shadow){border-radius:10px;padding:20px;box-shadow:5.70371px 5.70371px 11.40741px #00000052 inset,-3.42222px -3.42222px 4.56296px #ffffff1a inset}.bubble-btn{padding:12px;min-width:25%}.prospect-calendar{display:flex;justify-content:center;margin-top:10px;color:#ebebf599;font-size:10px}.count-booked{display:flex;justify-content:center;margin-top:10px}.plan-container{display:flex}.alert-popup{position:absolute;z-index:999;bottom:100px;right:0}.llm-preference-container{display:flex;gap:.5em;align-items:center;justify-content:space-around;margin-left:16px;margin-right:-50px;flex-direction:column}@media (max-width: 576px){.compose-matcher{padding:0}.plan-container{flex-direction:column;align-items:center}.alert-popup{position:absolute;z-index:999;top:280px;right:5px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: LibChatComponentModule }, { kind: "ngmodule", type: LibAgendaModule }, { kind: "ngmodule", type: PipeModule }, { kind: "component", type: LibClientHomeComponent, selector: "lib-client-home", inputs: ["config"], outputs: ["activeIndexChange", "addMessage", "getMessages", "bookEvent", "removeSuggestion", "handleAppearPopup"] }, { kind: "component", type: ChatSuggestionComponent, selector: "lib-chat-suggestion", inputs: ["chatSuggestions"], outputs: ["suggestClicked"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2.BubbleBtnComponent, selector: "lib-bubble-btn", inputs: ["title", "subTitle", "hasIcon", "checked", "disabled", "loading$"] }, { kind: "component", type: LibSchedulerComponent, selector: "lib-scheduler", inputs: ["adsTemplate", "loading$", "emptyMessage", "displayBookedStatuses", "displayEmptyDays", "events$", "startDate", "endDate", "default"], outputs: ["bookEvent", "removeSuggestion"] }, { kind: "component", type: SpiderChartComponent, selector: "lib-spider-chart", inputs: ["datasets", "config", "polygon_colors", "showChartInfo"] }, { kind: "ngmodule", type: ProfileCardModule }, { kind: "component", type: ProfileCardComponent, selector: "lib-profile-card", inputs: ["profile", "progressText"] }, { kind: "component", type: LibProfileComparisonComponent, selector: "lib-profile-comparison", inputs: ["config"] }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: AlertPopupComponent, selector: "lib-alert-popup", inputs: ["title", "description", "timeState", "number"], outputs: ["closed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormFieldModule }, { kind: "component", type: i2.FormFieldComponent, selector: "lib-form-field", inputs: ["fieldName", "label", "placeholder", "message", "useTooltips", "descriptionText", "formFieldControl", "submitted", "required", "type", "plusIconUrl", "minusIconUrl", "maxLength", "max", "min", "pinValue", "dualKnobs", "reverseBarColor", "defaultValue", "noMargin", "options", "iconHtml", "invalidPatternMessage", "dateFormat", "currencySymbol", "hideCents", "isEditable", "rowEditConfirmationObsv", "errorInlineMode", "showLabelInRequiredErrorMessage", "decimalPosition", "hyperlinkTarget", "readOnly", "focus", "showRequiredIndicator", "maxDate", "minDate", "radioTranslateLabels", "radioDeselectable", "radioRippleEffect"], outputs: ["rowEdit", "focusOut", "valueChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: UpdateLLMPreferencePipe, name: "updateLLMPreference" }, { kind: "pipe", type: GetProfileWithProgressPipe, name: "getProfileWithProgress" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibComposeMacherDashComponent, decorators: [{
             type: Component,
@@ -4485,19 +4644,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                         PipeModule,
                         LibChatComponentModule,
                         LibClientHomeComponent,
-                        LibDashboardSwipeableTabsComponent,
                         ChatSuggestionComponent,
                         ButtonsModule,
                         LibSchedulerComponent,
                         SpiderChartComponent,
                         ProfileCardModule,
+                        LibProfileComparisonComponent,
                         SharedModule,
                         FormsModule,
                         ReactiveFormsModule,
                         FormFieldModule,
                         UpdateLLMPreferencePipe,
                         GetProfileWithProgressPipe,
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"compose-matcher\">\n  <lib-client-home\n    [config]=\"{\n      chatAdsTemplate: config.chatAdsTemplate,\n      schedulerAdsTemplate: config.schedulerAdsTemplate,\n      schedulerTabAdsTemplate: config.schedulerTabAdsTemplate,\n      loading: config.loading,\n      activeIndex: config.activeIndex,\n      clientMatches$: config.clientMatches$,\n      component: components.ChatHandoff,\n      chatInputValue: suggest,\n      bottomThumbs: false,\n      default: config.default,\n      alertStatus: config.alertStatus,\n      showValueProportionLabel: true,\n    }\"\n    (addMessage)=\"addMessage?.emit($event)\"\n    (getMessages)=\"getMessages?.emit($event)\"\n    (updateLLMConversation)=\"updateLLMConversation?.emit($event)\"\n    (activeIndexChange)=\"onActiveProspectChange($event)\"\n  ></lib-client-home>\n  <lib-swipeable-tabs\n    [activeIndex]=\"config?.activeTabIndex\"\n    [slideContentMaxHeight]=\"config?.slideContentMaxHeight\"\n    [bottomThumbs]=\"false\"\n    (activeIndexChange)=\"onActiveTabIndexChange($event)\"\n  >\n    <ng-container thumb-slides>\n      @for (status of statuses; let i = $index; track status) {\n        <swiper-slide class=\"bubble-btn\">\n          <lib-bubble-btn class=\"custom-bubble-status\" [title]=\"status.title\" [hasIcon]=\"true\" (click)=\"config.activeTabIndex = i\">\n            @if (status.isText) {\n              <div class=\"time-wrapper\">\n                <span\n                  *ngFor=\"let part of ((clientMatches$ | async)?.[config?.activeIndex]?.prospectResponseTime ?? '0h 0m 0s').split(' ')\"\n                  class=\"time\"\n                  [ngClass]=\"{ active: config?.activeTabIndex === i }\"\n                >\n                  {{ part }}\n                </span>\n              </div>\n            } @else {\n              <img [src]=\"status.icon\" width=\"18px\" height=\"18px\" [ngClass]=\"{ active: config?.activeTabIndex === i }\" />\n            }\n          </lib-bubble-btn>\n        </swiper-slide>\n      }\n    </ng-container>\n    <ng-container main-slides>\n      <swiper-slide *ngIf=\"config?.clientMatches$ | async as clientMatches\">\n        <ng-container *ngIf=\"clientMatches[config?.activeIndex]?.prospectData as activeChat\">\n          <lib-chat-suggestion [chatSuggestions]=\"activeChat.chatSuggestions\" (suggestClicked)=\"suggest = $event\" [default]=\"config?.default\"></lib-chat-suggestion>\n\n          <div class=\"llm-preference-container\">\n            <lib-form-field\n              [label]=\"'LLM Preference'\"\n              [defaultValue]=\"activeChat.llmPreference\"\n              [placeholder]=\"'Select LLM Preference'\"\n              [options]=\"config.llmPreferenceOptions | updateLLMPreference: (activeChat?.llmPreferenceLoading$ | async)\"\n              [type]=\"FormFieldType.radio\"\n              (valueChange)=\"updateLLMConversation.emit({ chatId: activeChat._id, llmPreference: $event, prospectName: activeChat.name })\"\n            ></lib-form-field>\n          </div>\n        </ng-container>\n      </swiper-slide>\n      <swiper-slide>\n        <div class=\"slide-content without-shadow\">\n          <div class=\"count-booked\">{{ schedularCounts.booked }} booked - {{ schedularCounts.suggested }} suggested</div>\n          <lib-scheduler\n            [adsTemplate]=\"config?.schedulerAdsTemplate\"\n            [events$]=\"config?.events$\"\n            (bookEvent)=\"bookEvent?.emit($event)\"\n            (removeSuggestion)=\"removeSuggestion?.emit($event)\"\n            [default]=\"config?.default\"\n          ></lib-scheduler>\n          <div class=\"prospect-calendar\">Fill in Client and Prospect calendar data for more</div>\n        </div>\n      </swiper-slide>\n      <swiper-slide>\n        <div class=\"plan-container\">\n          <lib-spider-chart\n            [config]=\"config?.spiderConfig\"\n            [datasets]=\"config?.spiderConfig.datasets\"\n            [polygon_colors]=\"config?.polygonColors\"\n            [default]=\"config?.default\"\n          ></lib-spider-chart>\n          <img width=\"280px\" height=\"250px\" src=\"assets/trait-visual/force-directed-graph.png\" />\n        </div>\n      </swiper-slide>\n      <swiper-slide>\n        <lib-profile-card [profile]=\"(config?.clientMatches$ | async)?.[config?.activeIndex] | getProfileWithProgress\"></lib-profile-card>\n      </swiper-slide>\n    </ng-container>\n  </lib-swipeable-tabs>\n  @if (\n    (config?.default && config?.activeTabIndex === 0) ||\n    (config?.default && config?.activeTabIndex === 1) ||\n    (config?.default && config?.activeTabIndex === 2) ||\n    (config?.default && config?.activeTabIndex === 3)\n  ) {\n    <div class=\"alert-popup\">\n      <lib-alert-popup [title]=\"'Compatibility Profile'\" [description]=\"'Once you have prospects, we will show you they stock up!'\"></lib-alert-popup>\n    </div>\n  }\n</div>\n", styles: [":host{--match-percentage-fornt-size: 1.5em;--container-sides-shadow-width: 25px;--match-percentage-value-height: 3em}.compose-matcher{position:relative;padding:0 60px;gap:20px}.compose-matcher img.active{filter:brightness(0) saturate(100%) invert(49%) sepia(70%) saturate(5452%) hue-rotate(321deg) brightness(99%) contrast(102%)}.compose-matcher span.active{color:#fe3c72}.compose-matcher .time-wrapper{display:flex;flex-direction:column;align-items:center}.compose-matcher .time{font-size:8px;height:8px;line-height:8px}swiper-slide{display:flex;justify-content:center}swiper-slide lib-chat-suggestion,swiper-slide lib-profile-card{margin-top:1em}.slide-content{height:auto;width:100%;position:relative;display:block;overflow:auto;padding:0 5px}.slide-content:not(.without-shadow){border-radius:10px;padding:20px;box-shadow:5.70371px 5.70371px 11.40741px #00000052 inset,-3.42222px -3.42222px 4.56296px #ffffff1a inset}.bubble-btn{padding:12px;min-width:25%}.prospect-calendar{display:flex;justify-content:center;margin-top:10px;color:#ebebf599;font-size:10px}.count-booked{display:flex;justify-content:center;margin-top:10px}.plan-container{display:flex}.alert-popup{position:absolute;z-index:999;bottom:100px;right:0}.llm-preference-container{display:flex;gap:.5em;align-items:center;justify-content:space-around;margin-left:16px;margin-right:-50px;flex-direction:column}@media (max-width: 576px){.compose-matcher{padding:0}.plan-container{flex-direction:column;align-items:center}.alert-popup{position:absolute;z-index:999;top:280px;right:5px}}\n"] }]
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"compose-matcher\">\n  <lib-client-home\n    [config]=\"{\n      chatAdsTemplate: config.chatAdsTemplate,\n      schedulerAdsTemplate: config.schedulerAdsTemplate,\n      schedulerTabAdsTemplate: config.schedulerTabAdsTemplate,\n      loading: config.loading,\n      activeIndex: config.activeIndex,\n      clientMatches$: config.clientMatches$,\n      component: components.ChatHandoff,\n      chatInputValue: suggest,\n      bottomThumbs: false,\n      default: config.default,\n      alertStatus: config.alertStatus,\n      showValueProportionLabel: true,\n    }\"\n    (addMessage)=\"addMessage?.emit($event)\"\n    (getMessages)=\"getMessages?.emit($event)\"\n    (updateLLMConversation)=\"updateLLMConversation?.emit($event)\"\n    (activeIndexChange)=\"onActiveProspectChange($event)\"\n  ></lib-client-home>\n  <lib-swipeable-tabs\n    [activeIndex]=\"config?.activeTabIndex\"\n    [slideContentMaxHeight]=\"config?.slideContentMaxHeight\"\n    [bottomThumbs]=\"false\"\n    (activeIndexChange)=\"onActiveTabIndexChange($event)\"\n  >\n    <ng-container thumb-slides>\n      @for (status of statuses; let i = $index; track status) {\n        <swiper-slide class=\"bubble-btn\">\n          <lib-bubble-btn class=\"custom-bubble-status\" [title]=\"status.title\" [hasIcon]=\"true\" (click)=\"config.activeTabIndex = i\">\n            @if (status.isText) {\n              <div class=\"time-wrapper\">\n                <span\n                  *ngFor=\"let part of ((clientMatches$ | async)?.[config?.activeIndex]?.prospectResponseTime ?? '0h 0m 0s').split(' ')\"\n                  class=\"time\"\n                  [ngClass]=\"{ active: config?.activeTabIndex === i }\"\n                >\n                  {{ part }}\n                </span>\n              </div>\n            } @else {\n              <img [src]=\"status.icon\" width=\"18px\" height=\"18px\" [ngClass]=\"{ active: config?.activeTabIndex === i }\" />\n            }\n          </lib-bubble-btn>\n        </swiper-slide>\n      }\n    </ng-container>\n    <ng-container main-slides>\n      <swiper-slide *ngIf=\"config?.clientMatches$ | async as clientMatches\">\n        <ng-container *ngIf=\"clientMatches[config?.activeIndex]?.prospectData as activeChat\">\n          <lib-chat-suggestion [chatSuggestions]=\"activeChat.chatSuggestions\" (suggestClicked)=\"suggest = $event\" [default]=\"config?.default\"></lib-chat-suggestion>\n\n          <div class=\"llm-preference-container\">\n            <lib-form-field\n              [label]=\"'LLM Preference'\"\n              [defaultValue]=\"activeChat.llmPreference\"\n              [placeholder]=\"'Select LLM Preference'\"\n              [options]=\"config.llmPreferenceOptions | updateLLMPreference: (activeChat?.llmPreferenceLoading$ | async)\"\n              [type]=\"FormFieldType.radio\"\n              (valueChange)=\"updateLLMConversation.emit({ chatId: activeChat._id, llmPreference: $event, prospectName: activeChat.name })\"\n            ></lib-form-field>\n          </div>\n        </ng-container>\n      </swiper-slide>\n      <swiper-slide>\n        <div class=\"slide-content without-shadow\">\n          <div class=\"count-booked\">{{ schedularCounts.booked }} booked - {{ schedularCounts.suggested }} suggested</div>\n          <lib-scheduler\n            [adsTemplate]=\"config?.schedulerAdsTemplate\"\n            [events$]=\"config?.events$\"\n            (bookEvent)=\"bookEvent?.emit($event)\"\n            (removeSuggestion)=\"removeSuggestion?.emit($event)\"\n            [default]=\"config?.default\"\n          ></lib-scheduler>\n          <div class=\"prospect-calendar\">Fill in Client and Prospect calendar data for more</div>\n        </div>\n      </swiper-slide>\n      <swiper-slide>\n        <div class=\"plan-container\">\n          <lib-spider-chart\n            [config]=\"config?.spiderConfig\"\n            [datasets]=\"config?.spiderConfig.datasets\"\n            [polygon_colors]=\"config?.polygonColors\"\n            [default]=\"config?.default\"\n          ></lib-spider-chart>\n          <img width=\"280px\" height=\"250px\" src=\"assets/trait-visual/force-directed-graph.png\" />\n        </div>\n      </swiper-slide>\n      <swiper-slide>\n        <lib-profile-card [profile]=\"(config?.clientMatches$ | async)?.[config?.activeIndex] | getProfileWithProgress\"></lib-profile-card>\n      </swiper-slide>\n      <swiper-slide>\n        <div class=\"slide-content\">\n          <ng-container *ngIf=\"config?.clientMatches$ | async as clientMatches\">\n            <lib-profile-comparison\n              [config]=\"{\n                data: {\n                  leftProfile: {\n                    name: clientMatches[config?.activeIndex]?.primary?.name || 'Client',\n                    attributes: getClientAttributes(clientMatches[config?.activeIndex]),\n                  },\n                  rightProfile: {\n                    name: clientMatches[config?.activeIndex]?.secondary?.name || 'Prospect',\n                    attributes: getProspectAttributes(clientMatches[config?.activeIndex]),\n                  },\n                },\n                default: config?.default,\n              }\"\n            ></lib-profile-comparison>\n          </ng-container>\n        </div>\n      </swiper-slide>\n    </ng-container>\n  </lib-swipeable-tabs>\n  @if (\n    (config?.default && config?.activeTabIndex === 0) ||\n    (config?.default && config?.activeTabIndex === 1) ||\n    (config?.default && config?.activeTabIndex === 2) ||\n    (config?.default && config?.activeTabIndex === 3)\n  ) {\n    <div class=\"alert-popup\">\n      <lib-alert-popup [title]=\"'Compatibility Profile'\" [description]=\"'Once you have prospects, we will show you they stock up!'\"></lib-alert-popup>\n    </div>\n  }\n</div>\n", styles: [":host{--match-percentage-fornt-size: 1.5em;--container-sides-shadow-width: 25px;--match-percentage-value-height: 3em}.compose-matcher{position:relative;padding:0 60px;gap:20px}.compose-matcher img.active{filter:brightness(0) saturate(100%) invert(49%) sepia(70%) saturate(5452%) hue-rotate(321deg) brightness(99%) contrast(102%)}.compose-matcher span.active{color:#fe3c72}.compose-matcher .time-wrapper{display:flex;flex-direction:column;align-items:center}.compose-matcher .time{font-size:8px;height:8px;line-height:8px}swiper-slide{display:flex;justify-content:center}swiper-slide lib-chat-suggestion,swiper-slide lib-profile-card{margin-top:1em}.slide-content{height:auto;width:100%;position:relative;display:block;overflow:auto;padding:0 5px}.slide-content:not(.without-shadow){border-radius:10px;padding:20px;box-shadow:5.70371px 5.70371px 11.40741px #00000052 inset,-3.42222px -3.42222px 4.56296px #ffffff1a inset}.bubble-btn{padding:12px;min-width:25%}.prospect-calendar{display:flex;justify-content:center;margin-top:10px;color:#ebebf599;font-size:10px}.count-booked{display:flex;justify-content:center;margin-top:10px}.plan-container{display:flex}.alert-popup{position:absolute;z-index:999;bottom:100px;right:0}.llm-preference-container{display:flex;gap:.5em;align-items:center;justify-content:space-around;margin-left:16px;margin-right:-50px;flex-direction:column}@media (max-width: 576px){.compose-matcher{padding:0}.plan-container{flex-direction:column;align-items:center}.alert-popup{position:absolute;z-index:999;top:280px;right:5px}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { config: [{
                 type: Input
             }], addMessage: [{
@@ -4514,6 +4673,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 type: Output
             }] } });
 
+const innerProgressPurpleColors = {
+    primary: 'rgb(209, 8, 209)',
+    secondary: 'rgb(255, 46, 192)',
+    tertiary: 'rgb(255, 46, 164)',
+};
+
+const mainswiperDefaultOptions = {
+    spaceBetween: 10,
+    slidesPerView: 1,
+    centeredSlides: true,
+    loop: false,
+    autoplay: {
+        delay: 3000,
+        disableOnInteraction: false,
+    },
+    pagination: {
+        el: '.swiper-pagination',
+        clickable: true,
+    },
+    navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+    },
+};
+
+const progressWhiteColors = {
+    primary: 'rgb(255, 255, 255)',
+    secondary: 'rgb(215, 215, 215)',
+    tertiary: 'rgb(214, 214, 214)',
+    gradientPrimary: 'rgb(255, 255, 255)',
+    gradientSecondary: 'rgb(231, 231, 231)',
+    incomplete: 'rgb(214, 214, 214)',
+    complete: 'rgb(255, 255, 255)',
+};
+
+const thumbsSwiperDefaultOptions = {
+    spaceBetween: 10,
+    slidesPerView: 4,
+    freeMode: true,
+    watchSlidesProgress: true,
+    breakpoints: {
+        320: {
+            slidesPerView: 2,
+            spaceBetween: 10,
+        },
+        640: {
+            slidesPerView: 3,
+            spaceBetween: 10,
+        },
+        768: {
+            slidesPerView: 4,
+            spaceBetween: 10,
+        },
+    },
+};
+
 class ArraySortPipe {
     transform(array, field, type = 'ASC') {
         if (!Array.isArray(array)) {
@@ -4702,5 +4917,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractCacheService, AgendaComponent, AlertPopupComponent, AlertStatusFields, ArraySortPipe, AutoDelegationEventTypes, AutoDelegationEventValue, CONVERSATION_FLAG, COUNTER_FLAG_BASE, CalendarAccountEnum, CalendarAccountIconsEnum, CalendarUtilsService, ChatComponent, ChatMetaPipe, ChatService, ChatSuggestionComponent, CircleProgressComponent, CircleProgressModule, CircleVariable, ClientDashboardTabs, ClientHomeComponent, CommonOperations, CountNonEmptyFieldsPipe, DateLocalizationPipe, EditRecurringEventOptions, EventTypes, GetColorByMatcherPipe, GetDisplayValuePipe, GetMultiSelectDisplayTextPipe, GetProfileWithProgressPipe, INNER_CIRCLE_STATE, InitialsPipe, IsStatusIncludedPipe, LibAgendaModule, LibAutoDelegationModalComponent, LibChatComponentModule, LibClientDashboardComponent, LibClientHomeComponent, LibClientMatchOverviewComponent, LibComposeMacherDashComponent, LibDashboardSwipeableTabsComponent, LibEventFormComponent, LibEventFormModule, LibMessageModalComponent, LibSchedulerComponent, LibVisualManagerModalComponent, MATCHER_STATUSES, MatcherStatuses, MatcherStatusesComponent, PROGRESS_GAP_MINUTES, ProfileCardComponent, ProfileCardModule, ProgressTickerService, RecurringTypes, RoundPipe, ScheduleDateStatus, SenderTypes, SharedModule, SpiderChartComponent, StatusIconComponent, TICK_PERIOD_SECONDS, VisualManagerModalEventTypes, VisualManagerModalEventValue, circleData, computeInnerState, dashboardMainSwiperDefaultOptions, dashboardThumbsSwiperDefaultOptions, defaultClientDashboardConfig, defaultClientHomeConfig, defaultSpiderConfig, defsF, defsLG, defsRG, demoPolygonColors, innerProgressDefaultColors, innerProgressPinkColors, innerProgressPurpleColors, innerProgressWhiteColors, mainswiperDefaultOptions, progressDefaultColors, progressWhiteColors, recurringOptions, thumbsSwiperDefaultOptions };
+export { AbstractCacheService, AgendaComponent, AlertPopupComponent, AlertStatusFields, ArraySortPipe, AutoDelegationEventTypes, AutoDelegationEventValue, CONVERSATION_FLAG, COUNTER_FLAG_BASE, CalendarAccountEnum, CalendarAccountIconsEnum, CalendarUtilsService, ChatComponent, ChatMetaPipe, ChatService, ChatSuggestionComponent, CircleProgressComponent, CircleProgressModule, CircleVariable, ClientDashboardTabs, ClientHomeComponent, CommonOperations, CountNonEmptyFieldsPipe, DateLocalizationPipe, EditRecurringEventOptions, EventTypes, GetColorByMatcherPipe, GetDisplayValuePipe, GetMultiSelectDisplayTextPipe, GetProfileWithProgressPipe, HandoffPanelVersion, INNER_CIRCLE_STATE, InitialsPipe, IsStatusIncludedPipe, LibAgendaModule, LibAutoDelegationModalComponent, LibChatComponentModule, LibClientDashboardComponent, LibClientHomeComponent, LibClientMatchOverviewComponent, LibComposeMacherDashComponent, LibDashboardSwipeableTabsComponent, LibEventFormComponent, LibEventFormModule, LibHandoffPanelComponent, LibMessageModalComponent, LibProfileComparisonComponent, LibSchedulerComponent, LibVisualManagerModalComponent, MATCHER_STATUSES, MatcherStatuses, MatcherStatusesComponent, PROGRESS_GAP_MINUTES, ProfileCardComponent, ProfileCardModule, ProgressTickerService, RecurringTypes, RoundPipe, ScheduleDateStatus, SenderTypes, SharedModule, SpiderChartComponent, StatusIconComponent, TICK_PERIOD_SECONDS, VisualManagerModalEventTypes, VisualManagerModalEventValue, circleData, computeInnerState, dashboardMainSwiperDefaultOptions, dashboardThumbsSwiperDefaultOptions, defaultClientDashboardConfig, defaultClientHomeConfig, defaultSpiderConfig, defsF, defsLG, defsRG, demoPolygonColors, innerProgressDefaultColors, innerProgressPinkColors, innerProgressPurpleColors, innerProgressWhiteColors, mainswiperDefaultOptions, progressDefaultColors, progressWhiteColors, recurringOptions, thumbsSwiperDefaultOptions };
 //# sourceMappingURL=naniteninja-dashboard-components-lib.mjs.map