@naniteninja/dashboard-components-lib 1.0.1 → 1.0.3

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

@@ -19,11 +19,11 @@ import { RRule } from 'rrule';
 import { Weekday } from 'rrule/dist/esm/weekday';
 import * as i4 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i3 from 'primeng/skeleton';
+import * as i2$2 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
 import * as d3 from 'd3';
 import 'emoji-picker-element';
-import * as i2$2 from 'ngx-infinite-scroll';
+import * as i2$3 from 'ngx-infinite-scroll';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import { HttpClient } from '@angular/common/http';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -148,12 +148,12 @@ class LibAutoDelegationModalComponent {
             this.popupModalService.hide({ type: AutoDelegationEventTypes.Click, value: AutoDelegationEventValue.RequestAcceped });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", 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: "17.3.12", 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: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { 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 }], animations: [SeeMoreAnimation] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", 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.7", 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: "17.3.12", ngImport: i0, type: LibAutoDelegationModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: LibAutoDelegationModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-auto-delegation-modal', animations: [SeeMoreAnimation], standalone: true, 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"] }]
+            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
                 }, {
@@ -201,12 +201,12 @@ class AgendaDayCardComponent {
             "'": '&#39;',
         })[char] || char);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AgendaDayCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: AgendaDayCardComponent, selector: "lib-agenda-day-card", inputs: { adDay: "adDay", day: "day" }, ngImport: i0, template: "@if (adDay) {\n  <div class=\"agenda-day message-box first-day\">\n    <div class=\"message-box-wrapper\">\n      <div class=\"message-box-content\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n} @else {\n  <div class=\"agenda-day\" [ngClass]=\"{ 'message-box': !!day.startTime, 'hidden-day': day.empty, 'first-day': day.index === 0 }\">\n    <div class=\"message-box-wrapper\">\n      <div class=\"message-box-content\">\n        <div class=\"date\" [class.with-time]=\"!day.empty\">\n          <span [class.empty]=\"day.empty\">{{ day.empty ? '' : day.dayNumber }}</span>\n          @if (!day.empty) {\n            <span class=\"spacer\"></span>\n            <span *ngIf=\"day.startTime\" class=\"event-time\"\n              >{{ day.startTime }} <br />\n              {{ day.endTime }}</span\n            >\n          }\n        </div>\n        <div class=\"day\">\n          <span [class.empty]=\"day.empty\">{{ day.empty ? '' : day.name }}</span>\n        </div>\n        @if (!day.empty && day.user) {\n          <div class=\"profile\">\n            <div class=\"profile-pic\" [class.default-icon]=\"!day.user.profilePic\">\n              @if (day.user.profilePic) {\n                <img [src]=\"day.user.profilePic\" alt=\"Profile Image\" />\n              } @else {\n                <lib-avatar></lib-avatar>\n              }\n            </div>\n            <div class=\"profile-name\" [innerHTML]=\"fullName\"></div>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host .message-box .message-box-wrapper{padding:10px!important}.agenda-day{font-family:Gilroy-Regular,serif;font-size:12px}.agenda-day:not(.message-box){padding:10px 5px}.agenda-day:not(.message-box) .date{margin-bottom:5px}.agenda-day.hidden-day{padding:10px 0}.agenda-day:not(.message-box,.hidden-day,.first-day){max-width:fit-content;position:relative;display:block;margin:0 auto}.agenda-day .profile{display:flex;gap:5px;align-items:center}.agenda-day .profile .profile-pic{border-radius:50%;height:18px;width:18px;min-width:18px;border:1px solid white;background:#222;display:flex;align-items:center;overflow:hidden}.agenda-day .profile .profile-pic img{object-fit:cover;width:100%;height:100%}.agenda-day .profile .profile-pic lib-avatar{position:relative;display:block;margin:0 auto}.agenda-day .profile .profile-pic.default-icon img{width:15px;margin:0 auto}.agenda-day .profile .profile-name{color:#ebebf599;font-size:8px;max-width:30px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.agenda-day .day,.agenda-day .date{white-space:nowrap;line-height:160%}.agenda-day .day span.empty,.agenda-day .date span.empty{margin-bottom:23px;width:100%;position:relative;display:block;line-height:160%;border:1px solid rgba(255,225,225,.25)}.agenda-day .day span.empty:first-child,.agenda-day .date span.empty:first-child{margin-top:8px}.agenda-day .date{display:flex}.agenda-day .date .event-time{font-size:8px;line-height:8px;opacity:.5}@media screen and (max-width: 400px){:host .message-box .message-box-wrapper{padding:10px 7px!important}.agenda-day{font-size:11px}.agenda-day .profile .avatar{height:25px;width:25px}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.LazyImageDirective, selector: "img" }, { kind: "component", type: i2.AvatarComponent, selector: "lib-avatar", inputs: ["height", "width"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: AgendaDayCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: AgendaDayCardComponent, isStandalone: false, selector: "lib-agenda-day-card", inputs: { adDay: "adDay", day: "day" }, ngImport: i0, template: "@if (adDay) {\n  <div class=\"agenda-day message-box first-day\">\n    <div class=\"message-box-wrapper\">\n      <div class=\"message-box-content\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n} @else {\n  <div class=\"agenda-day\" [ngClass]=\"{ 'message-box': !!day.startTime, 'hidden-day': day.empty, 'first-day': day.index === 0 }\">\n    <div class=\"message-box-wrapper\">\n      <div class=\"message-box-content\">\n        <div class=\"date\" [class.with-time]=\"!day.empty\">\n          <span [class.empty]=\"day.empty\">{{ day.empty ? '' : day.dayNumber }}</span>\n          @if (!day.empty) {\n            <span class=\"spacer\"></span>\n            <span *ngIf=\"day.startTime\" class=\"event-time\"\n              >{{ day.startTime }} <br />\n              {{ day.endTime }}</span\n            >\n          }\n        </div>\n        <div class=\"day\">\n          <span [class.empty]=\"day.empty\">{{ day.empty ? '' : day.name }}</span>\n        </div>\n        @if (!day.empty && day.user) {\n          <div class=\"profile\">\n            <div class=\"profile-pic\" [class.default-icon]=\"!day.user.profilePic\">\n              @if (day.user.profilePic) {\n                <img [src]=\"day.user.profilePic\" alt=\"Profile Image\" />\n              } @else {\n                <lib-avatar></lib-avatar>\n              }\n            </div>\n            <div class=\"profile-name\" [innerHTML]=\"fullName\"></div>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host .message-box .message-box-wrapper{padding:10px!important}.agenda-day{font-family:Gilroy-Regular,serif;font-size:12px}.agenda-day:not(.message-box){padding:10px 5px}.agenda-day:not(.message-box) .date{margin-bottom:5px}.agenda-day.hidden-day{padding:10px 0}.agenda-day:not(.message-box,.hidden-day,.first-day){max-width:fit-content;position:relative;display:block;margin:0 auto}.agenda-day .profile{display:flex;gap:5px;align-items:center}.agenda-day .profile .profile-pic{border-radius:50%;height:18px;width:18px;min-width:18px;border:1px solid white;background:#222;display:flex;align-items:center;overflow:hidden}.agenda-day .profile .profile-pic img{object-fit:cover;width:100%;height:100%}.agenda-day .profile .profile-pic lib-avatar{position:relative;display:block;margin:0 auto}.agenda-day .profile .profile-pic.default-icon img{width:15px;margin:0 auto}.agenda-day .profile .profile-name{color:#ebebf599;font-size:8px;max-width:30px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.agenda-day .day,.agenda-day .date{white-space:nowrap;line-height:160%}.agenda-day .day span.empty,.agenda-day .date span.empty{margin-bottom:23px;width:100%;position:relative;display:block;line-height:160%;border:1px solid rgba(255,225,225,.25)}.agenda-day .day span.empty:first-child,.agenda-day .date span.empty:first-child{margin-top:8px}.agenda-day .date{display:flex}.agenda-day .date .event-time{font-size:8px;line-height:8px;opacity:.5}@media screen and (max-width: 400px){:host .message-box .message-box-wrapper{padding:10px 7px!important}.agenda-day{font-size:11px}.agenda-day .profile .avatar{height:25px;width:25px}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.LazyImageDirective, selector: "img" }, { kind: "component", type: i2.AvatarComponent, selector: "lib-avatar", inputs: ["height", "width"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AgendaDayCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: AgendaDayCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-agenda-day-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (adDay) {\n  <div class=\"agenda-day message-box first-day\">\n    <div class=\"message-box-wrapper\">\n      <div class=\"message-box-content\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n} @else {\n  <div class=\"agenda-day\" [ngClass]=\"{ 'message-box': !!day.startTime, 'hidden-day': day.empty, 'first-day': day.index === 0 }\">\n    <div class=\"message-box-wrapper\">\n      <div class=\"message-box-content\">\n        <div class=\"date\" [class.with-time]=\"!day.empty\">\n          <span [class.empty]=\"day.empty\">{{ day.empty ? '' : day.dayNumber }}</span>\n          @if (!day.empty) {\n            <span class=\"spacer\"></span>\n            <span *ngIf=\"day.startTime\" class=\"event-time\"\n              >{{ day.startTime }} <br />\n              {{ day.endTime }}</span\n            >\n          }\n        </div>\n        <div class=\"day\">\n          <span [class.empty]=\"day.empty\">{{ day.empty ? '' : day.name }}</span>\n        </div>\n        @if (!day.empty && day.user) {\n          <div class=\"profile\">\n            <div class=\"profile-pic\" [class.default-icon]=\"!day.user.profilePic\">\n              @if (day.user.profilePic) {\n                <img [src]=\"day.user.profilePic\" alt=\"Profile Image\" />\n              } @else {\n                <lib-avatar></lib-avatar>\n              }\n            </div>\n            <div class=\"profile-name\" [innerHTML]=\"fullName\"></div>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host .message-box .message-box-wrapper{padding:10px!important}.agenda-day{font-family:Gilroy-Regular,serif;font-size:12px}.agenda-day:not(.message-box){padding:10px 5px}.agenda-day:not(.message-box) .date{margin-bottom:5px}.agenda-day.hidden-day{padding:10px 0}.agenda-day:not(.message-box,.hidden-day,.first-day){max-width:fit-content;position:relative;display:block;margin:0 auto}.agenda-day .profile{display:flex;gap:5px;align-items:center}.agenda-day .profile .profile-pic{border-radius:50%;height:18px;width:18px;min-width:18px;border:1px solid white;background:#222;display:flex;align-items:center;overflow:hidden}.agenda-day .profile .profile-pic img{object-fit:cover;width:100%;height:100%}.agenda-day .profile .profile-pic lib-avatar{position:relative;display:block;margin:0 auto}.agenda-day .profile .profile-pic.default-icon img{width:15px;margin:0 auto}.agenda-day .profile .profile-name{color:#ebebf599;font-size:8px;max-width:30px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.agenda-day .day,.agenda-day .date{white-space:nowrap;line-height:160%}.agenda-day .day span.empty,.agenda-day .date span.empty{margin-bottom:23px;width:100%;position:relative;display:block;line-height:160%;border:1px solid rgba(255,225,225,.25)}.agenda-day .day span.empty:first-child,.agenda-day .date span.empty:first-child{margin-top:8px}.agenda-day .date{display:flex}.agenda-day .date .event-time{font-size:8px;line-height:8px;opacity:.5}@media screen and (max-width: 400px){:host .message-box .message-box-wrapper{padding:10px 7px!important}.agenda-day{font-size:11px}.agenda-day .profile .avatar{height:25px;width:25px}}\n"] }]
+            args: [{ selector: 'lib-agenda-day-card', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (adDay) {\n  <div class=\"agenda-day message-box first-day\">\n    <div class=\"message-box-wrapper\">\n      <div class=\"message-box-content\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n} @else {\n  <div class=\"agenda-day\" [ngClass]=\"{ 'message-box': !!day.startTime, 'hidden-day': day.empty, 'first-day': day.index === 0 }\">\n    <div class=\"message-box-wrapper\">\n      <div class=\"message-box-content\">\n        <div class=\"date\" [class.with-time]=\"!day.empty\">\n          <span [class.empty]=\"day.empty\">{{ day.empty ? '' : day.dayNumber }}</span>\n          @if (!day.empty) {\n            <span class=\"spacer\"></span>\n            <span *ngIf=\"day.startTime\" class=\"event-time\"\n              >{{ day.startTime }} <br />\n              {{ day.endTime }}</span\n            >\n          }\n        </div>\n        <div class=\"day\">\n          <span [class.empty]=\"day.empty\">{{ day.empty ? '' : day.name }}</span>\n        </div>\n        @if (!day.empty && day.user) {\n          <div class=\"profile\">\n            <div class=\"profile-pic\" [class.default-icon]=\"!day.user.profilePic\">\n              @if (day.user.profilePic) {\n                <img [src]=\"day.user.profilePic\" alt=\"Profile Image\" />\n              } @else {\n                <lib-avatar></lib-avatar>\n              }\n            </div>\n            <div class=\"profile-name\" [innerHTML]=\"fullName\"></div>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host .message-box .message-box-wrapper{padding:10px!important}.agenda-day{font-family:Gilroy-Regular,serif;font-size:12px}.agenda-day:not(.message-box){padding:10px 5px}.agenda-day:not(.message-box) .date{margin-bottom:5px}.agenda-day.hidden-day{padding:10px 0}.agenda-day:not(.message-box,.hidden-day,.first-day){max-width:fit-content;position:relative;display:block;margin:0 auto}.agenda-day .profile{display:flex;gap:5px;align-items:center}.agenda-day .profile .profile-pic{border-radius:50%;height:18px;width:18px;min-width:18px;border:1px solid white;background:#222;display:flex;align-items:center;overflow:hidden}.agenda-day .profile .profile-pic img{object-fit:cover;width:100%;height:100%}.agenda-day .profile .profile-pic lib-avatar{position:relative;display:block;margin:0 auto}.agenda-day .profile .profile-pic.default-icon img{width:15px;margin:0 auto}.agenda-day .profile .profile-name{color:#ebebf599;font-size:8px;max-width:30px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.agenda-day .day,.agenda-day .date{white-space:nowrap;line-height:160%}.agenda-day .day span.empty,.agenda-day .date span.empty{margin-bottom:23px;width:100%;position:relative;display:block;line-height:160%;border:1px solid rgba(255,225,225,.25)}.agenda-day .day span.empty:first-child,.agenda-day .date span.empty:first-child{margin-top:8px}.agenda-day .date{display:flex}.agenda-day .date .event-time{font-size:8px;line-height:8px;opacity:.5}@media screen and (max-width: 400px){:host .message-box .message-box-wrapper{padding:10px 7px!important}.agenda-day{font-size:11px}.agenda-day .profile .avatar{height:25px;width:25px}}\n"] }]
         }], propDecorators: { adDay: [{
                 type: Input
             }], day: [{
@@ -286,12 +286,12 @@ class AgendaComponent {
         }
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AgendaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: AgendaComponent, selector: "lib-agenda", inputs: { adsTemplate: "adsTemplate", loading$: "loading$", startDate: "startDate", endDate: "endDate", events: "events" }, ngImport: i0, template: "<div class=\"agenda-container\" [class.container-sides-shadow]=\"numberOfEvents > 2\" [class.loading]=\"loading$\">\n  <div [class.has-ads]=\"!!adsTemplate\">\n    @if (adsTemplate) {\n      <div>\n        <ng-container *ngTemplateOutlet=\"adsTemplate\"></ng-container>\n      </div>\n    }\n    <div\n      class=\"wrapper\"\n      libDraggableScroll\n      [direction]=\"direction\"\n      [ngClass]=\"{ 'single-event': numberOfEvents === 1 || (adsTemplate && numberOfEvents === 0), 'no-events': numberOfEvents === 0 }\"\n    >\n      @for (day of days; track day.dayNumber) {\n        <lib-agenda-day-card [day]=\"day\" [class.has-event]=\"!!day.startTime\" [class.hidden-day]=\"day.empty\"></lib-agenda-day-card>\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{--eventCardWidth: 90px;--eventCardWidthMobile: 75px;--agendaDays: 14;--hiddenDayWidth: 25px}.agenda-container{position:relative;display:block;overflow:hidden;width:100%;height:auto}.agenda-container.loading{opacity:.5;pointer-events:none}.agenda-container .has-ads{display:flex;gap:5px}.agenda-container .wrapper{display:flex;padding:20px 15px 10px;position:relative;max-width:100%;width:100%}.agenda-container .wrapper lib-agenda-day-card{margin:0 5px}.agenda-container .wrapper lib-agenda-day-card.has-event{min-width:var(--eventCardWidth)}.agenda-container .wrapper lib-agenda-day-card.hidden-day{margin:0;min-width:var(--hiddenDayWidth)}.agenda-container .wrapper.single-event lib-agenda-day-card:not(.has-event){min-width:calc((100% - var(--eventCardWidth)) / (var(--agendaDays) - 1) - 5px)}.agenda-container .wrapper.no-events lib-agenda-day-card:not(.has-event){min-width:calc(100% / var(--agendaDays) - 1px)}@media screen and (max-width: 400px){.agenda-container .wrapper lib-agenda-day-card.has-event{min-width:var(--eventCardWidthMobile)}.agenda-container .wrapper.single-event lib-agenda-day-card:not(.has-event){min-width:calc((100% - var(--eventCardWidthMobile)) / var(--agendaDays) - 5px)}.agenda-container .wrapper.single-event lib-agenda-day-card:not(.has-event).hidden-day{margin:0;min-width:calc((100% - var(--eventCardWidthMobile)) / var(--agendaDays) - 6px)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DraggableScrollDirective, selector: "[libDraggableScroll]", inputs: ["includeSidePadding", "direction"] }, { kind: "component", type: AgendaDayCardComponent, selector: "lib-agenda-day-card", inputs: ["adDay", "day"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: AgendaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: AgendaComponent, isStandalone: false, selector: "lib-agenda", inputs: { adsTemplate: "adsTemplate", loading$: "loading$", startDate: "startDate", endDate: "endDate", events: "events" }, ngImport: i0, template: "<div class=\"agenda-container\" [class.container-sides-shadow]=\"numberOfEvents > 2\" [class.loading]=\"loading$\">\n  <div [class.has-ads]=\"!!adsTemplate\">\n    @if (adsTemplate) {\n      <div>\n        <ng-container *ngTemplateOutlet=\"adsTemplate\"></ng-container>\n      </div>\n    }\n    <div\n      class=\"wrapper\"\n      libDraggableScroll\n      [direction]=\"direction\"\n      [ngClass]=\"{ 'single-event': numberOfEvents === 1 || (adsTemplate && numberOfEvents === 0), 'no-events': numberOfEvents === 0 }\"\n    >\n      @for (day of days; track day.dayNumber) {\n        <lib-agenda-day-card [day]=\"day\" [class.has-event]=\"!!day.startTime\" [class.hidden-day]=\"day.empty\"></lib-agenda-day-card>\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{--eventCardWidth: 90px;--eventCardWidthMobile: 75px;--agendaDays: 14;--hiddenDayWidth: 25px}.agenda-container{position:relative;display:block;overflow:hidden;width:100%;height:auto}.agenda-container.loading{opacity:.5;pointer-events:none}.agenda-container .has-ads{display:flex;gap:5px}.agenda-container .wrapper{display:flex;padding:20px 15px 10px;position:relative;max-width:100%;width:100%}.agenda-container .wrapper lib-agenda-day-card{margin:0 5px}.agenda-container .wrapper lib-agenda-day-card.has-event{min-width:var(--eventCardWidth)}.agenda-container .wrapper lib-agenda-day-card.hidden-day{margin:0;min-width:var(--hiddenDayWidth)}.agenda-container .wrapper.single-event lib-agenda-day-card:not(.has-event){min-width:calc((100% - var(--eventCardWidth)) / (var(--agendaDays) - 1) - 5px)}.agenda-container .wrapper.no-events lib-agenda-day-card:not(.has-event){min-width:calc(100% / var(--agendaDays) - 1px)}@media screen and (max-width: 400px){.agenda-container .wrapper lib-agenda-day-card.has-event{min-width:var(--eventCardWidthMobile)}.agenda-container .wrapper.single-event lib-agenda-day-card:not(.has-event){min-width:calc((100% - var(--eventCardWidthMobile)) / var(--agendaDays) - 5px)}.agenda-container .wrapper.single-event lib-agenda-day-card:not(.has-event).hidden-day{margin:0;min-width:calc((100% - var(--eventCardWidthMobile)) / var(--agendaDays) - 6px)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DraggableScrollDirective, selector: "[libDraggableScroll]", inputs: ["includeSidePadding", "direction"] }, { kind: "component", type: AgendaDayCardComponent, selector: "lib-agenda-day-card", inputs: ["adDay", "day"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AgendaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: AgendaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-agenda', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"agenda-container\" [class.container-sides-shadow]=\"numberOfEvents > 2\" [class.loading]=\"loading$\">\n  <div [class.has-ads]=\"!!adsTemplate\">\n    @if (adsTemplate) {\n      <div>\n        <ng-container *ngTemplateOutlet=\"adsTemplate\"></ng-container>\n      </div>\n    }\n    <div\n      class=\"wrapper\"\n      libDraggableScroll\n      [direction]=\"direction\"\n      [ngClass]=\"{ 'single-event': numberOfEvents === 1 || (adsTemplate && numberOfEvents === 0), 'no-events': numberOfEvents === 0 }\"\n    >\n      @for (day of days; track day.dayNumber) {\n        <lib-agenda-day-card [day]=\"day\" [class.has-event]=\"!!day.startTime\" [class.hidden-day]=\"day.empty\"></lib-agenda-day-card>\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{--eventCardWidth: 90px;--eventCardWidthMobile: 75px;--agendaDays: 14;--hiddenDayWidth: 25px}.agenda-container{position:relative;display:block;overflow:hidden;width:100%;height:auto}.agenda-container.loading{opacity:.5;pointer-events:none}.agenda-container .has-ads{display:flex;gap:5px}.agenda-container .wrapper{display:flex;padding:20px 15px 10px;position:relative;max-width:100%;width:100%}.agenda-container .wrapper lib-agenda-day-card{margin:0 5px}.agenda-container .wrapper lib-agenda-day-card.has-event{min-width:var(--eventCardWidth)}.agenda-container .wrapper lib-agenda-day-card.hidden-day{margin:0;min-width:var(--hiddenDayWidth)}.agenda-container .wrapper.single-event lib-agenda-day-card:not(.has-event){min-width:calc((100% - var(--eventCardWidth)) / (var(--agendaDays) - 1) - 5px)}.agenda-container .wrapper.no-events lib-agenda-day-card:not(.has-event){min-width:calc(100% / var(--agendaDays) - 1px)}@media screen and (max-width: 400px){.agenda-container .wrapper lib-agenda-day-card.has-event{min-width:var(--eventCardWidthMobile)}.agenda-container .wrapper.single-event lib-agenda-day-card:not(.has-event){min-width:calc((100% - var(--eventCardWidthMobile)) / var(--agendaDays) - 5px)}.agenda-container .wrapper.single-event lib-agenda-day-card:not(.has-event).hidden-day{margin:0;min-width:calc((100% - var(--eventCardWidthMobile)) / var(--agendaDays) - 6px)}}\n"] }]
+            args: [{ selector: 'lib-agenda', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"agenda-container\" [class.container-sides-shadow]=\"numberOfEvents > 2\" [class.loading]=\"loading$\">\n  <div [class.has-ads]=\"!!adsTemplate\">\n    @if (adsTemplate) {\n      <div>\n        <ng-container *ngTemplateOutlet=\"adsTemplate\"></ng-container>\n      </div>\n    }\n    <div\n      class=\"wrapper\"\n      libDraggableScroll\n      [direction]=\"direction\"\n      [ngClass]=\"{ 'single-event': numberOfEvents === 1 || (adsTemplate && numberOfEvents === 0), 'no-events': numberOfEvents === 0 }\"\n    >\n      @for (day of days; track day.dayNumber) {\n        <lib-agenda-day-card [day]=\"day\" [class.has-event]=\"!!day.startTime\" [class.hidden-day]=\"day.empty\"></lib-agenda-day-card>\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{--eventCardWidth: 90px;--eventCardWidthMobile: 75px;--agendaDays: 14;--hiddenDayWidth: 25px}.agenda-container{position:relative;display:block;overflow:hidden;width:100%;height:auto}.agenda-container.loading{opacity:.5;pointer-events:none}.agenda-container .has-ads{display:flex;gap:5px}.agenda-container .wrapper{display:flex;padding:20px 15px 10px;position:relative;max-width:100%;width:100%}.agenda-container .wrapper lib-agenda-day-card{margin:0 5px}.agenda-container .wrapper lib-agenda-day-card.has-event{min-width:var(--eventCardWidth)}.agenda-container .wrapper lib-agenda-day-card.hidden-day{margin:0;min-width:var(--hiddenDayWidth)}.agenda-container .wrapper.single-event lib-agenda-day-card:not(.has-event){min-width:calc((100% - var(--eventCardWidth)) / (var(--agendaDays) - 1) - 5px)}.agenda-container .wrapper.no-events lib-agenda-day-card:not(.has-event){min-width:calc(100% / var(--agendaDays) - 1px)}@media screen and (max-width: 400px){.agenda-container .wrapper lib-agenda-day-card.has-event{min-width:var(--eventCardWidthMobile)}.agenda-container .wrapper.single-event lib-agenda-day-card:not(.has-event){min-width:calc((100% - var(--eventCardWidthMobile)) / var(--agendaDays) - 5px)}.agenda-container .wrapper.single-event lib-agenda-day-card:not(.has-event).hidden-day{margin:0;min-width:calc((100% - var(--eventCardWidthMobile)) / var(--agendaDays) - 6px)}}\n"] }]
         }], propDecorators: { adsTemplate: [{
                 type: Input
             }], loading$: [{
@@ -305,11 +305,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }] } });
 
 class LibAgendaModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LibAgendaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: LibAgendaModule, declarations: [AgendaComponent, AgendaDayCardComponent], imports: [CommonModule, IonicModule, TranslateModule, DirectiveModule, AvatarComponent], exports: [AgendaComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LibAgendaModule, imports: [CommonModule, IonicModule, TranslateModule, DirectiveModule, AvatarComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: LibAgendaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.7", ngImport: i0, type: LibAgendaModule, declarations: [AgendaComponent, AgendaDayCardComponent], imports: [CommonModule, IonicModule, TranslateModule, DirectiveModule, AvatarComponent], exports: [AgendaComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: LibAgendaModule, imports: [CommonModule, IonicModule, TranslateModule, DirectiveModule, AvatarComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LibAgendaModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: LibAgendaModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AgendaComponent, AgendaDayCardComponent],
@@ -555,10 +555,10 @@ class CalendarUtilsService {
         updatedEvent.timeZone = updatedEvent.type === EventTypes.MICROSOFT ? Intl.DateTimeFormat().resolvedOptions().timeZone : updatedEvent.timeZone;
         return updatedEvent;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CalendarUtilsService, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CalendarUtilsService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: CalendarUtilsService, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: CalendarUtilsService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CalendarUtilsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: CalendarUtilsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -576,11 +576,11 @@ class FallbackTranslatePipe {
         const translated = this.translate.instant(key);
         return translated === key ? fallback : translated;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FallbackTranslatePipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: FallbackTranslatePipe, isStandalone: true, name: "fallbackTranslate" }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FallbackTranslatePipe, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", 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.7", ngImport: i0, type: FallbackTranslatePipe, isStandalone: true, name: "fallbackTranslate" }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: FallbackTranslatePipe, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FallbackTranslatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: FallbackTranslatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'fallbackTranslate',
@@ -610,12 +610,12 @@ class LibEventInfoComponent {
         this.title = this.recurringException?.title || this.event.title || this.fallbackTranslatePipe.transform('CALENDAR.NO_TITLE', '(No title)');
         this.note = this.recurringException?.note || this.updatedRecurringException?.note || this.event.note;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LibEventInfoComponent, deps: [{ token: FallbackTranslatePipe }, { token: CalendarUtilsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", 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: "pipe", type: i1.DatePipe, name: "date" }, { 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$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", 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.7", 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: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LibEventInfoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: LibEventInfoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-event-info', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, 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, 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"] }]
         }], ctorParameters: () => [{ type: FallbackTranslatePipe }, { type: CalendarUtilsService }], propDecorators: { event: [{
                 type: Input
             }], calendars: [{
@@ -676,12 +676,12 @@ class LibEditRecurringEventComponent {
         this.options = this.excludeCurrentInstance ? options : [{ label: 'CALENDAR.EDIT_RECURRING_THIS_EVENT', value: EditRecurringEventOptions.CURRENT }, ...options];
         this.editOptionsCtrl.setValue(this.excludeCurrentInstance ? EditRecurringEventOptions.FOLLOWING : EditRecurringEventOptions.CURRENT);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LibEditRecurringEventComponent, deps: [{ token: FallbackTranslatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: LibEditRecurringEventComponent, deps: [{ token: FallbackTranslatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LibEditRecurringEventComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: LibEditRecurringEventComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-edit-recurring-event', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, 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, 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"] }]
         }], ctorParameters: () => [{ type: FallbackTranslatePipe }], propDecorators: { excludeCurrentInstance: [{
                 type: Input
             }], editOptionsCtrl: [{
@@ -923,12 +923,12 @@ class LibEventFormComponent extends BaseComponent {
             this.submitFormEvent(this._draggedEvent, this.draggedEvent);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", 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: "17.3.12", type: LibEventFormComponent, 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", 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.7", 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: "17.3.12", ngImport: i0, type: LibEventFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: LibEventFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-event-form', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+            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$2.FormBuilder }, { type: CalendarUtilsService }, { type: FallbackTranslatePipe }], propDecorators: { calendars: [{
                 type: Input
             }], event: [{
@@ -958,8 +958,8 @@ class LibEventFormModule {
             providers: [...(libMapModule.providers || [])],
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LibEventFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: LibEventFormModule, declarations: [LibEventFormComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: LibEventFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.7", ngImport: i0, type: LibEventFormModule, declarations: [LibEventFormComponent], imports: [CommonModule,
             IonicModule,
             TranslateModule,
             FormsModule,
@@ -977,7 +977,7 @@ class LibEventFormModule {
             LibEventInfoComponent,
             LibEditRecurringEventComponent,
             BaseComponent], exports: [LibEventFormComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LibEventFormModule, providers: [CalendarUtilsService], imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: LibEventFormModule, providers: [CalendarUtilsService], imports: [CommonModule,
             IonicModule,
             TranslateModule,
             FormsModule,
@@ -995,7 +995,7 @@ class LibEventFormModule {
             LibEditRecurringEventComponent,
             BaseComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LibEventFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: LibEventFormModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [LibEventFormComponent],
@@ -1225,12 +1225,12 @@ class LibSchedulerComponent {
         this.eventsDays = eventsDays;
         this.cdr.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LibSchedulerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", 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\" *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: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "component", type: SectionSeparatorComponent, selector: "lib-section-separator" }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i3.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: LibSchedulerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", 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\" *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: "17.3.12", ngImport: i0, type: LibSchedulerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: LibSchedulerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-scheduler', standalone: true, imports: [CommonModule, TranslateModule, SectionSeparatorComponent, SkeletonModule], changeDetection: ChangeDetectionStrategy.OnPush, 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\" *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"] }]
+            args: [{ selector: 'lib-scheduler', imports: [CommonModule, TranslateModule, SectionSeparatorComponent, SkeletonModule], changeDetection: ChangeDetectionStrategy.OnPush, 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\" *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"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { adsTemplate: [{
                 type: Input
             }], loading$: [{
@@ -1417,12 +1417,12 @@ class CircleProgressComponent {
         const u01d = Math.sqrt(u01x * u01x + u01y * u01y);
         return [u01x / u01d, u01y / u01d];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CircleProgressComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CircleProgressComponent, selector: "lib-circle-progress", inputs: { variable: "variable", config: "config" }, ngImport: i0, template: "<img [ngStyle]=\"{ opacity: config.hasNotification ? 1 : 0 }\" src=\"assets/icons/notification-pop.svg\" class=\"notification-icon\" alt=\"menu btn notification icon\" />\n\n<div class=\"circle\" [ngClass]=\"{ 'circle-img': config.imageUrl, 'circle-text': !config.imageUrl }\">\n  @if (!config.imageUrl) {\n    <div class=\"text-container\">\n      <span class=\"percent f-w-400 f-xl h-160\">{{ config.prefix + config.value + config.suffix }}</span>\n      <span class=\"bottom-text f-w-400 f-xs h-100\">{{ type }}</span>\n    </div>\n  } @else {\n    <img [src]=\"config.imageUrl\" [ngStyle]=\"{ 'object-position': config.imgObjectPosition }\" />\n  }\n</div>\n\n@if (variable === circleVariable.Partial) {\n  <div\n    [ngClass]=\"{\n      pulse: config.inner?.showIllumination,\n      'illuminated-external': showExternalPartialCircleProgress,\n      'illuminated-internal': !showExternalPartialCircleProgress,\n    }\"\n  ></div>\n  <svg class=\"circle-progress__image\" width=\"100%\" height=\"100%\" viewBox=\"0 0 90 90\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n    @if (config.showExternalPartialCircleProgress) {\n      <ellipse mask=\"url(#cut-circle)\" cx=\"44.334\" cy=\"44.3024\" rx=\"33.9693\" ry=\"33.6363\" fill=\"url(#paint0_linear_239_3673)\" transform=\"translate(1 0.5)\" />\n      <ellipse mask=\"url(#cut-circle)\" cx=\"44.334\" cy=\"44.3028\" rx=\"27.2427\" ry=\"26.9757\" fill=\"#27242C\" transform=\"translate(2 0)\" />\n      <ellipse mask=\"url(#cut-circle)\" cx=\"44.334\" cy=\"44.3028\" rx=\"27.2427\" ry=\"26.9757\" fill=\"url(#pattern0_239_3673)\" />\n    }\n    <g transform=\"translate(0.25)\">\n      <!-- response time indicators -->\n      @if (config.showExternalPartialCircleProgress) {\n        @if (config.inner?.state === INNER_CIRCLE_STATE.Waiting || config.inner?.state === INNER_CIRCLE_STATE.Unresponsive) {\n          <circle\n            r=\"45\"\n            cx=\"45\"\n            cy=\"45\"\n            [attr.fill]=\"config.inner?.state === INNER_CIRCLE_STATE.Waiting ? 'url(#gradInnerPink)' : 'url(#gradInnerTeal)'\"\n            [attr.mask]=\"'url(#' + innerCircleBehindPathId + ')'\"\n            transform=\"scale(0.659 0.659) translate(+22 21.5) rotate(225, 45, 45)\"\n          />\n        }\n        <circle r=\"45\" cx=\"45\" cy=\"45\" fill=\"url(#grad2)\" [attr.mask]=\"'url(#' + innerCirclePathId + ')'\" transform=\"scale(0.659 0.659) translate(+22 21.5) rotate(225, 45, 45)\" />\n      } @else {\n        @if (config.inner?.state === INNER_CIRCLE_STATE.Waiting || config.inner?.state === INNER_CIRCLE_STATE.Unresponsive) {\n          <circle\n            r=\"45\"\n            cx=\"45\"\n            cy=\"45\"\n            [attr.fill]=\"config.inner?.state === INNER_CIRCLE_STATE.Waiting ? 'url(#gradInnerPink)' : 'url(#gradInnerTeal)'\"\n            [attr.mask]=\"'url(#' + innerCircleBehindPathId + ')'\"\n            transform=\"scale(+0.70 0.70) translate(+20.0 16.5) rotate(225, 45, 45)\"\n          />\n        }\n        <circle r=\"45\" cx=\"45\" cy=\"45\" fill=\"url(#grad2)\" [attr.mask]=\"'url(#' + innerCirclePathId + ')'\" transform=\"scale(+0.70 0.70) translate(+20.0 16.5) rotate(225, 45, 45)\" />\n      }\n      <defs>\n        <mask class=\"circle-progress__mask\" [attr.id]=\"innerCirclePathId\">\n          <g>\n            <path\n              #progressPath\n              d=\"M 45 0 A 45 45 0 1 1 44.9999 0\"\n              stroke=\"white\"\n              stroke-linecap=\"round\"\n              stroke-width=\"5\"\n              [ngStyle]=\"{\n                'stroke-dasharray': progressPath.getTotalLength(),\n                'stroke-dashoffset': progressPath.getTotalLength() - (config.inner?.value * progressPath.getTotalLength()) / config.inner?.max,\n              }\"\n            />\n          </g>\n        </mask>\n        <mask class=\"circle-progress__mask\" [attr.id]=\"innerCircleBehindPathId\">\n          <g>\n            <path d=\"M 45 0 A 45 45 0 1 1 44.9999 0\" stroke=\"white\" stroke-linecap=\"round\" stroke-width=\"5\" />\n          </g>\n        </mask>\n        <radialGradient id=\"grad2\">\n          <stop offset=\"0%\" [attr.stop-color]=\"config.inner?.colors?.tertiary\" />\n          <stop offset=\"80%\" [attr.stop-color]=\"config.inner?.colors?.tertiary\" />\n          <stop offset=\"91%\" [attr.stop-color]=\"config.inner?.colors?.primary\" />\n          <stop offset=\"95%\" [attr.stop-color]=\"config.inner?.colors?.secondary\" />\n          <stop offset=\"100%\" [attr.stop-color]=\"config.inner?.colors?.tertiary\" />\n        </radialGradient>\n\n        <radialGradient id=\"gradInnerPink\">\n          <stop offset=\"0%\" [attr.stop-color]=\"innerProgressPinkColors?.tertiary\" />\n          <stop offset=\"80%\" [attr.stop-color]=\"innerProgressPinkColors?.tertiary\" />\n          <stop offset=\"91%\" [attr.stop-color]=\"innerProgressPinkColors?.primary\" />\n          <stop offset=\"95%\" [attr.stop-color]=\"innerProgressPinkColors?.secondary\" />\n          <stop offset=\"100%\" [attr.stop-color]=\"innerProgressPinkColors?.tertiary\" />\n        </radialGradient>\n\n        <radialGradient id=\"gradInnerTeal\">\n          <stop offset=\"0%\" [attr.stop-color]=\"innerProgressTealColors?.tertiary\" />\n          <stop offset=\"80%\" [attr.stop-color]=\"innerProgressTealColors?.tertiary\" />\n          <stop offset=\"91%\" [attr.stop-color]=\"innerProgressTealColors?.primary\" />\n          <stop offset=\"95%\" [attr.stop-color]=\"innerProgressTealColors?.secondary\" />\n          <stop offset=\"100%\" [attr.stop-color]=\"innerProgressTealColors?.tertiary\" />\n        </radialGradient>\n      </defs>\n    </g>\n    @if (config.showValueProportionLabel) {\n      <text\n        x=\"25\"\n        y=\"70\"\n        text-anchor=\"middle\"\n        dominant-baseline=\"middle\"\n        font-size=\"12\"\n        fill=\"white\"\n        stroke=\"black\"\n        stroke-width=\"3\"\n        stroke-linejoin=\"round\"\n        stroke-linecap=\"round\"\n        paint-order=\"stroke fill\"\n      >\n        {{ (24 * config.inner.value) / config.inner.max | number: '1.0-0' }}\n      </text>\n    }\n    <defs>\n      <mask id=\"cut-circle\">\n        <rect x=\"0\" y=\"0\" width=\"90\" height=\"90\" fill=\"white\" />\n        <circle r=\"27.5\" cx=\"43.5\" cy=\"43.5\" fill=\"black\"></circle>\n      </mask>\n      <pattern id=\"pattern0_239_3673\" patternContentUnits=\"objectBoundingBox\" width=\"1\" height=\"1\">\n        <use xlink:href=\"#image0_239_3673\" transform=\"scale(1)\" />\n      </pattern>\n      <filter id=\"filter0_f_239_3673\" x=\"0.510602\" y=\"0.145909\" width=\"87.6468\" height=\"74.376\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n        <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n        <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\" />\n        <feGaussianBlur stdDeviation=\"4.92705\" result=\"effect1_foregroundBlur_239_3673\" />\n      </filter>\n      <filter id=\"filter1_f_239_3673\" x=\"10.779\" y=\"11.1278\" width=\"65.4831\" height=\"65.4833\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n        <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n        <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\" />\n        <feGaussianBlur stdDeviation=\"2.12309\" result=\"effect1_foregroundBlur_239_3673\" />\n      </filter>\n      <filter id=\"filter2_d_239_3673\" x=\"9.88\" y=\"16.0474\" width=\"68.8873\" height=\"68.8874\" 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 dy=\"6.63108\" />\n        <feGaussianBlur stdDeviation=\"3.31554\" />\n        <feComposite in2=\"hardAlpha\" operator=\"out\" />\n        <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\" />\n        <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_239_3673\" />\n        <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_239_3673\" result=\"shape\" />\n      </filter>\n      <linearGradient id=\"paint0_linear_239_3673\" x1=\"71.4224\" y1=\"13.7746\" x2=\"56.8589\" y2=\"88.1932\" gradientUnits=\"userSpaceOnUse\">\n        <stop offset=\"0.581821\" stop-color=\"#27242C\" />\n        <stop offset=\"1\" stop-color=\"#0C0B0E\" />\n      </linearGradient>\n      <linearGradient id=\"paint1_linear_239_3673\" x1=\"77.0682\" y1=\"5.96974\" x2=\"5.21288\" y2=\"11.5456\" gradientUnits=\"userSpaceOnUse\">\n        <stop [attr.stop-color]=\"config.partialColors?.primary\" />\n        <stop offset=\"1\" [attr.stop-color]=\"config.partialColors?.secondary\" />\n      </linearGradient>\n      <linearGradient id=\"paint2_linear_239_3673\" x1=\"77.068\" y1=\"5.96974\" x2=\"5.2127\" y2=\"11.5456\" gradientUnits=\"userSpaceOnUse\">\n        <stop [attr.stop-color]=\"config.partialColors?.primary\" />\n        <stop offset=\"1\" [attr.stop-color]=\"config.partialColors?.secondary\" />\n      </linearGradient>\n      <linearGradient id=\"paint3_linear_239_3673\" x1=\"77.0682\" y1=\"5.96974\" x2=\"5.21288\" y2=\"11.5456\" gradientUnits=\"userSpaceOnUse\">\n        <stop [attr.stop-color]=\"config.partialColors?.primary\" />\n        <stop offset=\"1\" [attr.stop-color]=\"config.partialColors?.secondary\" />\n      </linearGradient>\n      <radialGradient\n        id=\"paint4_radial_239_3673\"\n        cx=\"0\"\n        cy=\"0\"\n        r=\"1\"\n        gradientUnits=\"userSpaceOnUse\"\n        gradientTransform=\"translate(44.6705 43.9694) rotate(-90) scale(36.3006 37.8505)\"\n      >\n        <stop offset=\"0.629654\" stop-color=\"white\" stop-opacity=\"0\" />\n        <stop offset=\"0.822917\" [attr.stop-color]=\"config.partialColors?.primary\" />\n        <stop offset=\"0.988953\" stop-color=\"white\" stop-opacity=\"0\" />\n      </radialGradient>\n      <linearGradient id=\"paint5_linear_239_3673\" x1=\"70.9798\" y1=\"11.9932\" x2=\"10.7034\" y2=\"16.6706\" gradientUnits=\"userSpaceOnUse\">\n        <stop [attr.stop-color]=\"config.partialColors?.primary\" />\n        <stop offset=\"1\" [attr.stop-color]=\"config.partialColors?.secondary\" />\n      </linearGradient>\n      <radialGradient\n        id=\"paint6_radial_239_3673\"\n        cx=\"0\"\n        cy=\"0\"\n        r=\"1\"\n        gradientUnits=\"userSpaceOnUse\"\n        gradientTransform=\"translate(43.8027 43.8695) rotate(-90) scale(30.451 31.7512)\"\n      >\n        <stop offset=\"0.629654\" stop-color=\"white\" stop-opacity=\"0\" />\n        <stop offset=\"0.822917\" [attr.stop-color]=\"config.partialColors?.primary\" />\n        <stop offset=\"0.988953\" stop-color=\"white\" stop-opacity=\"0\" />\n      </radialGradient>\n      <linearGradient id=\"paint7_linear_239_3673\" x1=\"71.1248\" y1=\"12.7476\" x2=\"12.2928\" y2=\"17.3129\" gradientUnits=\"userSpaceOnUse\">\n        <stop [attr.stop-color]=\"config.inner?.colors?.tertiary\" />\n        <stop offset=\"1\" [attr.stop-color]=\"config.inner?.colors?.secondary\" />\n      </linearGradient>\n      <radialGradient id=\"paint8_radial_239_3673\" cx=\"0\" cy=\"0\" r=\"1\" gradientUnits=\"userSpaceOnUse\" gradientTransform=\"translate(44.599 43.86) rotate(-90) scale(29.7213 30.9903)\">\n        <stop offset=\"0.629654\" stop-color=\"white\" stop-opacity=\"0\" />\n        <stop offset=\"0.880168\" [attr.stop-color]=\"config.inner?.colors?.primary\" />\n        <stop offset=\"0.988953\" stop-color=\"white\" stop-opacity=\"0\" />\n      </radialGradient>\n    </defs>\n  </svg>\n\n  @if (config.showExternalPartialCircleProgress) {\n    <svg class=\"circle-progress__svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 90 90\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <circle r=\"45\" cx=\"45\" cy=\"45\" fill=\"url(#grad)\" [attr.mask]=\"'url(#' + pathId + ')'\" />\n      <defs>\n        <mask class=\"circle-progress__mask\" [attr.id]=\"pathId\">\n          <g>\n            <path\n              #progressPath\n              d=\"M 7.2598244424559155 69.50875657567614 A 45 45 0 1 1 82.74017555754409 69.50875657567614\"\n              stroke=\"white\"\n              stroke-linecap=\"round\"\n              stroke-width=\"8.5\"\n              [ngStyle]=\"{\n                'stroke-dasharray': progressPath.getTotalLength(),\n                'stroke-dashoffset': progressPath.getTotalLength() - (config.value * progressPath.getTotalLength()) / config.max,\n              }\"\n            />\n          </g>\n          <circle r=\"37.5\" cx=\"45\" cy=\"45\" fill=\"black\" />\n        </mask>\n        <radialGradient id=\"grad\">\n          <stop offset=\"0%\" [attr.stop-color]=\"config.partialColors?.gradientPrimary\" />\n          <stop offset=\"80%\" [attr.stop-color]=\"config.partialColors?.gradientPrimary\" />\n          <stop offset=\"90%\" [attr.stop-color]=\"config.partialColors?.gradientSecondary\" />\n          <stop offset=\"100%\" [attr.stop-color]=\"config.partialColors?.gradientPrimary\" />\n        </radialGradient>\n      </defs>\n    </svg>\n  }\n}\n@if (variable === circleVariable.Complete) {\n  <svg\n    class=\"circle-progress-d3__main\"\n    width=\"100%\"\n    height=\"100%\"\n    viewBox=\"-10 -10 90 90\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    [ngStyle]=\"{ display: config.value === 0 ? 'none' : 'block' }\"\n  >\n    <g transform=\"translate(0.3,-0.3)\">\n      <path fill=\"none\" stroke-width=\"1\" stroke=\"transparent\" d=\"M 0 45 A 45 45 0 0 1 45 0\" style=\"transform-origin: center; transform: translate(-1.4px, -0.7px)\"></path>\n    </g>\n  </svg>\n\n  <svg class=\"circle-progress-d3__image\" width=\"100%\" height=\"100%\" viewBox=\"0 0 90 90\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n    <ellipse mask=\"url(#cut-circle)\" cx=\"44.334\" cy=\"44.3024\" rx=\"33.9693\" ry=\"33.6363\" fill=\"url(#paint0_linear_239_3673)\" />\n    <g transform=\"translate(0.3,-0.3)\" opacity=\"1\">\n      <path\n        opacity=\"0.15\"\n        d=\"M 0 45 A 45 45 0 0 1 90 45 M 90 45 A 45 45 0 0 1 0 45\"\n        stroke-width=\"12\"\n        stroke=\"black\"\n        style=\"transform-origin: center; transform: scale(0.69) translate(-1.4px, -0.7px)\"\n      />\n    </g>\n    <defs>\n      <mask id=\"cut-circle\">\n        <rect x=\"0\" y=\"0\" width=\"90\" height=\"90\" fill=\"white\" />\n        <circle r=\"27.5\" cx=\"44.5\" cy=\"44\" fill=\"black\"></circle>\n      </mask>\n    </defs>\n  </svg>\n\n  <svg class=\"circle-progress-d3__svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 90 90\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle\n      r=\"45\"\n      cx=\"45\"\n      cy=\"45\"\n      [attr.mask]=\"'url(#' + pathId + ')'\"\n      [ngStyle]=\"{ fill: config.value === config.max ? config.partialColors?.complete : config.partialColors?.incomplete }\"\n    />\n    <defs>\n      <mask class=\"circle-progress-d3__mask\" [attr.id]=\"pathId\">\n        <g>\n          <path\n            #progressPath\n            d=\"M 45 0 A 45 45 0 1 1 44.9999 0\"\n            stroke=\"white\"\n            stroke-linecap=\"round\"\n            stroke-width=\"12\"\n            [ngStyle]=\"{\n              'stroke-dasharray': progressPath.getTotalLength(),\n              'stroke-dashoffset': progressPath.getTotalLength() - (config.value * progressPath.getTotalLength()) / config.max,\n            }\"\n          />\n        </g>\n      </mask>\n    </defs>\n  </svg>\n}\n", styles: [".pulse{overflow:visible!important}.pulse:before{content:\"\";position:absolute;inset:0;border-radius:50%;animation:pulse-animation 2s infinite}@keyframes pulse-animation{0%{transform:scale(.95);box-shadow:0 0 #fe3c73e3}70%{transform:scale(1);box-shadow:0 0 0 10px #fe3c7300}to{transform:scale(.95);box-shadow:0 0 #fe3c7300}}:host{position:relative;display:flex;width:var(--width);--width: 101px;--font-family: \"Calistoga\", serif;--color-text: #fff;--font-size-percentage: 17px}.label-hours{position:absolute;bottom:3.5em;left:3.5em;font-size:7px;z-index:99}.circle{position:absolute;top:48%;left:50%;height:var(--lib-circle-progress-height, 65%);width:var(--lib-circle-progress-width, 65%);transform:translate(-50%,-50%);background:linear-gradient(180deg,#27242c 61.33%,#0c0b0e 96.43%);border-radius:50%;display:grid;justify-content:center;align-items:center}.circle-text{width:85%;height:85%}.circle-img{display:block;overflow:hidden}.circle .text-container{display:grid}.circle .text-container .percent{text-align:center;color:var(--color-text);font-family:var(--font-family);font-size:var(--font-size-percentage)}.circle .text-container .bottom-text{text-align:center;opacity:.6;color:#ffffff80}.circle img{width:100%;height:100%;object-fit:cover}.circle-progress__image{z-index:5;position:relative}.circle-progress__svg{position:absolute;top:0;transform:scale(.77) translate(-.65%,-1.6%);z-index:5}.circle-progress__mask>g{transform:scale(.92);transform-origin:center center}.circle-progress__mask>g>path{transform-origin:center center}.circle-progress-d3__image{position:relative;z-index:8}.circle-progress-d3__svg{position:absolute;top:0;transform:scale(.77) translate(-.65%,-1.6%);z-index:11}.circle-progress-d3__mask>g{transform:scale(.88);transform-origin:center center}.circle-progress-d3__mask>g>path{transform-origin:center center}.circle-progress-d3__main{position:absolute;top:0;transform:scale(.69) translate(-12.05%,-11.9%);z-index:10}.pulse.illuminated-external{position:absolute;top:10%;left:11.5%;width:75%;height:75%}.pulse.illuminated-internal{position:absolute;top:14%;left:16%;width:67%;height:67%}.notification-icon{position:absolute;top:12.5%;right:12.5%;width:30%;z-index:6}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: CircleProgressComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: CircleProgressComponent, isStandalone: false, selector: "lib-circle-progress", inputs: { variable: "variable", config: "config" }, ngImport: i0, template: "<img [ngStyle]=\"{ opacity: config.hasNotification ? 1 : 0 }\" src=\"assets/icons/notification-pop.svg\" class=\"notification-icon\" alt=\"menu btn notification icon\" />\n\n<div class=\"circle\" [ngClass]=\"{ 'circle-img': config.imageUrl, 'circle-text': !config.imageUrl }\">\n  @if (!config.imageUrl) {\n    <div class=\"text-container\">\n      <span class=\"percent f-w-400 f-xl h-160\">{{ config.prefix + config.value + config.suffix }}</span>\n      <span class=\"bottom-text f-w-400 f-xs h-100\">{{ type }}</span>\n    </div>\n  } @else {\n    <img [src]=\"config.imageUrl\" [ngStyle]=\"{ 'object-position': config.imgObjectPosition }\" />\n  }\n</div>\n\n@if (variable === circleVariable.Partial) {\n  <div\n    [ngClass]=\"{\n      pulse: config.inner?.showIllumination,\n      'illuminated-external': showExternalPartialCircleProgress,\n      'illuminated-internal': !showExternalPartialCircleProgress,\n    }\"\n  ></div>\n  <svg class=\"circle-progress__image\" width=\"100%\" height=\"100%\" viewBox=\"0 0 90 90\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n    @if (config.showExternalPartialCircleProgress) {\n      <ellipse mask=\"url(#cut-circle)\" cx=\"44.334\" cy=\"44.3024\" rx=\"33.9693\" ry=\"33.6363\" fill=\"url(#paint0_linear_239_3673)\" transform=\"translate(1 0.5)\" />\n      <ellipse mask=\"url(#cut-circle)\" cx=\"44.334\" cy=\"44.3028\" rx=\"27.2427\" ry=\"26.9757\" fill=\"#27242C\" transform=\"translate(2 0)\" />\n      <ellipse mask=\"url(#cut-circle)\" cx=\"44.334\" cy=\"44.3028\" rx=\"27.2427\" ry=\"26.9757\" fill=\"url(#pattern0_239_3673)\" />\n    }\n    <g transform=\"translate(0.25)\">\n      <!-- response time indicators -->\n      @if (config.showExternalPartialCircleProgress) {\n        @if (config.inner?.state === INNER_CIRCLE_STATE.Waiting || config.inner?.state === INNER_CIRCLE_STATE.Unresponsive) {\n          <circle\n            r=\"45\"\n            cx=\"45\"\n            cy=\"45\"\n            [attr.fill]=\"config.inner?.state === INNER_CIRCLE_STATE.Waiting ? 'url(#gradInnerPink)' : 'url(#gradInnerTeal)'\"\n            [attr.mask]=\"'url(#' + innerCircleBehindPathId + ')'\"\n            transform=\"scale(0.659 0.659) translate(+22 21.5) rotate(225, 45, 45)\"\n          />\n        }\n        <circle r=\"45\" cx=\"45\" cy=\"45\" fill=\"url(#grad2)\" [attr.mask]=\"'url(#' + innerCirclePathId + ')'\" transform=\"scale(0.659 0.659) translate(+22 21.5) rotate(225, 45, 45)\" />\n      } @else {\n        @if (config.inner?.state === INNER_CIRCLE_STATE.Waiting || config.inner?.state === INNER_CIRCLE_STATE.Unresponsive) {\n          <circle\n            r=\"45\"\n            cx=\"45\"\n            cy=\"45\"\n            [attr.fill]=\"config.inner?.state === INNER_CIRCLE_STATE.Waiting ? 'url(#gradInnerPink)' : 'url(#gradInnerTeal)'\"\n            [attr.mask]=\"'url(#' + innerCircleBehindPathId + ')'\"\n            transform=\"scale(+0.70 0.70) translate(+20.0 16.5) rotate(225, 45, 45)\"\n          />\n        }\n        <circle r=\"45\" cx=\"45\" cy=\"45\" fill=\"url(#grad2)\" [attr.mask]=\"'url(#' + innerCirclePathId + ')'\" transform=\"scale(+0.70 0.70) translate(+20.0 16.5) rotate(225, 45, 45)\" />\n      }\n      <defs>\n        <mask class=\"circle-progress__mask\" [attr.id]=\"innerCirclePathId\">\n          <g>\n            <path\n              #progressPath\n              d=\"M 45 0 A 45 45 0 1 1 44.9999 0\"\n              stroke=\"white\"\n              stroke-linecap=\"round\"\n              stroke-width=\"5\"\n              [ngStyle]=\"{\n                'stroke-dasharray': progressPath.getTotalLength(),\n                'stroke-dashoffset': progressPath.getTotalLength() - (config.inner?.value * progressPath.getTotalLength()) / config.inner?.max,\n              }\"\n            />\n          </g>\n        </mask>\n        <mask class=\"circle-progress__mask\" [attr.id]=\"innerCircleBehindPathId\">\n          <g>\n            <path d=\"M 45 0 A 45 45 0 1 1 44.9999 0\" stroke=\"white\" stroke-linecap=\"round\" stroke-width=\"5\" />\n          </g>\n        </mask>\n        <radialGradient id=\"grad2\">\n          <stop offset=\"0%\" [attr.stop-color]=\"config.inner?.colors?.tertiary\" />\n          <stop offset=\"80%\" [attr.stop-color]=\"config.inner?.colors?.tertiary\" />\n          <stop offset=\"91%\" [attr.stop-color]=\"config.inner?.colors?.primary\" />\n          <stop offset=\"95%\" [attr.stop-color]=\"config.inner?.colors?.secondary\" />\n          <stop offset=\"100%\" [attr.stop-color]=\"config.inner?.colors?.tertiary\" />\n        </radialGradient>\n\n        <radialGradient id=\"gradInnerPink\">\n          <stop offset=\"0%\" [attr.stop-color]=\"innerProgressPinkColors?.tertiary\" />\n          <stop offset=\"80%\" [attr.stop-color]=\"innerProgressPinkColors?.tertiary\" />\n          <stop offset=\"91%\" [attr.stop-color]=\"innerProgressPinkColors?.primary\" />\n          <stop offset=\"95%\" [attr.stop-color]=\"innerProgressPinkColors?.secondary\" />\n          <stop offset=\"100%\" [attr.stop-color]=\"innerProgressPinkColors?.tertiary\" />\n        </radialGradient>\n\n        <radialGradient id=\"gradInnerTeal\">\n          <stop offset=\"0%\" [attr.stop-color]=\"innerProgressTealColors?.tertiary\" />\n          <stop offset=\"80%\" [attr.stop-color]=\"innerProgressTealColors?.tertiary\" />\n          <stop offset=\"91%\" [attr.stop-color]=\"innerProgressTealColors?.primary\" />\n          <stop offset=\"95%\" [attr.stop-color]=\"innerProgressTealColors?.secondary\" />\n          <stop offset=\"100%\" [attr.stop-color]=\"innerProgressTealColors?.tertiary\" />\n        </radialGradient>\n      </defs>\n    </g>\n    @if (config.showValueProportionLabel) {\n      <text\n        x=\"25\"\n        y=\"70\"\n        text-anchor=\"middle\"\n        dominant-baseline=\"middle\"\n        font-size=\"12\"\n        fill=\"white\"\n        stroke=\"black\"\n        stroke-width=\"3\"\n        stroke-linejoin=\"round\"\n        stroke-linecap=\"round\"\n        paint-order=\"stroke fill\"\n      >\n        {{ (24 * config.inner.value) / config.inner.max | number: '1.0-0' }}\n      </text>\n    }\n    <defs>\n      <mask id=\"cut-circle\">\n        <rect x=\"0\" y=\"0\" width=\"90\" height=\"90\" fill=\"white\" />\n        <circle r=\"27.5\" cx=\"43.5\" cy=\"43.5\" fill=\"black\"></circle>\n      </mask>\n      <pattern id=\"pattern0_239_3673\" patternContentUnits=\"objectBoundingBox\" width=\"1\" height=\"1\">\n        <use xlink:href=\"#image0_239_3673\" transform=\"scale(1)\" />\n      </pattern>\n      <filter id=\"filter0_f_239_3673\" x=\"0.510602\" y=\"0.145909\" width=\"87.6468\" height=\"74.376\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n        <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n        <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\" />\n        <feGaussianBlur stdDeviation=\"4.92705\" result=\"effect1_foregroundBlur_239_3673\" />\n      </filter>\n      <filter id=\"filter1_f_239_3673\" x=\"10.779\" y=\"11.1278\" width=\"65.4831\" height=\"65.4833\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n        <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n        <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\" />\n        <feGaussianBlur stdDeviation=\"2.12309\" result=\"effect1_foregroundBlur_239_3673\" />\n      </filter>\n      <filter id=\"filter2_d_239_3673\" x=\"9.88\" y=\"16.0474\" width=\"68.8873\" height=\"68.8874\" 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 dy=\"6.63108\" />\n        <feGaussianBlur stdDeviation=\"3.31554\" />\n        <feComposite in2=\"hardAlpha\" operator=\"out\" />\n        <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\" />\n        <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_239_3673\" />\n        <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_239_3673\" result=\"shape\" />\n      </filter>\n      <linearGradient id=\"paint0_linear_239_3673\" x1=\"71.4224\" y1=\"13.7746\" x2=\"56.8589\" y2=\"88.1932\" gradientUnits=\"userSpaceOnUse\">\n        <stop offset=\"0.581821\" stop-color=\"#27242C\" />\n        <stop offset=\"1\" stop-color=\"#0C0B0E\" />\n      </linearGradient>\n      <linearGradient id=\"paint1_linear_239_3673\" x1=\"77.0682\" y1=\"5.96974\" x2=\"5.21288\" y2=\"11.5456\" gradientUnits=\"userSpaceOnUse\">\n        <stop [attr.stop-color]=\"config.partialColors?.primary\" />\n        <stop offset=\"1\" [attr.stop-color]=\"config.partialColors?.secondary\" />\n      </linearGradient>\n      <linearGradient id=\"paint2_linear_239_3673\" x1=\"77.068\" y1=\"5.96974\" x2=\"5.2127\" y2=\"11.5456\" gradientUnits=\"userSpaceOnUse\">\n        <stop [attr.stop-color]=\"config.partialColors?.primary\" />\n        <stop offset=\"1\" [attr.stop-color]=\"config.partialColors?.secondary\" />\n      </linearGradient>\n      <linearGradient id=\"paint3_linear_239_3673\" x1=\"77.0682\" y1=\"5.96974\" x2=\"5.21288\" y2=\"11.5456\" gradientUnits=\"userSpaceOnUse\">\n        <stop [attr.stop-color]=\"config.partialColors?.primary\" />\n        <stop offset=\"1\" [attr.stop-color]=\"config.partialColors?.secondary\" />\n      </linearGradient>\n      <radialGradient\n        id=\"paint4_radial_239_3673\"\n        cx=\"0\"\n        cy=\"0\"\n        r=\"1\"\n        gradientUnits=\"userSpaceOnUse\"\n        gradientTransform=\"translate(44.6705 43.9694) rotate(-90) scale(36.3006 37.8505)\"\n      >\n        <stop offset=\"0.629654\" stop-color=\"white\" stop-opacity=\"0\" />\n        <stop offset=\"0.822917\" [attr.stop-color]=\"config.partialColors?.primary\" />\n        <stop offset=\"0.988953\" stop-color=\"white\" stop-opacity=\"0\" />\n      </radialGradient>\n      <linearGradient id=\"paint5_linear_239_3673\" x1=\"70.9798\" y1=\"11.9932\" x2=\"10.7034\" y2=\"16.6706\" gradientUnits=\"userSpaceOnUse\">\n        <stop [attr.stop-color]=\"config.partialColors?.primary\" />\n        <stop offset=\"1\" [attr.stop-color]=\"config.partialColors?.secondary\" />\n      </linearGradient>\n      <radialGradient\n        id=\"paint6_radial_239_3673\"\n        cx=\"0\"\n        cy=\"0\"\n        r=\"1\"\n        gradientUnits=\"userSpaceOnUse\"\n        gradientTransform=\"translate(43.8027 43.8695) rotate(-90) scale(30.451 31.7512)\"\n      >\n        <stop offset=\"0.629654\" stop-color=\"white\" stop-opacity=\"0\" />\n        <stop offset=\"0.822917\" [attr.stop-color]=\"config.partialColors?.primary\" />\n        <stop offset=\"0.988953\" stop-color=\"white\" stop-opacity=\"0\" />\n      </radialGradient>\n      <linearGradient id=\"paint7_linear_239_3673\" x1=\"71.1248\" y1=\"12.7476\" x2=\"12.2928\" y2=\"17.3129\" gradientUnits=\"userSpaceOnUse\">\n        <stop [attr.stop-color]=\"config.inner?.colors?.tertiary\" />\n        <stop offset=\"1\" [attr.stop-color]=\"config.inner?.colors?.secondary\" />\n      </linearGradient>\n      <radialGradient id=\"paint8_radial_239_3673\" cx=\"0\" cy=\"0\" r=\"1\" gradientUnits=\"userSpaceOnUse\" gradientTransform=\"translate(44.599 43.86) rotate(-90) scale(29.7213 30.9903)\">\n        <stop offset=\"0.629654\" stop-color=\"white\" stop-opacity=\"0\" />\n        <stop offset=\"0.880168\" [attr.stop-color]=\"config.inner?.colors?.primary\" />\n        <stop offset=\"0.988953\" stop-color=\"white\" stop-opacity=\"0\" />\n      </radialGradient>\n    </defs>\n  </svg>\n\n  @if (config.showExternalPartialCircleProgress) {\n    <svg class=\"circle-progress__svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 90 90\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <circle r=\"45\" cx=\"45\" cy=\"45\" fill=\"url(#grad)\" [attr.mask]=\"'url(#' + pathId + ')'\" />\n      <defs>\n        <mask class=\"circle-progress__mask\" [attr.id]=\"pathId\">\n          <g>\n            <path\n              #progressPath\n              d=\"M 7.2598244424559155 69.50875657567614 A 45 45 0 1 1 82.74017555754409 69.50875657567614\"\n              stroke=\"white\"\n              stroke-linecap=\"round\"\n              stroke-width=\"8.5\"\n              [ngStyle]=\"{\n                'stroke-dasharray': progressPath.getTotalLength(),\n                'stroke-dashoffset': progressPath.getTotalLength() - (config.value * progressPath.getTotalLength()) / config.max,\n              }\"\n            />\n          </g>\n          <circle r=\"37.5\" cx=\"45\" cy=\"45\" fill=\"black\" />\n        </mask>\n        <radialGradient id=\"grad\">\n          <stop offset=\"0%\" [attr.stop-color]=\"config.partialColors?.gradientPrimary\" />\n          <stop offset=\"80%\" [attr.stop-color]=\"config.partialColors?.gradientPrimary\" />\n          <stop offset=\"90%\" [attr.stop-color]=\"config.partialColors?.gradientSecondary\" />\n          <stop offset=\"100%\" [attr.stop-color]=\"config.partialColors?.gradientPrimary\" />\n        </radialGradient>\n      </defs>\n    </svg>\n  }\n}\n@if (variable === circleVariable.Complete) {\n  <svg\n    class=\"circle-progress-d3__main\"\n    width=\"100%\"\n    height=\"100%\"\n    viewBox=\"-10 -10 90 90\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    [ngStyle]=\"{ display: config.value === 0 ? 'none' : 'block' }\"\n  >\n    <g transform=\"translate(0.3,-0.3)\">\n      <path fill=\"none\" stroke-width=\"1\" stroke=\"transparent\" d=\"M 0 45 A 45 45 0 0 1 45 0\" style=\"transform-origin: center; transform: translate(-1.4px, -0.7px)\"></path>\n    </g>\n  </svg>\n\n  <svg class=\"circle-progress-d3__image\" width=\"100%\" height=\"100%\" viewBox=\"0 0 90 90\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n    <ellipse mask=\"url(#cut-circle)\" cx=\"44.334\" cy=\"44.3024\" rx=\"33.9693\" ry=\"33.6363\" fill=\"url(#paint0_linear_239_3673)\" />\n    <g transform=\"translate(0.3,-0.3)\" opacity=\"1\">\n      <path\n        opacity=\"0.15\"\n        d=\"M 0 45 A 45 45 0 0 1 90 45 M 90 45 A 45 45 0 0 1 0 45\"\n        stroke-width=\"12\"\n        stroke=\"black\"\n        style=\"transform-origin: center; transform: scale(0.69) translate(-1.4px, -0.7px)\"\n      />\n    </g>\n    <defs>\n      <mask id=\"cut-circle\">\n        <rect x=\"0\" y=\"0\" width=\"90\" height=\"90\" fill=\"white\" />\n        <circle r=\"27.5\" cx=\"44.5\" cy=\"44\" fill=\"black\"></circle>\n      </mask>\n    </defs>\n  </svg>\n\n  <svg class=\"circle-progress-d3__svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 90 90\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle\n      r=\"45\"\n      cx=\"45\"\n      cy=\"45\"\n      [attr.mask]=\"'url(#' + pathId + ')'\"\n      [ngStyle]=\"{ fill: config.value === config.max ? config.partialColors?.complete : config.partialColors?.incomplete }\"\n    />\n    <defs>\n      <mask class=\"circle-progress-d3__mask\" [attr.id]=\"pathId\">\n        <g>\n          <path\n            #progressPath\n            d=\"M 45 0 A 45 45 0 1 1 44.9999 0\"\n            stroke=\"white\"\n            stroke-linecap=\"round\"\n            stroke-width=\"12\"\n            [ngStyle]=\"{\n              'stroke-dasharray': progressPath.getTotalLength(),\n              'stroke-dashoffset': progressPath.getTotalLength() - (config.value * progressPath.getTotalLength()) / config.max,\n            }\"\n          />\n        </g>\n      </mask>\n    </defs>\n  </svg>\n}\n", styles: [".pulse{overflow:visible!important}.pulse:before{content:\"\";position:absolute;inset:0;border-radius:50%;animation:pulse-animation 2s infinite}@keyframes pulse-animation{0%{transform:scale(.95);box-shadow:0 0 #fe3c73e3}70%{transform:scale(1);box-shadow:0 0 0 10px #fe3c7300}to{transform:scale(.95);box-shadow:0 0 #fe3c7300}}:host{position:relative;display:flex;width:var(--width);--width: 101px;--font-family: \"Calistoga\", serif;--color-text: #fff;--font-size-percentage: 17px}.label-hours{position:absolute;bottom:3.5em;left:3.5em;font-size:7px;z-index:99}.circle{position:absolute;top:48%;left:50%;height:var(--lib-circle-progress-height, 65%);width:var(--lib-circle-progress-width, 65%);transform:translate(-50%,-50%);background:linear-gradient(180deg,#27242c 61.33%,#0c0b0e 96.43%);border-radius:50%;display:grid;justify-content:center;align-items:center}.circle-text{width:85%;height:85%}.circle-img{display:block;overflow:hidden}.circle .text-container{display:grid}.circle .text-container .percent{text-align:center;color:var(--color-text);font-family:var(--font-family);font-size:var(--font-size-percentage)}.circle .text-container .bottom-text{text-align:center;opacity:.6;color:#ffffff80}.circle img{width:100%;height:100%;object-fit:cover}.circle-progress__image{z-index:5;position:relative}.circle-progress__svg{position:absolute;top:0;transform:scale(.77) translate(-.65%,-1.6%);z-index:5}.circle-progress__mask>g{transform:scale(.92);transform-origin:center center}.circle-progress__mask>g>path{transform-origin:center center}.circle-progress-d3__image{position:relative;z-index:8}.circle-progress-d3__svg{position:absolute;top:0;transform:scale(.77) translate(-.65%,-1.6%);z-index:11}.circle-progress-d3__mask>g{transform:scale(.88);transform-origin:center center}.circle-progress-d3__mask>g>path{transform-origin:center center}.circle-progress-d3__main{position:absolute;top:0;transform:scale(.69) translate(-12.05%,-11.9%);z-index:10}.pulse.illuminated-external{position:absolute;top:10%;left:11.5%;width:75%;height:75%}.pulse.illuminated-internal{position:absolute;top:14%;left:16%;width:67%;height:67%}.notification-icon{position:absolute;top:12.5%;right:12.5%;width:30%;z-index:6}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CircleProgressComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: CircleProgressComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-circle-progress', changeDetection: ChangeDetectionStrategy.OnPush, template: "<img [ngStyle]=\"{ opacity: config.hasNotification ? 1 : 0 }\" src=\"assets/icons/notification-pop.svg\" class=\"notification-icon\" alt=\"menu btn notification icon\" />\n\n<div class=\"circle\" [ngClass]=\"{ 'circle-img': config.imageUrl, 'circle-text': !config.imageUrl }\">\n  @if (!config.imageUrl) {\n    <div class=\"text-container\">\n      <span class=\"percent f-w-400 f-xl h-160\">{{ config.prefix + config.value + config.suffix }}</span>\n      <span class=\"bottom-text f-w-400 f-xs h-100\">{{ type }}</span>\n    </div>\n  } @else {\n    <img [src]=\"config.imageUrl\" [ngStyle]=\"{ 'object-position': config.imgObjectPosition }\" />\n  }\n</div>\n\n@if (variable === circleVariable.Partial) {\n  <div\n    [ngClass]=\"{\n      pulse: config.inner?.showIllumination,\n      'illuminated-external': showExternalPartialCircleProgress,\n      'illuminated-internal': !showExternalPartialCircleProgress,\n    }\"\n  ></div>\n  <svg class=\"circle-progress__image\" width=\"100%\" height=\"100%\" viewBox=\"0 0 90 90\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n    @if (config.showExternalPartialCircleProgress) {\n      <ellipse mask=\"url(#cut-circle)\" cx=\"44.334\" cy=\"44.3024\" rx=\"33.9693\" ry=\"33.6363\" fill=\"url(#paint0_linear_239_3673)\" transform=\"translate(1 0.5)\" />\n      <ellipse mask=\"url(#cut-circle)\" cx=\"44.334\" cy=\"44.3028\" rx=\"27.2427\" ry=\"26.9757\" fill=\"#27242C\" transform=\"translate(2 0)\" />\n      <ellipse mask=\"url(#cut-circle)\" cx=\"44.334\" cy=\"44.3028\" rx=\"27.2427\" ry=\"26.9757\" fill=\"url(#pattern0_239_3673)\" />\n    }\n    <g transform=\"translate(0.25)\">\n      <!-- response time indicators -->\n      @if (config.showExternalPartialCircleProgress) {\n        @if (config.inner?.state === INNER_CIRCLE_STATE.Waiting || config.inner?.state === INNER_CIRCLE_STATE.Unresponsive) {\n          <circle\n            r=\"45\"\n            cx=\"45\"\n            cy=\"45\"\n            [attr.fill]=\"config.inner?.state === INNER_CIRCLE_STATE.Waiting ? 'url(#gradInnerPink)' : 'url(#gradInnerTeal)'\"\n            [attr.mask]=\"'url(#' + innerCircleBehindPathId + ')'\"\n            transform=\"scale(0.659 0.659) translate(+22 21.5) rotate(225, 45, 45)\"\n          />\n        }\n        <circle r=\"45\" cx=\"45\" cy=\"45\" fill=\"url(#grad2)\" [attr.mask]=\"'url(#' + innerCirclePathId + ')'\" transform=\"scale(0.659 0.659) translate(+22 21.5) rotate(225, 45, 45)\" />\n      } @else {\n        @if (config.inner?.state === INNER_CIRCLE_STATE.Waiting || config.inner?.state === INNER_CIRCLE_STATE.Unresponsive) {\n          <circle\n            r=\"45\"\n            cx=\"45\"\n            cy=\"45\"\n            [attr.fill]=\"config.inner?.state === INNER_CIRCLE_STATE.Waiting ? 'url(#gradInnerPink)' : 'url(#gradInnerTeal)'\"\n            [attr.mask]=\"'url(#' + innerCircleBehindPathId + ')'\"\n            transform=\"scale(+0.70 0.70) translate(+20.0 16.5) rotate(225, 45, 45)\"\n          />\n        }\n        <circle r=\"45\" cx=\"45\" cy=\"45\" fill=\"url(#grad2)\" [attr.mask]=\"'url(#' + innerCirclePathId + ')'\" transform=\"scale(+0.70 0.70) translate(+20.0 16.5) rotate(225, 45, 45)\" />\n      }\n      <defs>\n        <mask class=\"circle-progress__mask\" [attr.id]=\"innerCirclePathId\">\n          <g>\n            <path\n              #progressPath\n              d=\"M 45 0 A 45 45 0 1 1 44.9999 0\"\n              stroke=\"white\"\n              stroke-linecap=\"round\"\n              stroke-width=\"5\"\n              [ngStyle]=\"{\n                'stroke-dasharray': progressPath.getTotalLength(),\n                'stroke-dashoffset': progressPath.getTotalLength() - (config.inner?.value * progressPath.getTotalLength()) / config.inner?.max,\n              }\"\n            />\n          </g>\n        </mask>\n        <mask class=\"circle-progress__mask\" [attr.id]=\"innerCircleBehindPathId\">\n          <g>\n            <path d=\"M 45 0 A 45 45 0 1 1 44.9999 0\" stroke=\"white\" stroke-linecap=\"round\" stroke-width=\"5\" />\n          </g>\n        </mask>\n        <radialGradient id=\"grad2\">\n          <stop offset=\"0%\" [attr.stop-color]=\"config.inner?.colors?.tertiary\" />\n          <stop offset=\"80%\" [attr.stop-color]=\"config.inner?.colors?.tertiary\" />\n          <stop offset=\"91%\" [attr.stop-color]=\"config.inner?.colors?.primary\" />\n          <stop offset=\"95%\" [attr.stop-color]=\"config.inner?.colors?.secondary\" />\n          <stop offset=\"100%\" [attr.stop-color]=\"config.inner?.colors?.tertiary\" />\n        </radialGradient>\n\n        <radialGradient id=\"gradInnerPink\">\n          <stop offset=\"0%\" [attr.stop-color]=\"innerProgressPinkColors?.tertiary\" />\n          <stop offset=\"80%\" [attr.stop-color]=\"innerProgressPinkColors?.tertiary\" />\n          <stop offset=\"91%\" [attr.stop-color]=\"innerProgressPinkColors?.primary\" />\n          <stop offset=\"95%\" [attr.stop-color]=\"innerProgressPinkColors?.secondary\" />\n          <stop offset=\"100%\" [attr.stop-color]=\"innerProgressPinkColors?.tertiary\" />\n        </radialGradient>\n\n        <radialGradient id=\"gradInnerTeal\">\n          <stop offset=\"0%\" [attr.stop-color]=\"innerProgressTealColors?.tertiary\" />\n          <stop offset=\"80%\" [attr.stop-color]=\"innerProgressTealColors?.tertiary\" />\n          <stop offset=\"91%\" [attr.stop-color]=\"innerProgressTealColors?.primary\" />\n          <stop offset=\"95%\" [attr.stop-color]=\"innerProgressTealColors?.secondary\" />\n          <stop offset=\"100%\" [attr.stop-color]=\"innerProgressTealColors?.tertiary\" />\n        </radialGradient>\n      </defs>\n    </g>\n    @if (config.showValueProportionLabel) {\n      <text\n        x=\"25\"\n        y=\"70\"\n        text-anchor=\"middle\"\n        dominant-baseline=\"middle\"\n        font-size=\"12\"\n        fill=\"white\"\n        stroke=\"black\"\n        stroke-width=\"3\"\n        stroke-linejoin=\"round\"\n        stroke-linecap=\"round\"\n        paint-order=\"stroke fill\"\n      >\n        {{ (24 * config.inner.value) / config.inner.max | number: '1.0-0' }}\n      </text>\n    }\n    <defs>\n      <mask id=\"cut-circle\">\n        <rect x=\"0\" y=\"0\" width=\"90\" height=\"90\" fill=\"white\" />\n        <circle r=\"27.5\" cx=\"43.5\" cy=\"43.5\" fill=\"black\"></circle>\n      </mask>\n      <pattern id=\"pattern0_239_3673\" patternContentUnits=\"objectBoundingBox\" width=\"1\" height=\"1\">\n        <use xlink:href=\"#image0_239_3673\" transform=\"scale(1)\" />\n      </pattern>\n      <filter id=\"filter0_f_239_3673\" x=\"0.510602\" y=\"0.145909\" width=\"87.6468\" height=\"74.376\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n        <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n        <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\" />\n        <feGaussianBlur stdDeviation=\"4.92705\" result=\"effect1_foregroundBlur_239_3673\" />\n      </filter>\n      <filter id=\"filter1_f_239_3673\" x=\"10.779\" y=\"11.1278\" width=\"65.4831\" height=\"65.4833\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n        <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n        <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\" />\n        <feGaussianBlur stdDeviation=\"2.12309\" result=\"effect1_foregroundBlur_239_3673\" />\n      </filter>\n      <filter id=\"filter2_d_239_3673\" x=\"9.88\" y=\"16.0474\" width=\"68.8873\" height=\"68.8874\" 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 dy=\"6.63108\" />\n        <feGaussianBlur stdDeviation=\"3.31554\" />\n        <feComposite in2=\"hardAlpha\" operator=\"out\" />\n        <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\" />\n        <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_239_3673\" />\n        <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_239_3673\" result=\"shape\" />\n      </filter>\n      <linearGradient id=\"paint0_linear_239_3673\" x1=\"71.4224\" y1=\"13.7746\" x2=\"56.8589\" y2=\"88.1932\" gradientUnits=\"userSpaceOnUse\">\n        <stop offset=\"0.581821\" stop-color=\"#27242C\" />\n        <stop offset=\"1\" stop-color=\"#0C0B0E\" />\n      </linearGradient>\n      <linearGradient id=\"paint1_linear_239_3673\" x1=\"77.0682\" y1=\"5.96974\" x2=\"5.21288\" y2=\"11.5456\" gradientUnits=\"userSpaceOnUse\">\n        <stop [attr.stop-color]=\"config.partialColors?.primary\" />\n        <stop offset=\"1\" [attr.stop-color]=\"config.partialColors?.secondary\" />\n      </linearGradient>\n      <linearGradient id=\"paint2_linear_239_3673\" x1=\"77.068\" y1=\"5.96974\" x2=\"5.2127\" y2=\"11.5456\" gradientUnits=\"userSpaceOnUse\">\n        <stop [attr.stop-color]=\"config.partialColors?.primary\" />\n        <stop offset=\"1\" [attr.stop-color]=\"config.partialColors?.secondary\" />\n      </linearGradient>\n      <linearGradient id=\"paint3_linear_239_3673\" x1=\"77.0682\" y1=\"5.96974\" x2=\"5.21288\" y2=\"11.5456\" gradientUnits=\"userSpaceOnUse\">\n        <stop [attr.stop-color]=\"config.partialColors?.primary\" />\n        <stop offset=\"1\" [attr.stop-color]=\"config.partialColors?.secondary\" />\n      </linearGradient>\n      <radialGradient\n        id=\"paint4_radial_239_3673\"\n        cx=\"0\"\n        cy=\"0\"\n        r=\"1\"\n        gradientUnits=\"userSpaceOnUse\"\n        gradientTransform=\"translate(44.6705 43.9694) rotate(-90) scale(36.3006 37.8505)\"\n      >\n        <stop offset=\"0.629654\" stop-color=\"white\" stop-opacity=\"0\" />\n        <stop offset=\"0.822917\" [attr.stop-color]=\"config.partialColors?.primary\" />\n        <stop offset=\"0.988953\" stop-color=\"white\" stop-opacity=\"0\" />\n      </radialGradient>\n      <linearGradient id=\"paint5_linear_239_3673\" x1=\"70.9798\" y1=\"11.9932\" x2=\"10.7034\" y2=\"16.6706\" gradientUnits=\"userSpaceOnUse\">\n        <stop [attr.stop-color]=\"config.partialColors?.primary\" />\n        <stop offset=\"1\" [attr.stop-color]=\"config.partialColors?.secondary\" />\n      </linearGradient>\n      <radialGradient\n        id=\"paint6_radial_239_3673\"\n        cx=\"0\"\n        cy=\"0\"\n        r=\"1\"\n        gradientUnits=\"userSpaceOnUse\"\n        gradientTransform=\"translate(43.8027 43.8695) rotate(-90) scale(30.451 31.7512)\"\n      >\n        <stop offset=\"0.629654\" stop-color=\"white\" stop-opacity=\"0\" />\n        <stop offset=\"0.822917\" [attr.stop-color]=\"config.partialColors?.primary\" />\n        <stop offset=\"0.988953\" stop-color=\"white\" stop-opacity=\"0\" />\n      </radialGradient>\n      <linearGradient id=\"paint7_linear_239_3673\" x1=\"71.1248\" y1=\"12.7476\" x2=\"12.2928\" y2=\"17.3129\" gradientUnits=\"userSpaceOnUse\">\n        <stop [attr.stop-color]=\"config.inner?.colors?.tertiary\" />\n        <stop offset=\"1\" [attr.stop-color]=\"config.inner?.colors?.secondary\" />\n      </linearGradient>\n      <radialGradient id=\"paint8_radial_239_3673\" cx=\"0\" cy=\"0\" r=\"1\" gradientUnits=\"userSpaceOnUse\" gradientTransform=\"translate(44.599 43.86) rotate(-90) scale(29.7213 30.9903)\">\n        <stop offset=\"0.629654\" stop-color=\"white\" stop-opacity=\"0\" />\n        <stop offset=\"0.880168\" [attr.stop-color]=\"config.inner?.colors?.primary\" />\n        <stop offset=\"0.988953\" stop-color=\"white\" stop-opacity=\"0\" />\n      </radialGradient>\n    </defs>\n  </svg>\n\n  @if (config.showExternalPartialCircleProgress) {\n    <svg class=\"circle-progress__svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 90 90\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <circle r=\"45\" cx=\"45\" cy=\"45\" fill=\"url(#grad)\" [attr.mask]=\"'url(#' + pathId + ')'\" />\n      <defs>\n        <mask class=\"circle-progress__mask\" [attr.id]=\"pathId\">\n          <g>\n            <path\n              #progressPath\n              d=\"M 7.2598244424559155 69.50875657567614 A 45 45 0 1 1 82.74017555754409 69.50875657567614\"\n              stroke=\"white\"\n              stroke-linecap=\"round\"\n              stroke-width=\"8.5\"\n              [ngStyle]=\"{\n                'stroke-dasharray': progressPath.getTotalLength(),\n                'stroke-dashoffset': progressPath.getTotalLength() - (config.value * progressPath.getTotalLength()) / config.max,\n              }\"\n            />\n          </g>\n          <circle r=\"37.5\" cx=\"45\" cy=\"45\" fill=\"black\" />\n        </mask>\n        <radialGradient id=\"grad\">\n          <stop offset=\"0%\" [attr.stop-color]=\"config.partialColors?.gradientPrimary\" />\n          <stop offset=\"80%\" [attr.stop-color]=\"config.partialColors?.gradientPrimary\" />\n          <stop offset=\"90%\" [attr.stop-color]=\"config.partialColors?.gradientSecondary\" />\n          <stop offset=\"100%\" [attr.stop-color]=\"config.partialColors?.gradientPrimary\" />\n        </radialGradient>\n      </defs>\n    </svg>\n  }\n}\n@if (variable === circleVariable.Complete) {\n  <svg\n    class=\"circle-progress-d3__main\"\n    width=\"100%\"\n    height=\"100%\"\n    viewBox=\"-10 -10 90 90\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    [ngStyle]=\"{ display: config.value === 0 ? 'none' : 'block' }\"\n  >\n    <g transform=\"translate(0.3,-0.3)\">\n      <path fill=\"none\" stroke-width=\"1\" stroke=\"transparent\" d=\"M 0 45 A 45 45 0 0 1 45 0\" style=\"transform-origin: center; transform: translate(-1.4px, -0.7px)\"></path>\n    </g>\n  </svg>\n\n  <svg class=\"circle-progress-d3__image\" width=\"100%\" height=\"100%\" viewBox=\"0 0 90 90\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n    <ellipse mask=\"url(#cut-circle)\" cx=\"44.334\" cy=\"44.3024\" rx=\"33.9693\" ry=\"33.6363\" fill=\"url(#paint0_linear_239_3673)\" />\n    <g transform=\"translate(0.3,-0.3)\" opacity=\"1\">\n      <path\n        opacity=\"0.15\"\n        d=\"M 0 45 A 45 45 0 0 1 90 45 M 90 45 A 45 45 0 0 1 0 45\"\n        stroke-width=\"12\"\n        stroke=\"black\"\n        style=\"transform-origin: center; transform: scale(0.69) translate(-1.4px, -0.7px)\"\n      />\n    </g>\n    <defs>\n      <mask id=\"cut-circle\">\n        <rect x=\"0\" y=\"0\" width=\"90\" height=\"90\" fill=\"white\" />\n        <circle r=\"27.5\" cx=\"44.5\" cy=\"44\" fill=\"black\"></circle>\n      </mask>\n    </defs>\n  </svg>\n\n  <svg class=\"circle-progress-d3__svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 90 90\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle\n      r=\"45\"\n      cx=\"45\"\n      cy=\"45\"\n      [attr.mask]=\"'url(#' + pathId + ')'\"\n      [ngStyle]=\"{ fill: config.value === config.max ? config.partialColors?.complete : config.partialColors?.incomplete }\"\n    />\n    <defs>\n      <mask class=\"circle-progress-d3__mask\" [attr.id]=\"pathId\">\n        <g>\n          <path\n            #progressPath\n            d=\"M 45 0 A 45 45 0 1 1 44.9999 0\"\n            stroke=\"white\"\n            stroke-linecap=\"round\"\n            stroke-width=\"12\"\n            [ngStyle]=\"{\n              'stroke-dasharray': progressPath.getTotalLength(),\n              'stroke-dashoffset': progressPath.getTotalLength() - (config.value * progressPath.getTotalLength()) / config.max,\n            }\"\n          />\n        </g>\n      </mask>\n    </defs>\n  </svg>\n}\n", styles: [".pulse{overflow:visible!important}.pulse:before{content:\"\";position:absolute;inset:0;border-radius:50%;animation:pulse-animation 2s infinite}@keyframes pulse-animation{0%{transform:scale(.95);box-shadow:0 0 #fe3c73e3}70%{transform:scale(1);box-shadow:0 0 0 10px #fe3c7300}to{transform:scale(.95);box-shadow:0 0 #fe3c7300}}:host{position:relative;display:flex;width:var(--width);--width: 101px;--font-family: \"Calistoga\", serif;--color-text: #fff;--font-size-percentage: 17px}.label-hours{position:absolute;bottom:3.5em;left:3.5em;font-size:7px;z-index:99}.circle{position:absolute;top:48%;left:50%;height:var(--lib-circle-progress-height, 65%);width:var(--lib-circle-progress-width, 65%);transform:translate(-50%,-50%);background:linear-gradient(180deg,#27242c 61.33%,#0c0b0e 96.43%);border-radius:50%;display:grid;justify-content:center;align-items:center}.circle-text{width:85%;height:85%}.circle-img{display:block;overflow:hidden}.circle .text-container{display:grid}.circle .text-container .percent{text-align:center;color:var(--color-text);font-family:var(--font-family);font-size:var(--font-size-percentage)}.circle .text-container .bottom-text{text-align:center;opacity:.6;color:#ffffff80}.circle img{width:100%;height:100%;object-fit:cover}.circle-progress__image{z-index:5;position:relative}.circle-progress__svg{position:absolute;top:0;transform:scale(.77) translate(-.65%,-1.6%);z-index:5}.circle-progress__mask>g{transform:scale(.92);transform-origin:center center}.circle-progress__mask>g>path{transform-origin:center center}.circle-progress-d3__image{position:relative;z-index:8}.circle-progress-d3__svg{position:absolute;top:0;transform:scale(.77) translate(-.65%,-1.6%);z-index:11}.circle-progress-d3__mask>g{transform:scale(.88);transform-origin:center center}.circle-progress-d3__mask>g>path{transform-origin:center center}.circle-progress-d3__main{position:absolute;top:0;transform:scale(.69) translate(-12.05%,-11.9%);z-index:10}.pulse.illuminated-external{position:absolute;top:10%;left:11.5%;width:75%;height:75%}.pulse.illuminated-internal{position:absolute;top:14%;left:16%;width:67%;height:67%}.notification-icon{position:absolute;top:12.5%;right:12.5%;width:30%;z-index:6}\n"] }]
+            args: [{ selector: 'lib-circle-progress', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<img [ngStyle]=\"{ opacity: config.hasNotification ? 1 : 0 }\" src=\"assets/icons/notification-pop.svg\" class=\"notification-icon\" alt=\"menu btn notification icon\" />\n\n<div class=\"circle\" [ngClass]=\"{ 'circle-img': config.imageUrl, 'circle-text': !config.imageUrl }\">\n  @if (!config.imageUrl) {\n    <div class=\"text-container\">\n      <span class=\"percent f-w-400 f-xl h-160\">{{ config.prefix + config.value + config.suffix }}</span>\n      <span class=\"bottom-text f-w-400 f-xs h-100\">{{ type }}</span>\n    </div>\n  } @else {\n    <img [src]=\"config.imageUrl\" [ngStyle]=\"{ 'object-position': config.imgObjectPosition }\" />\n  }\n</div>\n\n@if (variable === circleVariable.Partial) {\n  <div\n    [ngClass]=\"{\n      pulse: config.inner?.showIllumination,\n      'illuminated-external': showExternalPartialCircleProgress,\n      'illuminated-internal': !showExternalPartialCircleProgress,\n    }\"\n  ></div>\n  <svg class=\"circle-progress__image\" width=\"100%\" height=\"100%\" viewBox=\"0 0 90 90\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n    @if (config.showExternalPartialCircleProgress) {\n      <ellipse mask=\"url(#cut-circle)\" cx=\"44.334\" cy=\"44.3024\" rx=\"33.9693\" ry=\"33.6363\" fill=\"url(#paint0_linear_239_3673)\" transform=\"translate(1 0.5)\" />\n      <ellipse mask=\"url(#cut-circle)\" cx=\"44.334\" cy=\"44.3028\" rx=\"27.2427\" ry=\"26.9757\" fill=\"#27242C\" transform=\"translate(2 0)\" />\n      <ellipse mask=\"url(#cut-circle)\" cx=\"44.334\" cy=\"44.3028\" rx=\"27.2427\" ry=\"26.9757\" fill=\"url(#pattern0_239_3673)\" />\n    }\n    <g transform=\"translate(0.25)\">\n      <!-- response time indicators -->\n      @if (config.showExternalPartialCircleProgress) {\n        @if (config.inner?.state === INNER_CIRCLE_STATE.Waiting || config.inner?.state === INNER_CIRCLE_STATE.Unresponsive) {\n          <circle\n            r=\"45\"\n            cx=\"45\"\n            cy=\"45\"\n            [attr.fill]=\"config.inner?.state === INNER_CIRCLE_STATE.Waiting ? 'url(#gradInnerPink)' : 'url(#gradInnerTeal)'\"\n            [attr.mask]=\"'url(#' + innerCircleBehindPathId + ')'\"\n            transform=\"scale(0.659 0.659) translate(+22 21.5) rotate(225, 45, 45)\"\n          />\n        }\n        <circle r=\"45\" cx=\"45\" cy=\"45\" fill=\"url(#grad2)\" [attr.mask]=\"'url(#' + innerCirclePathId + ')'\" transform=\"scale(0.659 0.659) translate(+22 21.5) rotate(225, 45, 45)\" />\n      } @else {\n        @if (config.inner?.state === INNER_CIRCLE_STATE.Waiting || config.inner?.state === INNER_CIRCLE_STATE.Unresponsive) {\n          <circle\n            r=\"45\"\n            cx=\"45\"\n            cy=\"45\"\n            [attr.fill]=\"config.inner?.state === INNER_CIRCLE_STATE.Waiting ? 'url(#gradInnerPink)' : 'url(#gradInnerTeal)'\"\n            [attr.mask]=\"'url(#' + innerCircleBehindPathId + ')'\"\n            transform=\"scale(+0.70 0.70) translate(+20.0 16.5) rotate(225, 45, 45)\"\n          />\n        }\n        <circle r=\"45\" cx=\"45\" cy=\"45\" fill=\"url(#grad2)\" [attr.mask]=\"'url(#' + innerCirclePathId + ')'\" transform=\"scale(+0.70 0.70) translate(+20.0 16.5) rotate(225, 45, 45)\" />\n      }\n      <defs>\n        <mask class=\"circle-progress__mask\" [attr.id]=\"innerCirclePathId\">\n          <g>\n            <path\n              #progressPath\n              d=\"M 45 0 A 45 45 0 1 1 44.9999 0\"\n              stroke=\"white\"\n              stroke-linecap=\"round\"\n              stroke-width=\"5\"\n              [ngStyle]=\"{\n                'stroke-dasharray': progressPath.getTotalLength(),\n                'stroke-dashoffset': progressPath.getTotalLength() - (config.inner?.value * progressPath.getTotalLength()) / config.inner?.max,\n              }\"\n            />\n          </g>\n        </mask>\n        <mask class=\"circle-progress__mask\" [attr.id]=\"innerCircleBehindPathId\">\n          <g>\n            <path d=\"M 45 0 A 45 45 0 1 1 44.9999 0\" stroke=\"white\" stroke-linecap=\"round\" stroke-width=\"5\" />\n          </g>\n        </mask>\n        <radialGradient id=\"grad2\">\n          <stop offset=\"0%\" [attr.stop-color]=\"config.inner?.colors?.tertiary\" />\n          <stop offset=\"80%\" [attr.stop-color]=\"config.inner?.colors?.tertiary\" />\n          <stop offset=\"91%\" [attr.stop-color]=\"config.inner?.colors?.primary\" />\n          <stop offset=\"95%\" [attr.stop-color]=\"config.inner?.colors?.secondary\" />\n          <stop offset=\"100%\" [attr.stop-color]=\"config.inner?.colors?.tertiary\" />\n        </radialGradient>\n\n        <radialGradient id=\"gradInnerPink\">\n          <stop offset=\"0%\" [attr.stop-color]=\"innerProgressPinkColors?.tertiary\" />\n          <stop offset=\"80%\" [attr.stop-color]=\"innerProgressPinkColors?.tertiary\" />\n          <stop offset=\"91%\" [attr.stop-color]=\"innerProgressPinkColors?.primary\" />\n          <stop offset=\"95%\" [attr.stop-color]=\"innerProgressPinkColors?.secondary\" />\n          <stop offset=\"100%\" [attr.stop-color]=\"innerProgressPinkColors?.tertiary\" />\n        </radialGradient>\n\n        <radialGradient id=\"gradInnerTeal\">\n          <stop offset=\"0%\" [attr.stop-color]=\"innerProgressTealColors?.tertiary\" />\n          <stop offset=\"80%\" [attr.stop-color]=\"innerProgressTealColors?.tertiary\" />\n          <stop offset=\"91%\" [attr.stop-color]=\"innerProgressTealColors?.primary\" />\n          <stop offset=\"95%\" [attr.stop-color]=\"innerProgressTealColors?.secondary\" />\n          <stop offset=\"100%\" [attr.stop-color]=\"innerProgressTealColors?.tertiary\" />\n        </radialGradient>\n      </defs>\n    </g>\n    @if (config.showValueProportionLabel) {\n      <text\n        x=\"25\"\n        y=\"70\"\n        text-anchor=\"middle\"\n        dominant-baseline=\"middle\"\n        font-size=\"12\"\n        fill=\"white\"\n        stroke=\"black\"\n        stroke-width=\"3\"\n        stroke-linejoin=\"round\"\n        stroke-linecap=\"round\"\n        paint-order=\"stroke fill\"\n      >\n        {{ (24 * config.inner.value) / config.inner.max | number: '1.0-0' }}\n      </text>\n    }\n    <defs>\n      <mask id=\"cut-circle\">\n        <rect x=\"0\" y=\"0\" width=\"90\" height=\"90\" fill=\"white\" />\n        <circle r=\"27.5\" cx=\"43.5\" cy=\"43.5\" fill=\"black\"></circle>\n      </mask>\n      <pattern id=\"pattern0_239_3673\" patternContentUnits=\"objectBoundingBox\" width=\"1\" height=\"1\">\n        <use xlink:href=\"#image0_239_3673\" transform=\"scale(1)\" />\n      </pattern>\n      <filter id=\"filter0_f_239_3673\" x=\"0.510602\" y=\"0.145909\" width=\"87.6468\" height=\"74.376\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n        <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n        <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\" />\n        <feGaussianBlur stdDeviation=\"4.92705\" result=\"effect1_foregroundBlur_239_3673\" />\n      </filter>\n      <filter id=\"filter1_f_239_3673\" x=\"10.779\" y=\"11.1278\" width=\"65.4831\" height=\"65.4833\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n        <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n        <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\" />\n        <feGaussianBlur stdDeviation=\"2.12309\" result=\"effect1_foregroundBlur_239_3673\" />\n      </filter>\n      <filter id=\"filter2_d_239_3673\" x=\"9.88\" y=\"16.0474\" width=\"68.8873\" height=\"68.8874\" 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 dy=\"6.63108\" />\n        <feGaussianBlur stdDeviation=\"3.31554\" />\n        <feComposite in2=\"hardAlpha\" operator=\"out\" />\n        <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\" />\n        <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_239_3673\" />\n        <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_239_3673\" result=\"shape\" />\n      </filter>\n      <linearGradient id=\"paint0_linear_239_3673\" x1=\"71.4224\" y1=\"13.7746\" x2=\"56.8589\" y2=\"88.1932\" gradientUnits=\"userSpaceOnUse\">\n        <stop offset=\"0.581821\" stop-color=\"#27242C\" />\n        <stop offset=\"1\" stop-color=\"#0C0B0E\" />\n      </linearGradient>\n      <linearGradient id=\"paint1_linear_239_3673\" x1=\"77.0682\" y1=\"5.96974\" x2=\"5.21288\" y2=\"11.5456\" gradientUnits=\"userSpaceOnUse\">\n        <stop [attr.stop-color]=\"config.partialColors?.primary\" />\n        <stop offset=\"1\" [attr.stop-color]=\"config.partialColors?.secondary\" />\n      </linearGradient>\n      <linearGradient id=\"paint2_linear_239_3673\" x1=\"77.068\" y1=\"5.96974\" x2=\"5.2127\" y2=\"11.5456\" gradientUnits=\"userSpaceOnUse\">\n        <stop [attr.stop-color]=\"config.partialColors?.primary\" />\n        <stop offset=\"1\" [attr.stop-color]=\"config.partialColors?.secondary\" />\n      </linearGradient>\n      <linearGradient id=\"paint3_linear_239_3673\" x1=\"77.0682\" y1=\"5.96974\" x2=\"5.21288\" y2=\"11.5456\" gradientUnits=\"userSpaceOnUse\">\n        <stop [attr.stop-color]=\"config.partialColors?.primary\" />\n        <stop offset=\"1\" [attr.stop-color]=\"config.partialColors?.secondary\" />\n      </linearGradient>\n      <radialGradient\n        id=\"paint4_radial_239_3673\"\n        cx=\"0\"\n        cy=\"0\"\n        r=\"1\"\n        gradientUnits=\"userSpaceOnUse\"\n        gradientTransform=\"translate(44.6705 43.9694) rotate(-90) scale(36.3006 37.8505)\"\n      >\n        <stop offset=\"0.629654\" stop-color=\"white\" stop-opacity=\"0\" />\n        <stop offset=\"0.822917\" [attr.stop-color]=\"config.partialColors?.primary\" />\n        <stop offset=\"0.988953\" stop-color=\"white\" stop-opacity=\"0\" />\n      </radialGradient>\n      <linearGradient id=\"paint5_linear_239_3673\" x1=\"70.9798\" y1=\"11.9932\" x2=\"10.7034\" y2=\"16.6706\" gradientUnits=\"userSpaceOnUse\">\n        <stop [attr.stop-color]=\"config.partialColors?.primary\" />\n        <stop offset=\"1\" [attr.stop-color]=\"config.partialColors?.secondary\" />\n      </linearGradient>\n      <radialGradient\n        id=\"paint6_radial_239_3673\"\n        cx=\"0\"\n        cy=\"0\"\n        r=\"1\"\n        gradientUnits=\"userSpaceOnUse\"\n        gradientTransform=\"translate(43.8027 43.8695) rotate(-90) scale(30.451 31.7512)\"\n      >\n        <stop offset=\"0.629654\" stop-color=\"white\" stop-opacity=\"0\" />\n        <stop offset=\"0.822917\" [attr.stop-color]=\"config.partialColors?.primary\" />\n        <stop offset=\"0.988953\" stop-color=\"white\" stop-opacity=\"0\" />\n      </radialGradient>\n      <linearGradient id=\"paint7_linear_239_3673\" x1=\"71.1248\" y1=\"12.7476\" x2=\"12.2928\" y2=\"17.3129\" gradientUnits=\"userSpaceOnUse\">\n        <stop [attr.stop-color]=\"config.inner?.colors?.tertiary\" />\n        <stop offset=\"1\" [attr.stop-color]=\"config.inner?.colors?.secondary\" />\n      </linearGradient>\n      <radialGradient id=\"paint8_radial_239_3673\" cx=\"0\" cy=\"0\" r=\"1\" gradientUnits=\"userSpaceOnUse\" gradientTransform=\"translate(44.599 43.86) rotate(-90) scale(29.7213 30.9903)\">\n        <stop offset=\"0.629654\" stop-color=\"white\" stop-opacity=\"0\" />\n        <stop offset=\"0.880168\" [attr.stop-color]=\"config.inner?.colors?.primary\" />\n        <stop offset=\"0.988953\" stop-color=\"white\" stop-opacity=\"0\" />\n      </radialGradient>\n    </defs>\n  </svg>\n\n  @if (config.showExternalPartialCircleProgress) {\n    <svg class=\"circle-progress__svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 90 90\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <circle r=\"45\" cx=\"45\" cy=\"45\" fill=\"url(#grad)\" [attr.mask]=\"'url(#' + pathId + ')'\" />\n      <defs>\n        <mask class=\"circle-progress__mask\" [attr.id]=\"pathId\">\n          <g>\n            <path\n              #progressPath\n              d=\"M 7.2598244424559155 69.50875657567614 A 45 45 0 1 1 82.74017555754409 69.50875657567614\"\n              stroke=\"white\"\n              stroke-linecap=\"round\"\n              stroke-width=\"8.5\"\n              [ngStyle]=\"{\n                'stroke-dasharray': progressPath.getTotalLength(),\n                'stroke-dashoffset': progressPath.getTotalLength() - (config.value * progressPath.getTotalLength()) / config.max,\n              }\"\n            />\n          </g>\n          <circle r=\"37.5\" cx=\"45\" cy=\"45\" fill=\"black\" />\n        </mask>\n        <radialGradient id=\"grad\">\n          <stop offset=\"0%\" [attr.stop-color]=\"config.partialColors?.gradientPrimary\" />\n          <stop offset=\"80%\" [attr.stop-color]=\"config.partialColors?.gradientPrimary\" />\n          <stop offset=\"90%\" [attr.stop-color]=\"config.partialColors?.gradientSecondary\" />\n          <stop offset=\"100%\" [attr.stop-color]=\"config.partialColors?.gradientPrimary\" />\n        </radialGradient>\n      </defs>\n    </svg>\n  }\n}\n@if (variable === circleVariable.Complete) {\n  <svg\n    class=\"circle-progress-d3__main\"\n    width=\"100%\"\n    height=\"100%\"\n    viewBox=\"-10 -10 90 90\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    [ngStyle]=\"{ display: config.value === 0 ? 'none' : 'block' }\"\n  >\n    <g transform=\"translate(0.3,-0.3)\">\n      <path fill=\"none\" stroke-width=\"1\" stroke=\"transparent\" d=\"M 0 45 A 45 45 0 0 1 45 0\" style=\"transform-origin: center; transform: translate(-1.4px, -0.7px)\"></path>\n    </g>\n  </svg>\n\n  <svg class=\"circle-progress-d3__image\" width=\"100%\" height=\"100%\" viewBox=\"0 0 90 90\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n    <ellipse mask=\"url(#cut-circle)\" cx=\"44.334\" cy=\"44.3024\" rx=\"33.9693\" ry=\"33.6363\" fill=\"url(#paint0_linear_239_3673)\" />\n    <g transform=\"translate(0.3,-0.3)\" opacity=\"1\">\n      <path\n        opacity=\"0.15\"\n        d=\"M 0 45 A 45 45 0 0 1 90 45 M 90 45 A 45 45 0 0 1 0 45\"\n        stroke-width=\"12\"\n        stroke=\"black\"\n        style=\"transform-origin: center; transform: scale(0.69) translate(-1.4px, -0.7px)\"\n      />\n    </g>\n    <defs>\n      <mask id=\"cut-circle\">\n        <rect x=\"0\" y=\"0\" width=\"90\" height=\"90\" fill=\"white\" />\n        <circle r=\"27.5\" cx=\"44.5\" cy=\"44\" fill=\"black\"></circle>\n      </mask>\n    </defs>\n  </svg>\n\n  <svg class=\"circle-progress-d3__svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 90 90\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle\n      r=\"45\"\n      cx=\"45\"\n      cy=\"45\"\n      [attr.mask]=\"'url(#' + pathId + ')'\"\n      [ngStyle]=\"{ fill: config.value === config.max ? config.partialColors?.complete : config.partialColors?.incomplete }\"\n    />\n    <defs>\n      <mask class=\"circle-progress-d3__mask\" [attr.id]=\"pathId\">\n        <g>\n          <path\n            #progressPath\n            d=\"M 45 0 A 45 45 0 1 1 44.9999 0\"\n            stroke=\"white\"\n            stroke-linecap=\"round\"\n            stroke-width=\"12\"\n            [ngStyle]=\"{\n              'stroke-dasharray': progressPath.getTotalLength(),\n              'stroke-dashoffset': progressPath.getTotalLength() - (config.value * progressPath.getTotalLength()) / config.max,\n            }\"\n          />\n        </g>\n      </mask>\n    </defs>\n  </svg>\n}\n", styles: [".pulse{overflow:visible!important}.pulse:before{content:\"\";position:absolute;inset:0;border-radius:50%;animation:pulse-animation 2s infinite}@keyframes pulse-animation{0%{transform:scale(.95);box-shadow:0 0 #fe3c73e3}70%{transform:scale(1);box-shadow:0 0 0 10px #fe3c7300}to{transform:scale(.95);box-shadow:0 0 #fe3c7300}}:host{position:relative;display:flex;width:var(--width);--width: 101px;--font-family: \"Calistoga\", serif;--color-text: #fff;--font-size-percentage: 17px}.label-hours{position:absolute;bottom:3.5em;left:3.5em;font-size:7px;z-index:99}.circle{position:absolute;top:48%;left:50%;height:var(--lib-circle-progress-height, 65%);width:var(--lib-circle-progress-width, 65%);transform:translate(-50%,-50%);background:linear-gradient(180deg,#27242c 61.33%,#0c0b0e 96.43%);border-radius:50%;display:grid;justify-content:center;align-items:center}.circle-text{width:85%;height:85%}.circle-img{display:block;overflow:hidden}.circle .text-container{display:grid}.circle .text-container .percent{text-align:center;color:var(--color-text);font-family:var(--font-family);font-size:var(--font-size-percentage)}.circle .text-container .bottom-text{text-align:center;opacity:.6;color:#ffffff80}.circle img{width:100%;height:100%;object-fit:cover}.circle-progress__image{z-index:5;position:relative}.circle-progress__svg{position:absolute;top:0;transform:scale(.77) translate(-.65%,-1.6%);z-index:5}.circle-progress__mask>g{transform:scale(.92);transform-origin:center center}.circle-progress__mask>g>path{transform-origin:center center}.circle-progress-d3__image{position:relative;z-index:8}.circle-progress-d3__svg{position:absolute;top:0;transform:scale(.77) translate(-.65%,-1.6%);z-index:11}.circle-progress-d3__mask>g{transform:scale(.88);transform-origin:center center}.circle-progress-d3__mask>g>path{transform-origin:center center}.circle-progress-d3__main{position:absolute;top:0;transform:scale(.69) translate(-12.05%,-11.9%);z-index:10}.pulse.illuminated-external{position:absolute;top:10%;left:11.5%;width:75%;height:75%}.pulse.illuminated-internal{position:absolute;top:14%;left:16%;width:67%;height:67%}.notification-icon{position:absolute;top:12.5%;right:12.5%;width:30%;z-index:6}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { variable: [{
                 type: Input
             }], config: [{
@@ -1430,11 +1430,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }] } });
 
 class CircleProgressModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CircleProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: CircleProgressModule, declarations: [CircleProgressComponent], imports: [CommonModule], exports: [CircleProgressComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CircleProgressModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: CircleProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.7", ngImport: i0, type: CircleProgressModule, declarations: [CircleProgressComponent], imports: [CommonModule], exports: [CircleProgressComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: CircleProgressModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CircleProgressModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: CircleProgressModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [CircleProgressComponent],
@@ -1448,12 +1448,12 @@ class ChatSuggestionComponent {
         this.chatSuggestions = [];
         this.suggestClicked = new EventEmitter();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChatSuggestionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ChatSuggestionComponent, isStandalone: true, selector: "lib-chat-suggestion", inputs: { chatSuggestions: "chatSuggestions" }, outputs: { suggestClicked: "suggestClicked" }, ngImport: i0, template: "<div class=\"contentWrapper\">\n  <div class=\"content\">\n    @for (suggestion of chatSuggestions; track suggestion.question; let idx = $index) {\n      <div class=\"contentItem\" (click)=\"suggestClicked?.emit(suggestion?.question)\">\n        <span>{{ idx + 1 }}</span>\n        <div class=\"itemDescription\">{{ suggestion.question }}</div>\n        <div class=\"progress_view\">\n          <lib-circle-progress class=\"circle-progress-suggestion\" variable=\"complete\" [config]=\"{ prefix: '', suffix: '%', value: suggestion.percentage }\"></lib-circle-progress>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{font-size:clamp(0px,3.2dvw,15px);--max-width-container: 27em}:host .contentWrapper{width:var(--max-width-container);padding:1.26em 1.416em;box-sizing:border-box;border-radius:.8772em;background:#28252d;box-shadow:0 0 1em #0003,0 0 1.5em #ffffff1a;font-family:Gilroy-Regular,serif}:host .contentWrapper .content{display:flex;flex-direction:column;gap:1.5em}:host .contentWrapper .content .contentItem{display:flex;justify-content:space-between}:host .contentWrapper .content .contentItem span{color:#a8a8a8;font-size:1.2em;margin-right:1.416em}:host .contentWrapper .content .contentItem .itemDescription{display:flex;width:16.2em;margin-right:.5em;color:#a8a8a8;font-size:1em;line-height:1.4em}:host .contentWrapper .content .contentItem .progress_view{width:min-content}:host .contentWrapper .content .contentItem .progress_view .circle-progress-suggestion{--max-diameter: calc(clamp(0px, 3.2dvw, 15px)*4.9) ;max-width:var(--max-diameter);max-height:var(--max-diameter);box-shadow:none;border-radius:100%;--font-family: \"Gilroy-Medium\", serif;--font-size-percentage: calc(clamp(0px, 3.2dvw, 15px)*.85) ;--color-text: #8d98aa}\n"], dependencies: [{ kind: "ngmodule", type: CircleProgressModule }, { kind: "component", type: CircleProgressComponent, selector: "lib-circle-progress", inputs: ["variable", "config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ChatSuggestionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: ChatSuggestionComponent, isStandalone: true, selector: "lib-chat-suggestion", inputs: { chatSuggestions: "chatSuggestions" }, outputs: { suggestClicked: "suggestClicked" }, ngImport: i0, template: "<div class=\"contentWrapper\">\n  <div class=\"content\">\n    @for (suggestion of chatSuggestions; track suggestion.question; let idx = $index) {\n      <div class=\"contentItem\" (click)=\"suggestClicked?.emit(suggestion?.question)\">\n        <span>{{ idx + 1 }}</span>\n        <div class=\"itemDescription\">{{ suggestion.question }}</div>\n        <div class=\"progress_view\">\n          <lib-circle-progress class=\"circle-progress-suggestion\" variable=\"complete\" [config]=\"{ prefix: '', suffix: '%', value: suggestion.percentage }\"></lib-circle-progress>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{font-size:clamp(0px,3.2dvw,15px);--max-width-container: 27em}:host .contentWrapper{width:var(--max-width-container);padding:1.26em 1.416em;box-sizing:border-box;border-radius:.8772em;background:#28252d;box-shadow:0 0 1em #0003,0 0 1.5em #ffffff1a;font-family:Gilroy-Regular,serif}:host .contentWrapper .content{display:flex;flex-direction:column;gap:1.5em}:host .contentWrapper .content .contentItem{display:flex;justify-content:space-between}:host .contentWrapper .content .contentItem span{color:#a8a8a8;font-size:1.2em;margin-right:1.416em}:host .contentWrapper .content .contentItem .itemDescription{display:flex;width:16.2em;margin-right:.5em;color:#a8a8a8;font-size:1em;line-height:1.4em}:host .contentWrapper .content .contentItem .progress_view{width:min-content}:host .contentWrapper .content .contentItem .progress_view .circle-progress-suggestion{--max-diameter: calc(clamp(0px, 3.2dvw, 15px)*4.9) ;max-width:var(--max-diameter);max-height:var(--max-diameter);box-shadow:none;border-radius:100%;--font-family: \"Gilroy-Medium\", serif;--font-size-percentage: calc(clamp(0px, 3.2dvw, 15px)*.85) ;--color-text: #8d98aa}\n"], dependencies: [{ kind: "ngmodule", type: CircleProgressModule }, { kind: "component", type: CircleProgressComponent, selector: "lib-circle-progress", inputs: ["variable", "config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChatSuggestionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ChatSuggestionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-chat-suggestion', standalone: true, imports: [CircleProgressModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"contentWrapper\">\n  <div class=\"content\">\n    @for (suggestion of chatSuggestions; track suggestion.question; let idx = $index) {\n      <div class=\"contentItem\" (click)=\"suggestClicked?.emit(suggestion?.question)\">\n        <span>{{ idx + 1 }}</span>\n        <div class=\"itemDescription\">{{ suggestion.question }}</div>\n        <div class=\"progress_view\">\n          <lib-circle-progress class=\"circle-progress-suggestion\" variable=\"complete\" [config]=\"{ prefix: '', suffix: '%', value: suggestion.percentage }\"></lib-circle-progress>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{font-size:clamp(0px,3.2dvw,15px);--max-width-container: 27em}:host .contentWrapper{width:var(--max-width-container);padding:1.26em 1.416em;box-sizing:border-box;border-radius:.8772em;background:#28252d;box-shadow:0 0 1em #0003,0 0 1.5em #ffffff1a;font-family:Gilroy-Regular,serif}:host .contentWrapper .content{display:flex;flex-direction:column;gap:1.5em}:host .contentWrapper .content .contentItem{display:flex;justify-content:space-between}:host .contentWrapper .content .contentItem span{color:#a8a8a8;font-size:1.2em;margin-right:1.416em}:host .contentWrapper .content .contentItem .itemDescription{display:flex;width:16.2em;margin-right:.5em;color:#a8a8a8;font-size:1em;line-height:1.4em}:host .contentWrapper .content .contentItem .progress_view{width:min-content}:host .contentWrapper .content .contentItem .progress_view .circle-progress-suggestion{--max-diameter: calc(clamp(0px, 3.2dvw, 15px)*4.9) ;max-width:var(--max-diameter);max-height:var(--max-diameter);box-shadow:none;border-radius:100%;--font-family: \"Gilroy-Medium\", serif;--font-size-percentage: calc(clamp(0px, 3.2dvw, 15px)*.85) ;--color-text: #8d98aa}\n"] }]
+            args: [{ selector: 'lib-chat-suggestion', imports: [CircleProgressModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"contentWrapper\">\n  <div class=\"content\">\n    @for (suggestion of chatSuggestions; track suggestion.question; let idx = $index) {\n      <div class=\"contentItem\" (click)=\"suggestClicked?.emit(suggestion?.question)\">\n        <span>{{ idx + 1 }}</span>\n        <div class=\"itemDescription\">{{ suggestion.question }}</div>\n        <div class=\"progress_view\">\n          <lib-circle-progress class=\"circle-progress-suggestion\" variable=\"complete\" [config]=\"{ prefix: '', suffix: '%', value: suggestion.percentage }\"></lib-circle-progress>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{font-size:clamp(0px,3.2dvw,15px);--max-width-container: 27em}:host .contentWrapper{width:var(--max-width-container);padding:1.26em 1.416em;box-sizing:border-box;border-radius:.8772em;background:#28252d;box-shadow:0 0 1em #0003,0 0 1.5em #ffffff1a;font-family:Gilroy-Regular,serif}:host .contentWrapper .content{display:flex;flex-direction:column;gap:1.5em}:host .contentWrapper .content .contentItem{display:flex;justify-content:space-between}:host .contentWrapper .content .contentItem span{color:#a8a8a8;font-size:1.2em;margin-right:1.416em}:host .contentWrapper .content .contentItem .itemDescription{display:flex;width:16.2em;margin-right:.5em;color:#a8a8a8;font-size:1em;line-height:1.4em}:host .contentWrapper .content .contentItem .progress_view{width:min-content}:host .contentWrapper .content .contentItem .progress_view .circle-progress-suggestion{--max-diameter: calc(clamp(0px, 3.2dvw, 15px)*4.9) ;max-width:var(--max-diameter);max-height:var(--max-diameter);box-shadow:none;border-radius:100%;--font-family: \"Gilroy-Medium\", serif;--font-size-percentage: calc(clamp(0px, 3.2dvw, 15px)*.85) ;--color-text: #8d98aa}\n"] }]
         }], propDecorators: { chatSuggestions: [{
                 type: Input
             }], suggestClicked: [{
@@ -1466,10 +1466,10 @@ var LocalStorageKeys;
 })(LocalStorageKeys || (LocalStorageKeys = {}));
 
 class AbstractCacheService {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AbstractCacheService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AbstractCacheService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: AbstractCacheService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: AbstractCacheService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AbstractCacheService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: AbstractCacheService, decorators: [{
             type: Injectable
         }] });
 
@@ -1520,10 +1520,10 @@ class ChatService {
         });
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChatService, deps: [{ token: AbstractCacheService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChatService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ChatService, deps: [{ token: AbstractCacheService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ChatService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChatService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ChatService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1600,12 +1600,12 @@ class LibMessageModalComponent {
             longPressEnabled: this.toggleLongPress.value,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LibMessageModalComponent, deps: [{ token: i1$2.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: "17.3.12", type: LibMessageModalComponent, 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: LibMessageModalComponent, deps: [{ token: i1$2.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.7", 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: "17.3.12", ngImport: i0, type: LibMessageModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: LibMessageModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-message-modal', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+            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$2.FormBuilder }, { type: i2.PopupModalService }, { type: ChatService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -1659,10 +1659,10 @@ class GifSelectorService {
             (pos !== '' ? '&pos=' + pos : '');
         return this.http.get(url);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GifSelectorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GifSelectorService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: GifSelectorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: GifSelectorService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GifSelectorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: GifSelectorService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1724,12 +1724,12 @@ class GifSelectorComponent {
     onGifClick(url) {
         this.selectGif.emit(url);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GifSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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$2.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: GifSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", 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: "17.3.12", ngImport: i0, type: GifSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: GifSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-gif-selector', standalone: true, imports: [CommonModule, InfiniteScrollModule, FormsModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+            args: [{ selector: 'lib-gif-selector', imports: [CommonModule, InfiniteScrollModule, FormsModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
         }], propDecorators: { selectGif: [{
                 type: Output
             }] } });
@@ -1970,16 +1970,16 @@ class ChatComponent {
             this.documentClickListener = null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ChatComponent, selector: "lib-chat", inputs: { default: "default", responseTime: "responseTime", inputValue: "inputValue", emojiPickerConfig: "emojiPickerConfig", includeGifMessage: "includeGifMessage", includeTime: "includeTime", dateMessages: "dateMessages", maxLength: "maxLength", enableGifPicker: "enableGifPicker", prospectJoinDate: "prospectJoinDate", disabled: "disabled" }, outputs: { sendMessage: "sendMessage", getMessages: "getMessages" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: ChatComponent, isStandalone: false, selector: "lib-chat", inputs: { default: "default", responseTime: "responseTime", inputValue: "inputValue", emojiPickerConfig: "emojiPickerConfig", includeGifMessage: "includeGifMessage", includeTime: "includeTime", dateMessages: "dateMessages", maxLength: "maxLength", enableGifPicker: "enableGifPicker", prospectJoinDate: "prospectJoinDate", disabled: "disabled" }, outputs: { sendMessage: "sendMessage", getMessages: "getMessages" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 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;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$2.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 }); }
+        ], 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: "17.3.12", ngImport: i0, type: ChatComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ChatComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-chat', providers: [
                         {
@@ -1987,7 +1987,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                             useExisting: ChatComponent,
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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;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"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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"] }]
         }], propDecorators: { default: [{
                 type: Input
             }], responseTime: [{
@@ -2042,12 +2042,12 @@ class AlertPopupComponent {
             this.closed.emit(true);
         }, 1000);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AlertPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AlertPopupComponent, 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: AlertPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", 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: "17.3.12", ngImport: i0, type: AlertPopupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: AlertPopupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-alert-popup', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+            args: [{ selector: 'lib-alert-popup', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], description: [{
@@ -2061,23 +2061,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }] } });
 
 class StatusIconComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StatusIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: StatusIconComponent, selector: "lib-status-icon", inputs: { type: "type" }, ngImport: i0, template: "@switch (type) {\r\n  @case ('info') {\r\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        clip-rule=\"evenodd\"\r\n        d=\"M9.9987 19.1315C15.0613 19.1315 19.1654 15.0275 19.1654 9.96487C19.1654 4.90226 15.0613 0.798203 9.9987 0.798203C4.93609 0.798203 0.832031 4.90226 0.832031 9.96487C0.832031 15.0275 4.93609 19.1315 9.9987 19.1315ZM9.9987 5.15237C9.36587 5.15237 8.85287 5.66538 8.85287 6.2982C8.85287 6.93103 9.36587 7.44404 9.9987 7.44404C10.6315 7.44404 11.1445 6.93103 11.1445 6.2982C11.1445 5.66538 10.6315 5.15237 9.9987 5.15237ZM9.9987 9.7357C9.36797 9.7357 8.85287 10.2508 8.85287 10.8815V13.6315C8.85287 14.2623 9.36797 14.7774 9.9987 14.7774C10.6294 14.7774 11.1445 14.2623 11.1445 13.6315V10.8815C11.1445 10.2508 10.6294 9.7357 9.9987 9.7357Z\"\r\n        fill=\"#237FD5\"\r\n      />\r\n    </svg>\r\n  }\r\n\r\n  @case ('warning') {\r\n    <svg width=\"18\" height=\"16\" viewBox=\"0 0 18 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path\r\n        d=\"M2.0975 15.795H15.9025C17.3142 15.795 18.1942 14.2642 17.4883 13.045L10.5858 1.11921C9.88 -0.0999577 8.12 -0.0999577 7.41417 1.11921L0.511666 13.045C-0.194167 14.2642 0.685832 15.795 2.0975 15.795ZM9 9.37838C8.49583 9.37838 8.08333 8.96588 8.08333 8.46171V6.62838C8.08333 6.12421 8.49583 5.71171 9 5.71171C9.50417 5.71171 9.91667 6.12421 9.91667 6.62838V8.46171C9.91667 8.96588 9.50417 9.37838 9 9.37838ZM9.91667 13.045H8.08333V11.2117H9.91667V13.045Z\"\r\n        fill=\"#F29C38\"\r\n      />\r\n    </svg>\r\n  }\r\n\r\n  @case ('error') {\r\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path\r\n        d=\"M10 0.833374C4.94001 0.833374 0.833344 4.94004 0.833344 10C0.833344 15.06 4.94001 19.1667 10 19.1667C15.06 19.1667 19.1667 15.06 19.1667 10C19.1667 4.94004 15.06 0.833374 10 0.833374ZM10 10.9167C9.49584 10.9167 9.08334 10.5042 9.08334 10V6.33337C9.08334 5.82921 9.49584 5.41671 10 5.41671C10.5042 5.41671 10.9167 5.82921 10.9167 6.33337V10C10.9167 10.5042 10.5042 10.9167 10 10.9167ZM10.9167 14.5834H9.08334V12.75H10.9167V14.5834Z\"\r\n        fill=\"#D32F2F\"\r\n      />\r\n    </svg>\r\n  }\r\n\r\n  @case ('success') {\r\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path\r\n        d=\"M10 0.833328C4.94001 0.833328 0.833344 4.93999 0.833344 10C0.833344 15.06 4.94001 19.1667 10 19.1667C15.06 19.1667 19.1667 15.06 19.1667 10C19.1667 4.93999 15.06 0.833328 10 0.833328ZM7.51584 13.9325L4.22501 10.6417C3.86751 10.2842 3.86751 9.70666 4.22501 9.34916C4.58251 8.99166 5.16001 8.99166 5.51751 9.34916L8.16668 11.9892L14.4733 5.6825C14.8308 5.325 15.4083 5.325 15.7658 5.6825C16.1233 6.04 16.1233 6.6175 15.7658 6.97499L8.80834 13.9325C8.46001 14.29 7.87334 14.29 7.51584 13.9325Z\"\r\n        fill=\"#2DB231\"\r\n      />\r\n    </svg>\r\n  }\r\n}\r\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: StatusIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: StatusIconComponent, isStandalone: false, selector: "lib-status-icon", inputs: { type: "type" }, ngImport: i0, template: "@switch (type) {\r\n  @case ('info') {\r\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        clip-rule=\"evenodd\"\r\n        d=\"M9.9987 19.1315C15.0613 19.1315 19.1654 15.0275 19.1654 9.96487C19.1654 4.90226 15.0613 0.798203 9.9987 0.798203C4.93609 0.798203 0.832031 4.90226 0.832031 9.96487C0.832031 15.0275 4.93609 19.1315 9.9987 19.1315ZM9.9987 5.15237C9.36587 5.15237 8.85287 5.66538 8.85287 6.2982C8.85287 6.93103 9.36587 7.44404 9.9987 7.44404C10.6315 7.44404 11.1445 6.93103 11.1445 6.2982C11.1445 5.66538 10.6315 5.15237 9.9987 5.15237ZM9.9987 9.7357C9.36797 9.7357 8.85287 10.2508 8.85287 10.8815V13.6315C8.85287 14.2623 9.36797 14.7774 9.9987 14.7774C10.6294 14.7774 11.1445 14.2623 11.1445 13.6315V10.8815C11.1445 10.2508 10.6294 9.7357 9.9987 9.7357Z\"\r\n        fill=\"#237FD5\"\r\n      />\r\n    </svg>\r\n  }\r\n\r\n  @case ('warning') {\r\n    <svg width=\"18\" height=\"16\" viewBox=\"0 0 18 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path\r\n        d=\"M2.0975 15.795H15.9025C17.3142 15.795 18.1942 14.2642 17.4883 13.045L10.5858 1.11921C9.88 -0.0999577 8.12 -0.0999577 7.41417 1.11921L0.511666 13.045C-0.194167 14.2642 0.685832 15.795 2.0975 15.795ZM9 9.37838C8.49583 9.37838 8.08333 8.96588 8.08333 8.46171V6.62838C8.08333 6.12421 8.49583 5.71171 9 5.71171C9.50417 5.71171 9.91667 6.12421 9.91667 6.62838V8.46171C9.91667 8.96588 9.50417 9.37838 9 9.37838ZM9.91667 13.045H8.08333V11.2117H9.91667V13.045Z\"\r\n        fill=\"#F29C38\"\r\n      />\r\n    </svg>\r\n  }\r\n\r\n  @case ('error') {\r\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path\r\n        d=\"M10 0.833374C4.94001 0.833374 0.833344 4.94004 0.833344 10C0.833344 15.06 4.94001 19.1667 10 19.1667C15.06 19.1667 19.1667 15.06 19.1667 10C19.1667 4.94004 15.06 0.833374 10 0.833374ZM10 10.9167C9.49584 10.9167 9.08334 10.5042 9.08334 10V6.33337C9.08334 5.82921 9.49584 5.41671 10 5.41671C10.5042 5.41671 10.9167 5.82921 10.9167 6.33337V10C10.9167 10.5042 10.5042 10.9167 10 10.9167ZM10.9167 14.5834H9.08334V12.75H10.9167V14.5834Z\"\r\n        fill=\"#D32F2F\"\r\n      />\r\n    </svg>\r\n  }\r\n\r\n  @case ('success') {\r\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path\r\n        d=\"M10 0.833328C4.94001 0.833328 0.833344 4.93999 0.833344 10C0.833344 15.06 4.94001 19.1667 10 19.1667C15.06 19.1667 19.1667 15.06 19.1667 10C19.1667 4.93999 15.06 0.833328 10 0.833328ZM7.51584 13.9325L4.22501 10.6417C3.86751 10.2842 3.86751 9.70666 4.22501 9.34916C4.58251 8.99166 5.16001 8.99166 5.51751 9.34916L8.16668 11.9892L14.4733 5.6825C14.8308 5.325 15.4083 5.325 15.7658 5.6825C16.1233 6.04 16.1233 6.6175 15.7658 6.97499L8.80834 13.9325C8.46001 14.29 7.87334 14.29 7.51584 13.9325Z\"\r\n        fill=\"#2DB231\"\r\n      />\r\n    </svg>\r\n  }\r\n}\r\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StatusIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: StatusIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-status-icon', template: "@switch (type) {\r\n  @case ('info') {\r\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        clip-rule=\"evenodd\"\r\n        d=\"M9.9987 19.1315C15.0613 19.1315 19.1654 15.0275 19.1654 9.96487C19.1654 4.90226 15.0613 0.798203 9.9987 0.798203C4.93609 0.798203 0.832031 4.90226 0.832031 9.96487C0.832031 15.0275 4.93609 19.1315 9.9987 19.1315ZM9.9987 5.15237C9.36587 5.15237 8.85287 5.66538 8.85287 6.2982C8.85287 6.93103 9.36587 7.44404 9.9987 7.44404C10.6315 7.44404 11.1445 6.93103 11.1445 6.2982C11.1445 5.66538 10.6315 5.15237 9.9987 5.15237ZM9.9987 9.7357C9.36797 9.7357 8.85287 10.2508 8.85287 10.8815V13.6315C8.85287 14.2623 9.36797 14.7774 9.9987 14.7774C10.6294 14.7774 11.1445 14.2623 11.1445 13.6315V10.8815C11.1445 10.2508 10.6294 9.7357 9.9987 9.7357Z\"\r\n        fill=\"#237FD5\"\r\n      />\r\n    </svg>\r\n  }\r\n\r\n  @case ('warning') {\r\n    <svg width=\"18\" height=\"16\" viewBox=\"0 0 18 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path\r\n        d=\"M2.0975 15.795H15.9025C17.3142 15.795 18.1942 14.2642 17.4883 13.045L10.5858 1.11921C9.88 -0.0999577 8.12 -0.0999577 7.41417 1.11921L0.511666 13.045C-0.194167 14.2642 0.685832 15.795 2.0975 15.795ZM9 9.37838C8.49583 9.37838 8.08333 8.96588 8.08333 8.46171V6.62838C8.08333 6.12421 8.49583 5.71171 9 5.71171C9.50417 5.71171 9.91667 6.12421 9.91667 6.62838V8.46171C9.91667 8.96588 9.50417 9.37838 9 9.37838ZM9.91667 13.045H8.08333V11.2117H9.91667V13.045Z\"\r\n        fill=\"#F29C38\"\r\n      />\r\n    </svg>\r\n  }\r\n\r\n  @case ('error') {\r\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path\r\n        d=\"M10 0.833374C4.94001 0.833374 0.833344 4.94004 0.833344 10C0.833344 15.06 4.94001 19.1667 10 19.1667C15.06 19.1667 19.1667 15.06 19.1667 10C19.1667 4.94004 15.06 0.833374 10 0.833374ZM10 10.9167C9.49584 10.9167 9.08334 10.5042 9.08334 10V6.33337C9.08334 5.82921 9.49584 5.41671 10 5.41671C10.5042 5.41671 10.9167 5.82921 10.9167 6.33337V10C10.9167 10.5042 10.5042 10.9167 10 10.9167ZM10.9167 14.5834H9.08334V12.75H10.9167V14.5834Z\"\r\n        fill=\"#D32F2F\"\r\n      />\r\n    </svg>\r\n  }\r\n\r\n  @case ('success') {\r\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path\r\n        d=\"M10 0.833328C4.94001 0.833328 0.833344 4.93999 0.833344 10C0.833344 15.06 4.94001 19.1667 10 19.1667C15.06 19.1667 19.1667 15.06 19.1667 10C19.1667 4.93999 15.06 0.833328 10 0.833328ZM7.51584 13.9325L4.22501 10.6417C3.86751 10.2842 3.86751 9.70666 4.22501 9.34916C4.58251 8.99166 5.16001 8.99166 5.51751 9.34916L8.16668 11.9892L14.4733 5.6825C14.8308 5.325 15.4083 5.325 15.7658 5.6825C16.1233 6.04 16.1233 6.6175 15.7658 6.97499L8.80834 13.9325C8.46001 14.29 7.87334 14.29 7.51584 13.9325Z\"\r\n        fill=\"#2DB231\"\r\n      />\r\n    </svg>\r\n  }\r\n}\r\n" }]
+            args: [{ selector: 'lib-status-icon', standalone: false, template: "@switch (type) {\r\n  @case ('info') {\r\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        clip-rule=\"evenodd\"\r\n        d=\"M9.9987 19.1315C15.0613 19.1315 19.1654 15.0275 19.1654 9.96487C19.1654 4.90226 15.0613 0.798203 9.9987 0.798203C4.93609 0.798203 0.832031 4.90226 0.832031 9.96487C0.832031 15.0275 4.93609 19.1315 9.9987 19.1315ZM9.9987 5.15237C9.36587 5.15237 8.85287 5.66538 8.85287 6.2982C8.85287 6.93103 9.36587 7.44404 9.9987 7.44404C10.6315 7.44404 11.1445 6.93103 11.1445 6.2982C11.1445 5.66538 10.6315 5.15237 9.9987 5.15237ZM9.9987 9.7357C9.36797 9.7357 8.85287 10.2508 8.85287 10.8815V13.6315C8.85287 14.2623 9.36797 14.7774 9.9987 14.7774C10.6294 14.7774 11.1445 14.2623 11.1445 13.6315V10.8815C11.1445 10.2508 10.6294 9.7357 9.9987 9.7357Z\"\r\n        fill=\"#237FD5\"\r\n      />\r\n    </svg>\r\n  }\r\n\r\n  @case ('warning') {\r\n    <svg width=\"18\" height=\"16\" viewBox=\"0 0 18 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path\r\n        d=\"M2.0975 15.795H15.9025C17.3142 15.795 18.1942 14.2642 17.4883 13.045L10.5858 1.11921C9.88 -0.0999577 8.12 -0.0999577 7.41417 1.11921L0.511666 13.045C-0.194167 14.2642 0.685832 15.795 2.0975 15.795ZM9 9.37838C8.49583 9.37838 8.08333 8.96588 8.08333 8.46171V6.62838C8.08333 6.12421 8.49583 5.71171 9 5.71171C9.50417 5.71171 9.91667 6.12421 9.91667 6.62838V8.46171C9.91667 8.96588 9.50417 9.37838 9 9.37838ZM9.91667 13.045H8.08333V11.2117H9.91667V13.045Z\"\r\n        fill=\"#F29C38\"\r\n      />\r\n    </svg>\r\n  }\r\n\r\n  @case ('error') {\r\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path\r\n        d=\"M10 0.833374C4.94001 0.833374 0.833344 4.94004 0.833344 10C0.833344 15.06 4.94001 19.1667 10 19.1667C15.06 19.1667 19.1667 15.06 19.1667 10C19.1667 4.94004 15.06 0.833374 10 0.833374ZM10 10.9167C9.49584 10.9167 9.08334 10.5042 9.08334 10V6.33337C9.08334 5.82921 9.49584 5.41671 10 5.41671C10.5042 5.41671 10.9167 5.82921 10.9167 6.33337V10C10.9167 10.5042 10.5042 10.9167 10 10.9167ZM10.9167 14.5834H9.08334V12.75H10.9167V14.5834Z\"\r\n        fill=\"#D32F2F\"\r\n      />\r\n    </svg>\r\n  }\r\n\r\n  @case ('success') {\r\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path\r\n        d=\"M10 0.833328C4.94001 0.833328 0.833344 4.93999 0.833344 10C0.833344 15.06 4.94001 19.1667 10 19.1667C15.06 19.1667 19.1667 15.06 19.1667 10C19.1667 4.93999 15.06 0.833328 10 0.833328ZM7.51584 13.9325L4.22501 10.6417C3.86751 10.2842 3.86751 9.70666 4.22501 9.34916C4.58251 8.99166 5.16001 8.99166 5.51751 9.34916L8.16668 11.9892L14.4733 5.6825C14.8308 5.325 15.4083 5.325 15.7658 5.6825C16.1233 6.04 16.1233 6.6175 15.7658 6.97499L8.80834 13.9325C8.46001 14.29 7.87334 14.29 7.51584 13.9325Z\"\r\n        fill=\"#2DB231\"\r\n      />\r\n    </svg>\r\n  }\r\n}\r\n" }]
         }], propDecorators: { type: [{
                 type: Input,
                 args: [{ required: true }]
             }] } });
 
 class SharedModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: SharedModule, declarations: [StatusIconComponent, AlertPopupComponent, LibMessageModalComponent], imports: [CommonModule, FormFieldModule, ButtonsModule, InputDateFieldModule, InputFieldModule, FormsModule, ReactiveFormsModule, TranslateModule, ToggleModule], exports: [StatusIconComponent, AlertPopupComponent, LibMessageModalComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SharedModule, imports: [CommonModule, FormFieldModule, ButtonsModule, InputDateFieldModule, InputFieldModule, FormsModule, ReactiveFormsModule, TranslateModule, ToggleModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.7", ngImport: i0, type: SharedModule, declarations: [StatusIconComponent, AlertPopupComponent, LibMessageModalComponent], imports: [CommonModule, FormFieldModule, ButtonsModule, InputDateFieldModule, InputFieldModule, FormsModule, ReactiveFormsModule, TranslateModule, ToggleModule], exports: [StatusIconComponent, AlertPopupComponent, LibMessageModalComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: SharedModule, imports: [CommonModule, FormFieldModule, ButtonsModule, InputDateFieldModule, InputFieldModule, FormsModule, ReactiveFormsModule, TranslateModule, ToggleModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SharedModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: SharedModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [StatusIconComponent, AlertPopupComponent, LibMessageModalComponent],
@@ -2103,8 +2103,8 @@ class LibChatComponentModule {
             ],
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LibChatComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: LibChatComponentModule, declarations: [ChatComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: LibChatComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.7", ngImport: i0, type: LibChatComponentModule, declarations: [ChatComponent], imports: [CommonModule,
             ImageCardModule,
             MatInputModule,
             MatSelectModule,
@@ -2117,7 +2117,7 @@ class LibChatComponentModule {
             SharedModule,
             InfiniteScrollModule,
             TranslateModule], exports: [ChatComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LibChatComponentModule, providers: [ChatService], imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: LibChatComponentModule, providers: [ChatService], imports: [CommonModule,
             ImageCardModule,
             MatInputModule,
             MatSelectModule,
@@ -2131,7 +2131,7 @@ class LibChatComponentModule {
             InfiniteScrollModule,
             TranslateModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LibChatComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: LibChatComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ChatComponent],
@@ -2295,10 +2295,10 @@ class ProgressTickerService {
             }));
         }).pipe(shareReplay({ bufferSize: 1, refCount: true }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProgressTickerService, deps: [{ token: TICK_PERIOD_SECONDS }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProgressTickerService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", 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.7", ngImport: i0, type: ProgressTickerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProgressTickerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ProgressTickerService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -2552,12 +2552,12 @@ class LibClientMatchOverviewComponent {
             prefix: '',
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LibClientMatchOverviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", 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: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: CircleProgressModule }, { kind: "component", type: CircleProgressComponent, selector: "lib-circle-progress", inputs: ["variable", "config"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i3.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: LibClientMatchOverviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", 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: "17.3.12", ngImport: i0, type: LibClientMatchOverviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: LibClientMatchOverviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-client-match-overview', encapsulation: ViewEncapsulation.ShadowDom, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, 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"] }]
+            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 }]
@@ -2667,10 +2667,10 @@ class IsStatusIncludedPipe {
         const statusFound = MATCHER_STATUSES.findIndex((stat) => status === stat.value);
         return index < statusFound + 1;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IsStatusIncludedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: IsStatusIncludedPipe, isStandalone: true, name: "isStatusIncluded" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: IsStatusIncludedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.7", ngImport: i0, type: IsStatusIncludedPipe, isStandalone: true, name: "isStatusIncluded" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IsStatusIncludedPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: IsStatusIncludedPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'isStatusIncluded',
@@ -2697,12 +2697,12 @@ class MatcherStatusesComponent {
     handleSendMessage(event) {
         this.sendMessage.emit(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MatcherStatusesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MatcherStatusesComponent, isStandalone: true, selector: "lib-matcher-statuses", inputs: { adsTemplate: "adsTemplate", status: "status", hideStatuses: "hideStatuses", messages: "messages", inputValue: "inputValue", maxLength: "maxLength", responseTime: "responseTime", disabled: "disabled", prospectJoinDate: "prospectJoinDate" }, outputs: { getMessages: "getMessages", sendMessage: "sendMessage" }, ngImport: i0, template: "<div class=\"matcher-statuses-container\" [class.box-shadow-statuses]=\"!hideStatuses\">\n  <div class=\"top-gradient-fade\"></div>\n\n  @if (!hideStatuses) {\n    <div class=\"status-list\">\n      @for (matcherStatus of MATCHER_STATUSES; let idx = $index; track matcherStatus.title) {\n        <lib-bubble-btn class=\"custom-bubble-status\" [title]=\"matcherStatus.title\" [subTitle]=\"matcherStatus.subtitle\" [checked]=\"status | isStatusIncluded: idx\"></lib-bubble-btn>\n      }\n    </div>\n  }\n  <lib-chat\n    class=\"conversation-chat\"\n    (getMessages)=\"handleGetMessages($event)\"\n    (sendMessage)=\"handleSendMessage($event)\"\n    [dateMessages]=\"messages\"\n    [inputValue]=\"inputValue\"\n    [maxLength]=\"maxLength\"\n    [responseTime]=\"responseTime\"\n    [disabled]=\"disabled\"\n    [prospectJoinDate]=\"prospectJoinDate\"\n  >\n  </lib-chat>\n</div>\n", styles: [":host{font-size:clamp(0px,3.2dvw,15px);width:100%}:host .matcher-statuses-container{position:relative;padding:0 1.6em 1.9em;border-radius:13px;box-shadow:inset 3px 2px 20px 2.5px #00000052,inset -2px -2px 8px #ffffff1a}:host .matcher-statuses-container:has(.status-list){padding:0 1.6em 1.9em 2.6em}:host .matcher-statuses-container .status-list{position:absolute;top:.3em;left:.3em;display:flex;flex-direction:column;gap:.32em}:host .matcher-statuses-container .conversation-chat{--height-chat-conversation: 9.5em;--max-width-container: 100%}:host .matcher-statuses-container .top-gradient-fade{position:absolute;top:0;left:0;width:100%;height:40px;background:linear-gradient(180deg,#27242c,transparent);z-index:1;pointer-events:none}:host .box-shadow-statuses{box-shadow:inset 30px 2px 20px 2.5px #00000052,inset -2px -2px 8px #ffffff1a}\n"], dependencies: [{ 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: ButtonsModule }, { kind: "component", type: i2.BubbleBtnComponent, selector: "lib-bubble-btn", inputs: ["title", "subTitle", "hasIcon", "checked", "disabled", "loading$"] }, { kind: "pipe", type: IsStatusIncludedPipe, name: "isStatusIncluded" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MatcherStatusesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: MatcherStatusesComponent, isStandalone: true, selector: "lib-matcher-statuses", inputs: { adsTemplate: "adsTemplate", status: "status", hideStatuses: "hideStatuses", messages: "messages", inputValue: "inputValue", maxLength: "maxLength", responseTime: "responseTime", disabled: "disabled", prospectJoinDate: "prospectJoinDate" }, outputs: { getMessages: "getMessages", sendMessage: "sendMessage" }, ngImport: i0, template: "<div class=\"matcher-statuses-container\" [class.box-shadow-statuses]=\"!hideStatuses\">\n  <div class=\"top-gradient-fade\"></div>\n\n  @if (!hideStatuses) {\n    <div class=\"status-list\">\n      @for (matcherStatus of MATCHER_STATUSES; let idx = $index; track matcherStatus.title) {\n        <lib-bubble-btn class=\"custom-bubble-status\" [title]=\"matcherStatus.title\" [subTitle]=\"matcherStatus.subtitle\" [checked]=\"status | isStatusIncluded: idx\"></lib-bubble-btn>\n      }\n    </div>\n  }\n  <lib-chat\n    class=\"conversation-chat\"\n    (getMessages)=\"handleGetMessages($event)\"\n    (sendMessage)=\"handleSendMessage($event)\"\n    [dateMessages]=\"messages\"\n    [inputValue]=\"inputValue\"\n    [maxLength]=\"maxLength\"\n    [responseTime]=\"responseTime\"\n    [disabled]=\"disabled\"\n    [prospectJoinDate]=\"prospectJoinDate\"\n  >\n  </lib-chat>\n</div>\n", styles: [":host{font-size:clamp(0px,3.2dvw,15px);width:100%}:host .matcher-statuses-container{position:relative;padding:0 1.6em 1.9em;border-radius:13px;box-shadow:inset 3px 2px 20px 2.5px #00000052,inset -2px -2px 8px #ffffff1a}:host .matcher-statuses-container:has(.status-list){padding:0 1.6em 1.9em 2.6em}:host .matcher-statuses-container .status-list{position:absolute;top:.3em;left:.3em;display:flex;flex-direction:column;gap:.32em}:host .matcher-statuses-container .conversation-chat{--height-chat-conversation: 9.5em;--max-width-container: 100%}:host .matcher-statuses-container .top-gradient-fade{position:absolute;top:0;left:0;width:100%;height:40px;background:linear-gradient(180deg,#27242c,transparent);z-index:1;pointer-events:none}:host .box-shadow-statuses{box-shadow:inset 30px 2px 20px 2.5px #00000052,inset -2px -2px 8px #ffffff1a}\n"], dependencies: [{ 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: ButtonsModule }, { kind: "component", type: i2.BubbleBtnComponent, selector: "lib-bubble-btn", inputs: ["title", "subTitle", "hasIcon", "checked", "disabled", "loading$"] }, { kind: "pipe", type: IsStatusIncludedPipe, name: "isStatusIncluded" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MatcherStatusesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MatcherStatusesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-matcher-statuses', standalone: true, imports: [LibChatComponentModule, ButtonsModule, IsStatusIncludedPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"matcher-statuses-container\" [class.box-shadow-statuses]=\"!hideStatuses\">\n  <div class=\"top-gradient-fade\"></div>\n\n  @if (!hideStatuses) {\n    <div class=\"status-list\">\n      @for (matcherStatus of MATCHER_STATUSES; let idx = $index; track matcherStatus.title) {\n        <lib-bubble-btn class=\"custom-bubble-status\" [title]=\"matcherStatus.title\" [subTitle]=\"matcherStatus.subtitle\" [checked]=\"status | isStatusIncluded: idx\"></lib-bubble-btn>\n      }\n    </div>\n  }\n  <lib-chat\n    class=\"conversation-chat\"\n    (getMessages)=\"handleGetMessages($event)\"\n    (sendMessage)=\"handleSendMessage($event)\"\n    [dateMessages]=\"messages\"\n    [inputValue]=\"inputValue\"\n    [maxLength]=\"maxLength\"\n    [responseTime]=\"responseTime\"\n    [disabled]=\"disabled\"\n    [prospectJoinDate]=\"prospectJoinDate\"\n  >\n  </lib-chat>\n</div>\n", styles: [":host{font-size:clamp(0px,3.2dvw,15px);width:100%}:host .matcher-statuses-container{position:relative;padding:0 1.6em 1.9em;border-radius:13px;box-shadow:inset 3px 2px 20px 2.5px #00000052,inset -2px -2px 8px #ffffff1a}:host .matcher-statuses-container:has(.status-list){padding:0 1.6em 1.9em 2.6em}:host .matcher-statuses-container .status-list{position:absolute;top:.3em;left:.3em;display:flex;flex-direction:column;gap:.32em}:host .matcher-statuses-container .conversation-chat{--height-chat-conversation: 9.5em;--max-width-container: 100%}:host .matcher-statuses-container .top-gradient-fade{position:absolute;top:0;left:0;width:100%;height:40px;background:linear-gradient(180deg,#27242c,transparent);z-index:1;pointer-events:none}:host .box-shadow-statuses{box-shadow:inset 30px 2px 20px 2.5px #00000052,inset -2px -2px 8px #ffffff1a}\n"] }]
+            args: [{ selector: 'lib-matcher-statuses', imports: [LibChatComponentModule, ButtonsModule, IsStatusIncludedPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"matcher-statuses-container\" [class.box-shadow-statuses]=\"!hideStatuses\">\n  <div class=\"top-gradient-fade\"></div>\n\n  @if (!hideStatuses) {\n    <div class=\"status-list\">\n      @for (matcherStatus of MATCHER_STATUSES; let idx = $index; track matcherStatus.title) {\n        <lib-bubble-btn class=\"custom-bubble-status\" [title]=\"matcherStatus.title\" [subTitle]=\"matcherStatus.subtitle\" [checked]=\"status | isStatusIncluded: idx\"></lib-bubble-btn>\n      }\n    </div>\n  }\n  <lib-chat\n    class=\"conversation-chat\"\n    (getMessages)=\"handleGetMessages($event)\"\n    (sendMessage)=\"handleSendMessage($event)\"\n    [dateMessages]=\"messages\"\n    [inputValue]=\"inputValue\"\n    [maxLength]=\"maxLength\"\n    [responseTime]=\"responseTime\"\n    [disabled]=\"disabled\"\n    [prospectJoinDate]=\"prospectJoinDate\"\n  >\n  </lib-chat>\n</div>\n", styles: [":host{font-size:clamp(0px,3.2dvw,15px);width:100%}:host .matcher-statuses-container{position:relative;padding:0 1.6em 1.9em;border-radius:13px;box-shadow:inset 3px 2px 20px 2.5px #00000052,inset -2px -2px 8px #ffffff1a}:host .matcher-statuses-container:has(.status-list){padding:0 1.6em 1.9em 2.6em}:host .matcher-statuses-container .status-list{position:absolute;top:.3em;left:.3em;display:flex;flex-direction:column;gap:.32em}:host .matcher-statuses-container .conversation-chat{--height-chat-conversation: 9.5em;--max-width-container: 100%}:host .matcher-statuses-container .top-gradient-fade{position:absolute;top:0;left:0;width:100%;height:40px;background:linear-gradient(180deg,#27242c,transparent);z-index:1;pointer-events:none}:host .box-shadow-statuses{box-shadow:inset 30px 2px 20px 2.5px #00000052,inset -2px -2px 8px #ffffff1a}\n"] }]
         }], propDecorators: { adsTemplate: [{
                 type: Input
             }], status: [{
@@ -2739,14 +2739,15 @@ class InitialsPipe {
             .map((n) => n.substring(0, 2).toUpperCase())
             .join('');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InitialsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: InitialsPipe, name: "initials" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: InitialsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.7", ngImport: i0, type: InitialsPipe, isStandalone: false, name: "initials" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InitialsPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: InitialsPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'initials',
                     pure: true,
+                    standalone: false,
                 }]
         }] });
 
@@ -3235,12 +3236,12 @@ class SpiderChartComponent {
         this.createText(this.svg, allAxis, rScale, MaxValue, angleSlice);
         this.createPolygons(this.svg, datasets, rScale, angleSlice);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SpiderChartComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SpiderChartComponent, isStandalone: true, selector: "lib-spider-chart", inputs: { datasets: "datasets", config: "config", polygon_colors: "polygon_colors", showChartInfo: "showChartInfo" }, viewQueries: [{ propertyName: "d3Chart", first: true, predicate: ["D3Chart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"tooltip\">\n  <lib-alert-popup [title]=\"titleAlertPopup\" [description]=\"descriptionAlertPopup\" [timeState]=\"timeStateAlertPopup\" [number]=\"numberAlertPopup\"></lib-alert-popup>\n</div>\n\n<div class=\"container\">\n  <div class=\"d3-container\">\n    <div class=\"d3-chart\" #D3Chart></div>\n    @if (showChartInfo) {\n      <div class=\"chartInfo\">\n        @if (datasets.length > 0) {\n          <div class=\"datachart\">\n            @for (dataset of datasets; let j = $index; track dataset) {\n              <div class=\"legend-item\">\n                <div [style.border]=\"'5px solid ' + polygon_colors?.[j]?.value\" [style.boxShadow]=\"'0px 0px 12px ' + polygon_colors?.[j]?.value\" class=\"legend-color\"></div>\n                {{ dataset.title }}\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".align-chart{display:flex;justify-content:center;align-items:center}.d3-container{width:100%;position:relative;min-height:300px;display:flex;align-items:center;transition:all .5s ease}.d3-chart{width:100%;height:clamp(300px,30vh,400px);display:flex;justify-content:center;align-items:center;transition:all .5s ease}.chartInfo{margin-top:20px}.datachart{display:flex;flex-wrap:wrap;gap:10px}.legend-item{display:flex;align-items:center;gap:8px;font-size:14px;padding:4px}.legend-color{width:15px;height:15px;border-radius:50%;background-color:#fff}#tooltip{position:absolute;display:none;z-index:1000}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: AlertPopupComponent, selector: "lib-alert-popup", inputs: ["title", "description", "timeState", "number"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: SpiderChartComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: SpiderChartComponent, isStandalone: true, selector: "lib-spider-chart", inputs: { datasets: "datasets", config: "config", polygon_colors: "polygon_colors", showChartInfo: "showChartInfo" }, viewQueries: [{ propertyName: "d3Chart", first: true, predicate: ["D3Chart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"tooltip\">\n  <lib-alert-popup [title]=\"titleAlertPopup\" [description]=\"descriptionAlertPopup\" [timeState]=\"timeStateAlertPopup\" [number]=\"numberAlertPopup\"></lib-alert-popup>\n</div>\n\n<div class=\"container\">\n  <div class=\"d3-container\">\n    <div class=\"d3-chart\" #D3Chart></div>\n    @if (showChartInfo) {\n      <div class=\"chartInfo\">\n        @if (datasets.length > 0) {\n          <div class=\"datachart\">\n            @for (dataset of datasets; let j = $index; track dataset) {\n              <div class=\"legend-item\">\n                <div [style.border]=\"'5px solid ' + polygon_colors?.[j]?.value\" [style.boxShadow]=\"'0px 0px 12px ' + polygon_colors?.[j]?.value\" class=\"legend-color\"></div>\n                {{ dataset.title }}\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".align-chart{display:flex;justify-content:center;align-items:center}.d3-container{width:100%;position:relative;min-height:300px;display:flex;align-items:center;transition:all .5s ease}.d3-chart{width:100%;height:clamp(300px,30vh,400px);display:flex;justify-content:center;align-items:center;transition:all .5s ease}.chartInfo{margin-top:20px}.datachart{display:flex;flex-wrap:wrap;gap:10px}.legend-item{display:flex;align-items:center;gap:8px;font-size:14px;padding:4px}.legend-color{width:15px;height:15px;border-radius:50%;background-color:#fff}#tooltip{position:absolute;display:none;z-index:1000}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: AlertPopupComponent, selector: "lib-alert-popup", inputs: ["title", "description", "timeState", "number"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SpiderChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: SpiderChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-spider-chart', standalone: true, imports: [SharedModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"tooltip\">\n  <lib-alert-popup [title]=\"titleAlertPopup\" [description]=\"descriptionAlertPopup\" [timeState]=\"timeStateAlertPopup\" [number]=\"numberAlertPopup\"></lib-alert-popup>\n</div>\n\n<div class=\"container\">\n  <div class=\"d3-container\">\n    <div class=\"d3-chart\" #D3Chart></div>\n    @if (showChartInfo) {\n      <div class=\"chartInfo\">\n        @if (datasets.length > 0) {\n          <div class=\"datachart\">\n            @for (dataset of datasets; let j = $index; track dataset) {\n              <div class=\"legend-item\">\n                <div [style.border]=\"'5px solid ' + polygon_colors?.[j]?.value\" [style.boxShadow]=\"'0px 0px 12px ' + polygon_colors?.[j]?.value\" class=\"legend-color\"></div>\n                {{ dataset.title }}\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".align-chart{display:flex;justify-content:center;align-items:center}.d3-container{width:100%;position:relative;min-height:300px;display:flex;align-items:center;transition:all .5s ease}.d3-chart{width:100%;height:clamp(300px,30vh,400px);display:flex;justify-content:center;align-items:center;transition:all .5s ease}.chartInfo{margin-top:20px}.datachart{display:flex;flex-wrap:wrap;gap:10px}.legend-item{display:flex;align-items:center;gap:8px;font-size:14px;padding:4px}.legend-color{width:15px;height:15px;border-radius:50%;background-color:#fff}#tooltip{position:absolute;display:none;z-index:1000}\n"] }]
+            args: [{ selector: 'lib-spider-chart', imports: [SharedModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"tooltip\">\n  <lib-alert-popup [title]=\"titleAlertPopup\" [description]=\"descriptionAlertPopup\" [timeState]=\"timeStateAlertPopup\" [number]=\"numberAlertPopup\"></lib-alert-popup>\n</div>\n\n<div class=\"container\">\n  <div class=\"d3-container\">\n    <div class=\"d3-chart\" #D3Chart></div>\n    @if (showChartInfo) {\n      <div class=\"chartInfo\">\n        @if (datasets.length > 0) {\n          <div class=\"datachart\">\n            @for (dataset of datasets; let j = $index; track dataset) {\n              <div class=\"legend-item\">\n                <div [style.border]=\"'5px solid ' + polygon_colors?.[j]?.value\" [style.boxShadow]=\"'0px 0px 12px ' + polygon_colors?.[j]?.value\" class=\"legend-color\"></div>\n                {{ dataset.title }}\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".align-chart{display:flex;justify-content:center;align-items:center}.d3-container{width:100%;position:relative;min-height:300px;display:flex;align-items:center;transition:all .5s ease}.d3-chart{width:100%;height:clamp(300px,30vh,400px);display:flex;justify-content:center;align-items:center;transition:all .5s ease}.chartInfo{margin-top:20px}.datachart{display:flex;flex-wrap:wrap;gap:10px}.legend-item{display:flex;align-items:center;gap:8px;font-size:14px;padding:4px}.legend-color{width:15px;height:15px;border-radius:50%;background-color:#fff}#tooltip{position:absolute;display:none;z-index:1000}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { d3Chart: [{
                 type: ViewChild,
                 args: ['D3Chart']
@@ -3360,12 +3361,12 @@ class LibDashboardSwipeableTabsComponent {
             ref.thumbsSwiperInstance?.update();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LibDashboardSwipeableTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: LibDashboardSwipeableTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", 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: "17.3.12", ngImport: i0, type: LibDashboardSwipeableTabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: LibDashboardSwipeableTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-dashboard-swipeable-tabs', standalone: true, 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"] }]
+            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 }]
@@ -3477,10 +3478,10 @@ class ChatMetaPipe {
             };
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChatMetaPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: ChatMetaPipe, isStandalone: true, name: "chatMeta" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ChatMetaPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.7", ngImport: i0, type: ChatMetaPipe, isStandalone: true, name: "chatMeta" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChatMetaPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ChatMetaPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'chatMeta',
@@ -3508,10 +3509,10 @@ class GetColorByMatcherPipe {
             }
             : defaultColors;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GetColorByMatcherPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: GetColorByMatcherPipe, isStandalone: true, name: "getColorByMatcher" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: GetColorByMatcherPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.7", ngImport: i0, type: GetColorByMatcherPipe, isStandalone: true, name: "getColorByMatcher" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GetColorByMatcherPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: GetColorByMatcherPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'getColorByMatcher',
@@ -3586,12 +3587,12 @@ class LibClientHomeComponent {
     addMessageEmit(event, prospectId, matchRequest) {
         this.addMessage.emit({ message: event, prospectId, matchRequest });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LibClientHomeComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", 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 style=\"display: flex; justify-content: center\">\n      <img class=\"trait-visual\" [src]=\"assetPaths.traitVisual\" />\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}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{max-width:270px;width:100%;height:240px;aspect-ratio:270/240}}\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: "pipe", type: i1.AsyncPipe, name: "async" }, { 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: "pipe", type: GetColorByMatcherPipe, name: "getColorByMatcher" }, { kind: "pipe", type: ChatMetaPipe, name: "chatMeta" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: LibClientHomeComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", 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 style=\"display: flex; justify-content: center\">\n      <img class=\"trait-visual\" [src]=\"assetPaths.traitVisual\" />\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}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{max-width:270px;width:100%;height:240px;aspect-ratio:270/240}}\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: "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: "17.3.12", ngImport: i0, type: LibClientHomeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: LibClientHomeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-client-home', standalone: true, imports: [
+            args: [{ selector: 'lib-client-home', imports: [
                         CommonModule,
                         LibClientMatchOverviewComponent,
                         TranslateModule,
@@ -3684,7 +3685,7 @@ var ClientDashboardTabs;
     ClientDashboardTabs[ClientDashboardTabs["ChatHandoff"] = 2] = "ChatHandoff";
 })(ClientDashboardTabs || (ClientDashboardTabs = {}));
 
-const defaultSpiderConfig$1 = {
+const defaultSpiderConfig = {
     w: 200,
     h: 200,
     levels: 5,
@@ -3769,7 +3770,7 @@ const defaultClientDashboardConfig = {
     clientMatches$: null,
     events: [],
     polygonColors: demoPolygonColors,
-    spiderConfig: defaultSpiderConfig$1,
+    spiderConfig: defaultSpiderConfig,
     schedulers$: null,
     alertStatus: {},
 };
@@ -3900,12 +3901,12 @@ class LibClientDashboardComponent {
     onHandleAppearPopup(field) {
         this.handleAppearPopup.emit(field);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LibClientDashboardComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: LibClientDashboardComponent, isStandalone: true, selector: "lib-client-dashboard", inputs: { config: "config" }, 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\"></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 (click)=\"onClick($event)\" (touchstart)=\"onTouchStart($event)\" [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            <img [width]=\"12\" [height]=\"12\" [src]=\"assetPaths.defaultIcon\" [alt]=\"item?.label + ' icon'\" (click)=\"item.onClickInfo()\" />\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:190px}.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}.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: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: LibChatComponentModule }, { kind: "ngmodule", type: LibAgendaModule }, { kind: "component", type: AgendaComponent, selector: "lib-agenda", inputs: ["adsTemplate", "loading$", "startDate", "endDate", "events"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: LibClientDashboardComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: LibClientDashboardComponent, isStandalone: true, selector: "lib-client-dashboard", inputs: { config: "config" }, 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\"></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 (click)=\"onClick($event)\" (touchstart)=\"onTouchStart($event)\" [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            <img [width]=\"12\" [height]=\"12\" [src]=\"assetPaths.defaultIcon\" [alt]=\"item?.label + ' icon'\" (click)=\"item.onClickInfo()\" />\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:190px}.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}.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", "loading$", "startDate", "endDate", "events"] }, { 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: "17.3.12", ngImport: i0, type: LibClientDashboardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: LibClientDashboardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-client-dashboard', standalone: true, 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\"></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 (click)=\"onClick($event)\" (touchstart)=\"onTouchStart($event)\" [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            <img [width]=\"12\" [height]=\"12\" [src]=\"assetPaths.defaultIcon\" [alt]=\"item?.label + ' icon'\" (click)=\"item.onClickInfo()\" />\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:190px}.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}.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\"></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 (click)=\"onClick($event)\" (touchstart)=\"onTouchStart($event)\" [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            <img [width]=\"12\" [height]=\"12\" [src]=\"assetPaths.defaultIcon\" [alt]=\"item?.label + ' icon'\" (click)=\"item.onClickInfo()\" />\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:190px}.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}.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
             }], addMessage: [{
@@ -3935,10 +3936,10 @@ class UpdateLLMPreferencePipe {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: UpdateLLMPreferencePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: UpdateLLMPreferencePipe, isStandalone: true, name: "updateLLMPreference" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: UpdateLLMPreferencePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.7", ngImport: i0, type: UpdateLLMPreferencePipe, isStandalone: true, name: "updateLLMPreference" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: UpdateLLMPreferencePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: UpdateLLMPreferencePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'updateLLMPreference',
@@ -3963,12 +3964,12 @@ class ProfileCardComponent {
             }
         }, 500);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProfileCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ProfileCardComponent, selector: "lib-profile-card", inputs: { profile: "profile", progressText: "progressText" }, viewQueries: [{ propertyName: "progressBar", first: true, predicate: ["progressBar"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"personal-card ion-activatable\" *ngIf=\"profile\">\n  <div class=\"wihtout-progress\">\n    <div *ngIf=\"profile.notification > 0\" class=\"badge-container\">\n      <div class=\"noti noti-container\"></div>\n      <div class=\"noti noti-circle\"></div>\n      <span class=\"f-calistoga f-w-400 f-sm h-160 f-white\">{{ profile.notification }}</span>\n    </div>\n\n    <img [src]=\"profile.photo\" alt=\"use\" />\n    <div class=\"f-calistoga f-w-600 f-md h-160 f-white\">{{ profile.name }}</div>\n    @if (profile.value) {\n      <span class=\"f-calistoga f-w-400 f-sm h-160 f-gray\">{{ profile.value }}</span>\n    }\n  </div>\n  @if (profile.progress) {\n    <div class=\"progress-bar-container\">\n      <ion-progress-bar #progressBar mode=\"ios\" [value]=\"profile.progress\"></ion-progress-bar>\n      <div [id]=\"'progressBlur' + profile.id\" class=\"progress-blur\"></div>\n      <ion-text class=\"progress-label f-w-400 f-xs h-100 f-white\">\n        {{ profile.progress * 100 + '% ' + progressText }}\n      </ion-text>\n    </div>\n  }\n  <ion-ripple-effect type=\"bounded\"></ion-ripple-effect>\n</div>\n", styles: [":host{--background: #27242c;--box-shadow: 11px 10px 27px 2.5px rgba(17, 16, 20, .65), -5px -5px 16px -3px rgba(203, 199, 209, .25);--border-radius: 8px;--height: 199px;--width: 144px;--notification-background: linear-gradient(94.44deg, #fe3c72 1.26%, #e15561 100%);--notification-width: 35.96px;--notification-height: 35.96px;--notification-border: 1px solid rgba(255, 255, 255, .4);--progress-bar-background: linear-gradient(94.44deg, #863b48 1.26%, #863b48 100%);--progress-color: linear-gradient(94.44deg, #fe3c72 1.26%, #e15561 100%);--progress-blur-color: linear-gradient(94.44deg, #fe3c72 1.26%, #e15561 100%)}.personal-card{position:relative;display:block;margin:5px auto;background:var(--background);box-shadow:var(--box-shadow);border-radius:var(--border-radius);max-width:var(--width);min-width:var(--width);height:var(--height);cursor:pointer}.personal-card .wihtout-progress{max-width:var(--width);max-height:var(--height);padding:13px 12px 10px}.personal-card .wihtout-progress .badge-container{position:absolute;right:0;top:0;display:flex;justify-content:center;align-items:center}.personal-card .wihtout-progress .badge-container .noti{background:var(--notification-background);display:flex;justify-content:center;align-items:center;border-radius:50%}.personal-card .wihtout-progress .badge-container .noti-container{position:absolute;height:var(--notification-width);width:var(--notification-height);top:-5px;right:-5px;filter:blur(5.2641px)}.personal-card .wihtout-progress .badge-container .noti-circle{height:calc(var(--notification-height) - 8.99px);width:calc(var(--notification-width) - 8.99px);z-index:999;border:var(--notification-border);box-sizing:border-box}.personal-card .wihtout-progress .badge-container span{position:absolute;z-index:999}.personal-card .wihtout-progress img{border-radius:8px;width:120px;height:127px;margin-bottom:5px}.personal-card .progress-bar-container{position:relative;margin-top:-6px}.personal-card .progress-label{position:absolute;top:13%;left:30%}ion-progress-bar{border-radius:18px;height:16px;--background: var(--progress-bar-background);--progress-background: var(--progress-color)}ion-progress-bar::part(progress){border-radius:18px}.progress-blur{transform:none;height:16px;position:absolute;background:var(--progress-blur-color);filter:blur(6px);top:0;left:0;max-width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonProgressBar, selector: "ion-progress-bar", inputs: ["buffer", "color", "mode", "reversed", "type", "value"] }, { kind: "component", type: i2$1.IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ProfileCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: ProfileCardComponent, isStandalone: false, selector: "lib-profile-card", inputs: { profile: "profile", progressText: "progressText" }, viewQueries: [{ propertyName: "progressBar", first: true, predicate: ["progressBar"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"personal-card ion-activatable\" *ngIf=\"profile\">\n  <div class=\"wihtout-progress\">\n    <div *ngIf=\"profile.notification > 0\" class=\"badge-container\">\n      <div class=\"noti noti-container\"></div>\n      <div class=\"noti noti-circle\"></div>\n      <span class=\"f-calistoga f-w-400 f-sm h-160 f-white\">{{ profile.notification }}</span>\n    </div>\n\n    <img [src]=\"profile.photo\" alt=\"use\" />\n    <div class=\"f-calistoga f-w-600 f-md h-160 f-white\">{{ profile.name }}</div>\n    @if (profile.value) {\n      <span class=\"f-calistoga f-w-400 f-sm h-160 f-gray\">{{ profile.value }}</span>\n    }\n  </div>\n  @if (profile.progress) {\n    <div class=\"progress-bar-container\">\n      <ion-progress-bar #progressBar mode=\"ios\" [value]=\"profile.progress\"></ion-progress-bar>\n      <div [id]=\"'progressBlur' + profile.id\" class=\"progress-blur\"></div>\n      <ion-text class=\"progress-label f-w-400 f-xs h-100 f-white\">\n        {{ profile.progress * 100 + '% ' + progressText }}\n      </ion-text>\n    </div>\n  }\n  <ion-ripple-effect type=\"bounded\"></ion-ripple-effect>\n</div>\n", styles: [":host{--background: #27242c;--box-shadow: 11px 10px 27px 2.5px rgba(17, 16, 20, .65), -5px -5px 16px -3px rgba(203, 199, 209, .25);--border-radius: 8px;--height: 199px;--width: 144px;--notification-background: linear-gradient(94.44deg, #fe3c72 1.26%, #e15561 100%);--notification-width: 35.96px;--notification-height: 35.96px;--notification-border: 1px solid rgba(255, 255, 255, .4);--progress-bar-background: linear-gradient(94.44deg, #863b48 1.26%, #863b48 100%);--progress-color: linear-gradient(94.44deg, #fe3c72 1.26%, #e15561 100%);--progress-blur-color: linear-gradient(94.44deg, #fe3c72 1.26%, #e15561 100%)}.personal-card{position:relative;display:block;margin:5px auto;background:var(--background);box-shadow:var(--box-shadow);border-radius:var(--border-radius);max-width:var(--width);min-width:var(--width);height:var(--height);cursor:pointer}.personal-card .wihtout-progress{max-width:var(--width);max-height:var(--height);padding:13px 12px 10px}.personal-card .wihtout-progress .badge-container{position:absolute;right:0;top:0;display:flex;justify-content:center;align-items:center}.personal-card .wihtout-progress .badge-container .noti{background:var(--notification-background);display:flex;justify-content:center;align-items:center;border-radius:50%}.personal-card .wihtout-progress .badge-container .noti-container{position:absolute;height:var(--notification-width);width:var(--notification-height);top:-5px;right:-5px;filter:blur(5.2641px)}.personal-card .wihtout-progress .badge-container .noti-circle{height:calc(var(--notification-height) - 8.99px);width:calc(var(--notification-width) - 8.99px);z-index:999;border:var(--notification-border);box-sizing:border-box}.personal-card .wihtout-progress .badge-container span{position:absolute;z-index:999}.personal-card .wihtout-progress img{border-radius:8px;width:120px;height:127px;margin-bottom:5px}.personal-card .progress-bar-container{position:relative;margin-top:-6px}.personal-card .progress-label{position:absolute;top:13%;left:30%}ion-progress-bar{border-radius:18px;height:16px;--background: var(--progress-bar-background);--progress-background: var(--progress-color)}ion-progress-bar::part(progress){border-radius:18px}.progress-blur{transform:none;height:16px;position:absolute;background:var(--progress-blur-color);filter:blur(6px);top:0;left:0;max-width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonProgressBar, selector: "ion-progress-bar", inputs: ["buffer", "color", "mode", "reversed", "type", "value"] }, { kind: "component", type: i2$1.IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProfileCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ProfileCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-profile-card', template: "<div class=\"personal-card ion-activatable\" *ngIf=\"profile\">\n  <div class=\"wihtout-progress\">\n    <div *ngIf=\"profile.notification > 0\" class=\"badge-container\">\n      <div class=\"noti noti-container\"></div>\n      <div class=\"noti noti-circle\"></div>\n      <span class=\"f-calistoga f-w-400 f-sm h-160 f-white\">{{ profile.notification }}</span>\n    </div>\n\n    <img [src]=\"profile.photo\" alt=\"use\" />\n    <div class=\"f-calistoga f-w-600 f-md h-160 f-white\">{{ profile.name }}</div>\n    @if (profile.value) {\n      <span class=\"f-calistoga f-w-400 f-sm h-160 f-gray\">{{ profile.value }}</span>\n    }\n  </div>\n  @if (profile.progress) {\n    <div class=\"progress-bar-container\">\n      <ion-progress-bar #progressBar mode=\"ios\" [value]=\"profile.progress\"></ion-progress-bar>\n      <div [id]=\"'progressBlur' + profile.id\" class=\"progress-blur\"></div>\n      <ion-text class=\"progress-label f-w-400 f-xs h-100 f-white\">\n        {{ profile.progress * 100 + '% ' + progressText }}\n      </ion-text>\n    </div>\n  }\n  <ion-ripple-effect type=\"bounded\"></ion-ripple-effect>\n</div>\n", styles: [":host{--background: #27242c;--box-shadow: 11px 10px 27px 2.5px rgba(17, 16, 20, .65), -5px -5px 16px -3px rgba(203, 199, 209, .25);--border-radius: 8px;--height: 199px;--width: 144px;--notification-background: linear-gradient(94.44deg, #fe3c72 1.26%, #e15561 100%);--notification-width: 35.96px;--notification-height: 35.96px;--notification-border: 1px solid rgba(255, 255, 255, .4);--progress-bar-background: linear-gradient(94.44deg, #863b48 1.26%, #863b48 100%);--progress-color: linear-gradient(94.44deg, #fe3c72 1.26%, #e15561 100%);--progress-blur-color: linear-gradient(94.44deg, #fe3c72 1.26%, #e15561 100%)}.personal-card{position:relative;display:block;margin:5px auto;background:var(--background);box-shadow:var(--box-shadow);border-radius:var(--border-radius);max-width:var(--width);min-width:var(--width);height:var(--height);cursor:pointer}.personal-card .wihtout-progress{max-width:var(--width);max-height:var(--height);padding:13px 12px 10px}.personal-card .wihtout-progress .badge-container{position:absolute;right:0;top:0;display:flex;justify-content:center;align-items:center}.personal-card .wihtout-progress .badge-container .noti{background:var(--notification-background);display:flex;justify-content:center;align-items:center;border-radius:50%}.personal-card .wihtout-progress .badge-container .noti-container{position:absolute;height:var(--notification-width);width:var(--notification-height);top:-5px;right:-5px;filter:blur(5.2641px)}.personal-card .wihtout-progress .badge-container .noti-circle{height:calc(var(--notification-height) - 8.99px);width:calc(var(--notification-width) - 8.99px);z-index:999;border:var(--notification-border);box-sizing:border-box}.personal-card .wihtout-progress .badge-container span{position:absolute;z-index:999}.personal-card .wihtout-progress img{border-radius:8px;width:120px;height:127px;margin-bottom:5px}.personal-card .progress-bar-container{position:relative;margin-top:-6px}.personal-card .progress-label{position:absolute;top:13%;left:30%}ion-progress-bar{border-radius:18px;height:16px;--background: var(--progress-bar-background);--progress-background: var(--progress-color)}ion-progress-bar::part(progress){border-radius:18px}.progress-blur{transform:none;height:16px;position:absolute;background:var(--progress-blur-color);filter:blur(6px);top:0;left:0;max-width:100%}\n"] }]
+            args: [{ selector: 'lib-profile-card', standalone: false, template: "<div class=\"personal-card ion-activatable\" *ngIf=\"profile\">\n  <div class=\"wihtout-progress\">\n    <div *ngIf=\"profile.notification > 0\" class=\"badge-container\">\n      <div class=\"noti noti-container\"></div>\n      <div class=\"noti noti-circle\"></div>\n      <span class=\"f-calistoga f-w-400 f-sm h-160 f-white\">{{ profile.notification }}</span>\n    </div>\n\n    <img [src]=\"profile.photo\" alt=\"use\" />\n    <div class=\"f-calistoga f-w-600 f-md h-160 f-white\">{{ profile.name }}</div>\n    @if (profile.value) {\n      <span class=\"f-calistoga f-w-400 f-sm h-160 f-gray\">{{ profile.value }}</span>\n    }\n  </div>\n  @if (profile.progress) {\n    <div class=\"progress-bar-container\">\n      <ion-progress-bar #progressBar mode=\"ios\" [value]=\"profile.progress\"></ion-progress-bar>\n      <div [id]=\"'progressBlur' + profile.id\" class=\"progress-blur\"></div>\n      <ion-text class=\"progress-label f-w-400 f-xs h-100 f-white\">\n        {{ profile.progress * 100 + '% ' + progressText }}\n      </ion-text>\n    </div>\n  }\n  <ion-ripple-effect type=\"bounded\"></ion-ripple-effect>\n</div>\n", styles: [":host{--background: #27242c;--box-shadow: 11px 10px 27px 2.5px rgba(17, 16, 20, .65), -5px -5px 16px -3px rgba(203, 199, 209, .25);--border-radius: 8px;--height: 199px;--width: 144px;--notification-background: linear-gradient(94.44deg, #fe3c72 1.26%, #e15561 100%);--notification-width: 35.96px;--notification-height: 35.96px;--notification-border: 1px solid rgba(255, 255, 255, .4);--progress-bar-background: linear-gradient(94.44deg, #863b48 1.26%, #863b48 100%);--progress-color: linear-gradient(94.44deg, #fe3c72 1.26%, #e15561 100%);--progress-blur-color: linear-gradient(94.44deg, #fe3c72 1.26%, #e15561 100%)}.personal-card{position:relative;display:block;margin:5px auto;background:var(--background);box-shadow:var(--box-shadow);border-radius:var(--border-radius);max-width:var(--width);min-width:var(--width);height:var(--height);cursor:pointer}.personal-card .wihtout-progress{max-width:var(--width);max-height:var(--height);padding:13px 12px 10px}.personal-card .wihtout-progress .badge-container{position:absolute;right:0;top:0;display:flex;justify-content:center;align-items:center}.personal-card .wihtout-progress .badge-container .noti{background:var(--notification-background);display:flex;justify-content:center;align-items:center;border-radius:50%}.personal-card .wihtout-progress .badge-container .noti-container{position:absolute;height:var(--notification-width);width:var(--notification-height);top:-5px;right:-5px;filter:blur(5.2641px)}.personal-card .wihtout-progress .badge-container .noti-circle{height:calc(var(--notification-height) - 8.99px);width:calc(var(--notification-width) - 8.99px);z-index:999;border:var(--notification-border);box-sizing:border-box}.personal-card .wihtout-progress .badge-container span{position:absolute;z-index:999}.personal-card .wihtout-progress img{border-radius:8px;width:120px;height:127px;margin-bottom:5px}.personal-card .progress-bar-container{position:relative;margin-top:-6px}.personal-card .progress-label{position:absolute;top:13%;left:30%}ion-progress-bar{border-radius:18px;height:16px;--background: var(--progress-bar-background);--progress-background: var(--progress-color)}ion-progress-bar::part(progress){border-radius:18px}.progress-blur{transform:none;height:16px;position:absolute;background:var(--progress-blur-color);filter:blur(6px);top:0;left:0;max-width:100%}\n"] }]
         }], propDecorators: { profile: [{
                 type: Input
             }], progressText: [{
@@ -3979,11 +3980,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }] } });
 
 class ProfileCardModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProfileCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: ProfileCardModule, declarations: [ProfileCardComponent], imports: [CommonModule, IonicModule], exports: [ProfileCardComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProfileCardModule, imports: [CommonModule, IonicModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ProfileCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.7", ngImport: i0, type: ProfileCardModule, declarations: [ProfileCardComponent], imports: [CommonModule, IonicModule], exports: [ProfileCardComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ProfileCardModule, imports: [CommonModule, IonicModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProfileCardModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ProfileCardModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ProfileCardComponent],
@@ -4000,10 +4001,10 @@ class GetProfileWithProgressPipe {
             progress: 10, // TODO: get progress from clientMatch
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GetProfileWithProgressPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: GetProfileWithProgressPipe, isStandalone: true, name: "getProfileWithProgress" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: GetProfileWithProgressPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.7", ngImport: i0, type: GetProfileWithProgressPipe, isStandalone: true, name: "getProfileWithProgress" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GetProfileWithProgressPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: GetProfileWithProgressPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'getProfileWithProgress',
@@ -4089,12 +4090,12 @@ class LibComposeMacherDashComponent {
     suggestClicked(suggest) {
         this.suggest = suggest;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LibComposeMacherDashComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", 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: "pipe", type: i1.AsyncPipe, name: "async" }, { 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: UpdateLLMPreferencePipe, name: "updateLLMPreference" }, { kind: "pipe", type: GetProfileWithProgressPipe, name: "getProfileWithProgress" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: LibComposeMacherDashComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LibComposeMacherDashComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: LibComposeMacherDashComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-compose-matcher-dash', standalone: true, imports: [
+            args: [{ selector: 'lib-compose-matcher-dash', imports: [
                         CommonModule,
                         TranslateModule,
                         LibChatComponentModule,
@@ -4131,23 +4132,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
-const defaultSpiderConfig = {
-    w: 400,
-    h: 400,
-    fullScreen: false,
-    levels: 5,
-    maxValue: 100,
-    labelFactor: 1.25,
-    wrapWidth: 60,
-    opacityArea: 0.35,
-    dotRadius: 4,
-    opacityCircles: 0.1,
-    strokeWidth: 2,
-    color: d3.scaleOrdinal().range(['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7', '#DDA0DD', '#98D8C8', '#F7DC6F']),
-    attributes: [],
-    datasets: [],
-};
-
 class ArraySortPipe {
     transform(array, field, type = 'ASC') {
         if (!Array.isArray(array)) {
@@ -4185,13 +4169,14 @@ class ArraySortPipe {
         }
         return array;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ArraySortPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: ArraySortPipe, name: "sort" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ArraySortPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.7", ngImport: i0, type: ArraySortPipe, isStandalone: false, name: "sort" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ArraySortPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ArraySortPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'sort',
+                    standalone: false,
                 }]
         }] });
 
@@ -4199,14 +4184,15 @@ class CountNonEmptyFieldsPipe {
     transform(records) {
         return Object.values(records).filter(Boolean).length;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CountNonEmptyFieldsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: CountNonEmptyFieldsPipe, name: "countNonEmptyFields" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: CountNonEmptyFieldsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.7", ngImport: i0, type: CountNonEmptyFieldsPipe, isStandalone: false, name: "countNonEmptyFields" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CountNonEmptyFieldsPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: CountNonEmptyFieldsPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'countNonEmptyFields',
                     pure: true,
+                    standalone: false,
                 }]
         }] });
 
@@ -4227,14 +4213,15 @@ class DateLocalizationPipe {
             return null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateLocalizationPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: DateLocalizationPipe, name: "dateLocalization" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DateLocalizationPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.7", ngImport: i0, type: DateLocalizationPipe, isStandalone: false, name: "dateLocalization" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateLocalizationPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DateLocalizationPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'dateLocalization',
                     pure: true,
+                    standalone: false,
                 }]
         }] });
 
@@ -4280,14 +4267,15 @@ class GetDisplayValuePipe {
             return data.en;
         return data.toString();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GetDisplayValuePipe, deps: [{ token: DateLocalizationPipe }, { token: i1.CurrencyPipe }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: GetDisplayValuePipe, name: "getDisplayValue" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: GetDisplayValuePipe, deps: [{ token: DateLocalizationPipe }, { token: i1.CurrencyPipe }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.7", ngImport: i0, type: GetDisplayValuePipe, isStandalone: false, name: "getDisplayValue" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GetDisplayValuePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: GetDisplayValuePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'getDisplayValue',
                     pure: true,
+                    standalone: false,
                 }]
         }], ctorParameters: () => [{ type: DateLocalizationPipe }, { type: i1.CurrencyPipe }] });
 
@@ -4300,14 +4288,15 @@ class GetMultiSelectDisplayTextPipe {
             return '';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GetMultiSelectDisplayTextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: GetMultiSelectDisplayTextPipe, name: "getMultiSelectDisplayText" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: GetMultiSelectDisplayTextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.7", ngImport: i0, type: GetMultiSelectDisplayTextPipe, isStandalone: false, name: "getMultiSelectDisplayText" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GetMultiSelectDisplayTextPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: GetMultiSelectDisplayTextPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'getMultiSelectDisplayText',
                     pure: true,
+                    standalone: false,
                 }]
         }] });
 
@@ -4315,14 +4304,15 @@ class RoundPipe {
     transform(value) {
         return Math.round(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RoundPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: RoundPipe, name: "round" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: RoundPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.7", ngImport: i0, type: RoundPipe, isStandalone: false, name: "round" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RoundPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: RoundPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'round',
                     pure: true,
+                    standalone: false,
                 }]
         }] });