@naniteninja/dashboard-components-lib 2.0.3 → 2.0.4

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

@@ -3810,7 +3810,7 @@ class LibClientHomeComponent {
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibClientHomeComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LibClientHomeComponent, isStandalone: true, selector: "lib-client-home", inputs: { config: "config" }, outputs: { activeIndexChange: "activeIndexChange", addMessage: "addMessage", getMessages: "getMessages", bookEvent: "bookEvent", removeSuggestion: "removeSuggestion", handleAppearPopup: "handleAppearPopup" }, ngImport: i0, template: "<div class=\"client-home\">\n  @if (components.ClientMatchSpiderChart === config?.component) {\n    <lib-spider-chart\n      [datasets]=\"config.spiderConfig?.datasets\"\n      [config]=\"config?.spiderConfig\"\n      [polygon_colors]=\"config?.polygonColors\"\n      [showChartInfo]=\"false\"\n    ></lib-spider-chart>\n  } @else if (components.ClientMatchTraitChart === config?.component) {\n    <div class=\"trait-visual-container\">\n      <tv-trait-visual [nodeData]=\"traitVisualNodes\" [attributeWeights]=\"traitVisualAttrWeights\" [preferenceWeights]=\"traitVisualPrefWeights\"></tv-trait-visual>\n    </div>\n  }\n\n  <lib-dashboard-swipeable-tabs\n    [activeIndex]=\"config?.activeIndex\"\n    [slideContentMaxHeight]=\"config?.slideContentMaxHeight\"\n    [thumbsSwiperOptions]=\"{\n      virtual: {\n        enabled: clientMatches?.length > 5,\n        addSlidesAfter: 8,\n        addSlidesBefore: 8,\n        cache: true,\n      },\n      slidesPerView: 'auto',\n      grabCursor: true,\n      centeredSlides: false,\n      freeMode: {\n        enabled: true,\n        sticky: true,\n      },\n      observer: true,\n      observeParents: true,\n    }\"\n    [mainSwiperOptions]=\"{\n      virtual: {\n        enabled: clientMatches?.length > 5,\n        addSlidesAfter: 2,\n        addSlidesBefore: 2,\n        cache: true,\n      },\n      centeredSlides: true,\n      grabCursor: true,\n      keyboard: { enabled: true, onlyInViewport: false },\n      effect: 'coverflow',\n      spaceBetween: 5,\n      coverflowEffect: {\n        rotate: 0,\n        slideShadows: false,\n        scale: 0.9,\n      },\n      observer: true,\n      observeParents: true,\n    }\"\n    [bottomThumbs]=\"config?.bottomThumbs\"\n    [generalSwiperHeight]=\"'100%'\"\n    [enableMainSwiper]=\"true\"\n    (activeIndexChange)=\"onActiveIndexChange($event)\"\n    *ngIf=\"(config?.loading$ | async) !== true || config?.default; else empty\"\n  >\n    <ng-container thumb-slides>\n      @if (config.default || !clientMatches?.length) {\n        @for (match of defaultNumberOfItems; let i = $index; track match) {\n          <swiper-slide>\n            <lib-client-match-overview\n              [overview]=\"{}\"\n              [expand]=\"0\"\n              [class.lib-client-match-overview-expand]=\"true\"\n              (click)=\"(null)\"\n              [partialColors]=\"null\"\n              [default]=\"config.default\"\n              [showValueProportionLabel]=\"false\"\n              [hideProgressBar]=\"false\"\n            ></lib-client-match-overview>\n          </swiper-slide>\n        }\n      } @else {\n        @for (match of clientMatches; let i = $index; track match._id) {\n          <swiper-slide>\n            @if (config?.chatAdsTemplate && i === 0) {\n              <ng-container *ngTemplateOutlet=\"config?.chatAdsTemplate\"></ng-container>\n            }\n            <lib-client-match-overview\n              [overview]=\"match\"\n              [expand]=\"config?.activeIndex === i\"\n              [class.lib-client-match-overview-expand]=\"config?.activeIndex === i\"\n              [partialColors]=\"match | getColorByMatcher: config\"\n              [loading]=\"config?.loading?.clientMatches\"\n              [showValueProportionLabel]=\"config?.showValueProportionLabel\"\n              [hideProgressBar]=\"config?.hideProgressBar\"\n              [meta]=\"config?.clientMatches$ | chatMeta: match._id | async\"\n            ></lib-client-match-overview>\n          </swiper-slide>\n        }\n      }\n    </ng-container>\n    <ng-container main-slides>\n      @switch (config?.component) {\n        @case (components.ChatScheduler) {\n          @if (config.default || !(config?.schedulers$ | async)?.length) {\n            @for (item of defaultNumberOfItems; track $index) {\n              <swiper-slide class=\"scheduler\">\n                <div class=\"slide-content without-shadow\">\n                  <lib-scheduler [loading$]=\"config?.loading$\" [default]=\"config.default\" [adsTemplate]=\"config?.schedulerAdsTemplate\" style=\"width: 100%\"></lib-scheduler>\n                </div>\n              </swiper-slide>\n            }\n          } @else {\n            @for (scheduler of config?.schedulers$ | async; let i = $index; track scheduler) {\n              <swiper-slide class=\"scheduler\">\n                <div class=\"slide-content without-shadow\">\n                  <lib-scheduler\n                    [adsTemplate]=\"config?.schedulerAdsTemplate\"\n                    [events$]=\"scheduler.events$\"\n                    [loading$]=\"config?.loading$\"\n                    (bookEvent)=\"bookEvent.emit($event, scheduler.matchRequest)\"\n                    (removeSuggestion)=\"removeSuggestion.emit($event)\"\n                  ></lib-scheduler>\n                </div>\n              </swiper-slide>\n            }\n          }\n        }\n        @case (components.ChatHandoff) {\n          @if (config.default || !(config?.clientMatches$ | async)?.length) {\n            @for (chat of defaultNumberOfItems; let i = $index; track chat) {\n              <swiper-slide class=\"chat\">\n                <lib-matcher-statuses\n                  [inputValue]=\"config.chatInputValue\"\n                  [messages]=\"chat?.messages || []\"\n                  (sendMessage)=\"addMessageEmit($event, chat.prospectId, {})\"\n                  (getMessages)=\"getMessages.emit()\"\n                  [maxLength]=\"maxLength\"\n                  [responseTime]=\"chat?.prospectResponseTime || ''\"\n                  [hideStatuses]=\"config.hideStatuses\"\n                ></lib-matcher-statuses>\n              </swiper-slide>\n            }\n          } @else {\n            @for (clientMatch of config?.clientMatches$ | async; let i = $index; track clientMatch?.prospectData?.prospectId ?? $index) {\n              <swiper-slide class=\"chat\">\n                <div class=\"slide-content\">\n                  <lib-matcher-statuses\n                    [status]=\"clientMatch.prospectData.status\"\n                    [adsTemplate]=\"config?.chatTabAdsTemplate\"\n                    [inputValue]=\"config.chatInputValue\"\n                    [messages]=\"clientMatch.prospectData?.messages || []\"\n                    [includeTime]=\"config?.includeTime\"\n                    [includeGifMessage]=\"config?.includeGifMessage\"\n                    (getMessages)=\"getMessages.emit()\"\n                    [maxLength]=\"config?.maxLength\"\n                    [responseTime]=\"clientMatch.prospectData.prospectResponseTime\"\n                    (sendMessage)=\"addMessageEmit($event, clientMatch?.prospectData?.prospectId, clientMatch?.matchRequest)\"\n                    [hideStatuses]=\"config.hideStatuses\"\n                    [prospectJoinDate]=\"clientMatch.prospectData.prospectJoinDate\"\n                  ></lib-matcher-statuses>\n                </div>\n              </swiper-slide>\n            }\n          }\n        }\n      }\n    </ng-container>\n  </lib-dashboard-swipeable-tabs>\n\n  <ng-template #empty>\n    <lib-section-separator></lib-section-separator>\n    <div class=\"messsage f-lg f-gilroy-regular\">{{ emptyMessage }}</div>\n  </ng-template>\n</div>\n", styles: [":host{--match-percentage-font-size: 1.5em;--container-sides-shadow-width: 15px;--match-percentage-value-height: 3em;position:relative}.messsage{margin-bottom:40px}.padding-20{padding:20px!important}.client-home{height:100%}swiper-slide{display:flex;overflow:hidden;position:relative;align-items:center;min-height:120px}swiper-slide.chat.swiper-slide-next,swiper-slide.chat.swiper-slide-prev{opacity:.5}swiper-slide.chat.swiper-slide-next:before,swiper-slide.chat.swiper-slide-prev:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:gray;opacity:.4;border-radius:10px}lib-client-match-overview{cursor:pointer}lib-client-match-overview:not(.lib-client-match-overview-expand){--lib-circle-progress-height: 65%;--lib-circle-progress-width: 65%;--primary-profile-height: 7em;--primary-profile-width: 7em;margin:auto 6px}lib-client-match-overview.lib-client-match-overview-expand{--primary-profile-height: 11em;--primary-profile-width: 11em;--secondary-profile-height: 3em;--secondary-profile-width: 3em}.slide-content{height:auto;width:100%;position:relative;display:block;overflow:visible;padding:0 5px}.slide-content:not(.without-shadow){border-radius:10px;box-shadow:5.70371px 5.70371px 11.40741px #00000052 inset,-3.42222px -3.42222px 4.56296px #ffffff1a inset}.slide-content:has(lib-chat){padding:0}.slide-content lib-chat{--max-width-container: 100%}.slide-content .status-list{position:absolute;top:.9em;left:.5em;display:flex;flex-direction:column;gap:.32em}lib-client-match-overview{--secondary-profile-margin: 0 0 0 -5px}@media (min-width: 350px){.left-side{left:0!important}}@media (max-width: 768px){swiper-slide{min-height:80px}}@media (max-width: 768px){swiper-slide{min-height:80px}lib-client-match-overview{--secondary-profile-margin: 0 0 0 -5px}.trait-visual-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%;min-height:240px}.trait-visual-container tv-trait-visual{width:100%;height:100%;max-width:270px;max-height:240px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LibClientMatchOverviewComponent, selector: "lib-client-match-overview", inputs: ["overview", "meta", "expand", "loading", "default", "hideProgressBar", "partialColors", "showExternalPartialCircleProgress", "maxValue", "enableChangeOverview"], outputs: ["sendConversationFlag"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: LibDashboardSwipeableTabsComponent, selector: "lib-dashboard-swipeable-tabs", inputs: ["thumbsSwiperOptions", "mainSwiperOptions", "activeIndex", "bottomThumbs", "slideContentMaxHeight", "mainSwiperHeight", "subMainSwiperHeight", "thumbsSwiperHeight", "generalSwiperHeight"], outputs: ["activeIndexChange"] }, { kind: "ngmodule", type: LibChatComponentModule }, { kind: "component", type: LibSchedulerComponent, selector: "lib-scheduler", inputs: ["adsTemplate", "loading$", "emptyMessage", "displayBookedStatuses", "displayEmptyDays", "events$", "startDate", "endDate", "default"], outputs: ["bookEvent", "removeSuggestion"] }, { kind: "component", type: SpiderChartComponent, selector: "lib-spider-chart", inputs: ["datasets", "config", "polygon_colors", "showChartInfo"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: MatcherStatusesComponent, selector: "lib-matcher-statuses", inputs: ["adsTemplate", "status", "hideStatuses", "messages", "inputValue", "maxLength", "responseTime", "disabled", "prospectJoinDate"], outputs: ["getMessages", "sendMessage"] }, { kind: "component", type: TraitVisualComponent, selector: "tv-trait-visual", inputs: ["nodeData", "attributeWeights", "preferenceWeights", "attributeCount", "preferenceCount"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: GetColorByMatcherPipe, name: "getColorByMatcher" }, { kind: "pipe", type: ChatMetaPipe, name: "chatMeta" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LibClientHomeComponent, isStandalone: true, selector: "lib-client-home", inputs: { config: "config" }, outputs: { activeIndexChange: "activeIndexChange", addMessage: "addMessage", getMessages: "getMessages", bookEvent: "bookEvent", removeSuggestion: "removeSuggestion", handleAppearPopup: "handleAppearPopup" }, ngImport: i0, template: "<div class=\"client-home\">\n  @if (components.ClientMatchSpiderChart === config?.component) {\n    <lib-spider-chart\n      [datasets]=\"config.spiderConfig?.datasets\"\n      [config]=\"config?.spiderConfig\"\n      [polygon_colors]=\"config?.polygonColors\"\n      [showChartInfo]=\"false\"\n    ></lib-spider-chart>\n  } @else if (components.ClientMatchTraitChart === config?.component) {\n    <div class=\"trait-visual-container\">\n      <tv-trait-visual [nodeData]=\"traitVisualNodes\" [attributeWeights]=\"traitVisualAttrWeights\" [preferenceWeights]=\"traitVisualPrefWeights\"></tv-trait-visual>\n    </div>\n  }\n\n  <lib-dashboard-swipeable-tabs\n    [activeIndex]=\"config?.activeIndex\"\n    [slideContentMaxHeight]=\"config?.slideContentMaxHeight\"\n    [thumbsSwiperOptions]=\"{\n      virtual: {\n        enabled: clientMatches?.length > 5,\n        addSlidesAfter: 8,\n        addSlidesBefore: 8,\n        cache: true,\n      },\n      slidesPerView: 'auto',\n      grabCursor: true,\n      centeredSlides: false,\n      freeMode: {\n        enabled: true,\n        sticky: true,\n      },\n      observer: true,\n      observeParents: true,\n    }\"\n    [mainSwiperOptions]=\"{\n      virtual: {\n        enabled: clientMatches?.length > 5,\n        addSlidesAfter: 2,\n        addSlidesBefore: 2,\n        cache: true,\n      },\n      centeredSlides: true,\n      grabCursor: true,\n      keyboard: { enabled: true, onlyInViewport: false },\n      effect: 'coverflow',\n      spaceBetween: 5,\n      coverflowEffect: {\n        rotate: 0,\n        slideShadows: false,\n        scale: 0.9,\n      },\n      observer: true,\n      observeParents: true,\n    }\"\n    [bottomThumbs]=\"config?.bottomThumbs\"\n    [generalSwiperHeight]=\"'100%'\"\n    [enableMainSwiper]=\"true\"\n    (activeIndexChange)=\"onActiveIndexChange($event)\"\n    *ngIf=\"(config?.loading$ | async) !== true || config?.default; else empty\"\n  >\n    <ng-container thumb-slides>\n      @if (config.default || !clientMatches?.length) {\n        @for (match of defaultNumberOfItems; let i = $index; track match) {\n          <swiper-slide>\n            <lib-client-match-overview\n              [overview]=\"{}\"\n              [expand]=\"0\"\n              [class.lib-client-match-overview-expand]=\"true\"\n              (click)=\"(null)\"\n              [partialColors]=\"null\"\n              [default]=\"config.default\"\n              [showValueProportionLabel]=\"false\"\n              [hideProgressBar]=\"false\"\n            ></lib-client-match-overview>\n          </swiper-slide>\n        }\n      } @else {\n        @for (match of clientMatches; let i = $index; track match._id) {\n          <swiper-slide>\n            @if (config?.chatAdsTemplate && i === 0) {\n              <ng-container *ngTemplateOutlet=\"config?.chatAdsTemplate\"></ng-container>\n            }\n            <lib-client-match-overview\n              [overview]=\"match\"\n              [expand]=\"config?.activeIndex === i\"\n              [class.lib-client-match-overview-expand]=\"config?.activeIndex === i\"\n              [partialColors]=\"match | getColorByMatcher: config\"\n              [loading]=\"config?.loading?.clientMatches\"\n              [showValueProportionLabel]=\"config?.showValueProportionLabel\"\n              [hideProgressBar]=\"config?.hideProgressBar\"\n              [meta]=\"config?.clientMatches$ | chatMeta: match._id | async\"\n            ></lib-client-match-overview>\n          </swiper-slide>\n        }\n      }\n    </ng-container>\n    <ng-container main-slides>\n      @switch (config?.component) {\n        @case (components.ChatScheduler) {\n          @if (config.default || !(config?.schedulers$ | async)?.length) {\n            @for (item of defaultNumberOfItems; track $index) {\n              <swiper-slide class=\"scheduler\">\n                <div class=\"slide-content without-shadow\">\n                  <lib-scheduler [loading$]=\"config?.loading$\" [default]=\"config.default\" [adsTemplate]=\"config?.schedulerAdsTemplate\" style=\"width: 100%\"></lib-scheduler>\n                </div>\n              </swiper-slide>\n            }\n          } @else {\n            @for (scheduler of config?.schedulers$ | async; let i = $index; track scheduler) {\n              <swiper-slide class=\"scheduler\">\n                <div class=\"slide-content without-shadow\">\n                  <lib-scheduler\n                    [adsTemplate]=\"config?.schedulerAdsTemplate\"\n                    [events$]=\"scheduler.events$\"\n                    [loading$]=\"config?.loading$\"\n                    (bookEvent)=\"bookEvent.emit($event, scheduler.matchRequest)\"\n                    (removeSuggestion)=\"removeSuggestion.emit($event)\"\n                  ></lib-scheduler>\n                </div>\n              </swiper-slide>\n            }\n          }\n        }\n        @case (components.ChatHandoff) {\n          @if (config.default || !(config?.clientMatches$ | async)?.length) {\n            @for (chat of defaultNumberOfItems; let i = $index; track chat) {\n              <swiper-slide class=\"chat\">\n                <lib-matcher-statuses\n                  [inputValue]=\"config.chatInputValue\"\n                  [messages]=\"chat?.messages || []\"\n                  (sendMessage)=\"addMessageEmit($event, chat.prospectId, {})\"\n                  (getMessages)=\"getMessages.emit()\"\n                  [maxLength]=\"maxLength\"\n                  [responseTime]=\"chat?.prospectResponseTime || ''\"\n                  [hideStatuses]=\"config.hideStatuses\"\n                ></lib-matcher-statuses>\n              </swiper-slide>\n            }\n          } @else {\n            @for (clientMatch of config?.clientMatches$ | async; let i = $index; track clientMatch?.prospectData?.prospectId ?? $index) {\n              <swiper-slide class=\"chat\">\n                <div class=\"slide-content\">\n                  <lib-matcher-statuses\n                    *ngIf=\"clientMatch.prospectData\"\n                    [status]=\"clientMatch.prospectData.status\"\n                    [adsTemplate]=\"config?.chatTabAdsTemplate\"\n                    [inputValue]=\"config.chatInputValue\"\n                    [messages]=\"clientMatch.prospectData?.messages || []\"\n                    [includeTime]=\"config?.includeTime\"\n                    [includeGifMessage]=\"config?.includeGifMessage\"\n                    (getMessages)=\"getMessages.emit()\"\n                    [maxLength]=\"config?.maxLength\"\n                    [responseTime]=\"clientMatch.prospectData.prospectResponseTime\"\n                    (sendMessage)=\"addMessageEmit($event, clientMatch?.prospectData?.prospectId, clientMatch?.matchRequest)\"\n                    [hideStatuses]=\"config.hideStatuses\"\n                    [prospectJoinDate]=\"clientMatch.prospectData.prospectJoinDate\"\n                  ></lib-matcher-statuses>\n                </div>\n              </swiper-slide>\n            }\n          }\n        }\n      }\n    </ng-container>\n  </lib-dashboard-swipeable-tabs>\n\n  <ng-template #empty>\n    <lib-section-separator></lib-section-separator>\n    <div class=\"messsage f-lg f-gilroy-regular\">{{ emptyMessage }}</div>\n  </ng-template>\n</div>\n", styles: [":host{--match-percentage-font-size: 1.5em;--container-sides-shadow-width: 15px;--match-percentage-value-height: 3em;position:relative}.messsage{margin-bottom:40px}.padding-20{padding:20px!important}.client-home{height:100%}swiper-slide{display:flex;overflow:hidden;position:relative;align-items:center;min-height:120px}swiper-slide.chat.swiper-slide-next,swiper-slide.chat.swiper-slide-prev{opacity:.5}swiper-slide.chat.swiper-slide-next:before,swiper-slide.chat.swiper-slide-prev:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:gray;opacity:.4;border-radius:10px}lib-client-match-overview{cursor:pointer}lib-client-match-overview:not(.lib-client-match-overview-expand){--lib-circle-progress-height: 65%;--lib-circle-progress-width: 65%;--primary-profile-height: 7em;--primary-profile-width: 7em;margin:auto 6px}lib-client-match-overview.lib-client-match-overview-expand{--primary-profile-height: 11em;--primary-profile-width: 11em;--secondary-profile-height: 3em;--secondary-profile-width: 3em}.slide-content{height:auto;width:100%;position:relative;display:block;overflow:visible;padding:0 5px}.slide-content:not(.without-shadow){border-radius:10px;box-shadow:5.70371px 5.70371px 11.40741px #00000052 inset,-3.42222px -3.42222px 4.56296px #ffffff1a inset}.slide-content:has(lib-chat){padding:0}.slide-content lib-chat{--max-width-container: 100%}.slide-content .status-list{position:absolute;top:.9em;left:.5em;display:flex;flex-direction:column;gap:.32em}lib-client-match-overview{--secondary-profile-margin: 0 0 0 -5px}@media (min-width: 350px){.left-side{left:0!important}}@media (max-width: 768px){swiper-slide{min-height:80px}}@media (max-width: 768px){swiper-slide{min-height:80px}lib-client-match-overview{--secondary-profile-margin: 0 0 0 -5px}.trait-visual-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%;min-height:240px}.trait-visual-container tv-trait-visual{width:100%;height:100%;max-width:270px;max-height:240px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LibClientMatchOverviewComponent, selector: "lib-client-match-overview", inputs: ["overview", "meta", "expand", "loading", "default", "hideProgressBar", "partialColors", "showExternalPartialCircleProgress", "maxValue", "enableChangeOverview"], outputs: ["sendConversationFlag"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: LibDashboardSwipeableTabsComponent, selector: "lib-dashboard-swipeable-tabs", inputs: ["thumbsSwiperOptions", "mainSwiperOptions", "activeIndex", "bottomThumbs", "slideContentMaxHeight", "mainSwiperHeight", "subMainSwiperHeight", "thumbsSwiperHeight", "generalSwiperHeight"], outputs: ["activeIndexChange"] }, { kind: "ngmodule", type: LibChatComponentModule }, { kind: "component", type: LibSchedulerComponent, selector: "lib-scheduler", inputs: ["adsTemplate", "loading$", "emptyMessage", "displayBookedStatuses", "displayEmptyDays", "events$", "startDate", "endDate", "default"], outputs: ["bookEvent", "removeSuggestion"] }, { kind: "component", type: SpiderChartComponent, selector: "lib-spider-chart", inputs: ["datasets", "config", "polygon_colors", "showChartInfo"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: MatcherStatusesComponent, selector: "lib-matcher-statuses", inputs: ["adsTemplate", "status", "hideStatuses", "messages", "inputValue", "maxLength", "responseTime", "disabled", "prospectJoinDate"], outputs: ["getMessages", "sendMessage"] }, { kind: "component", type: TraitVisualComponent, selector: "tv-trait-visual", inputs: ["nodeData", "attributeWeights", "preferenceWeights", "attributeCount", "preferenceCount"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: GetColorByMatcherPipe, name: "getColorByMatcher" }, { kind: "pipe", type: ChatMetaPipe, name: "chatMeta" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibClientHomeComponent, decorators: [{
             type: Component,
@@ -3828,7 +3828,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                         GetColorByMatcherPipe,
                         ChatMetaPipe,
                         TraitVisualComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"client-home\">\n  @if (components.ClientMatchSpiderChart === config?.component) {\n    <lib-spider-chart\n      [datasets]=\"config.spiderConfig?.datasets\"\n      [config]=\"config?.spiderConfig\"\n      [polygon_colors]=\"config?.polygonColors\"\n      [showChartInfo]=\"false\"\n    ></lib-spider-chart>\n  } @else if (components.ClientMatchTraitChart === config?.component) {\n    <div class=\"trait-visual-container\">\n      <tv-trait-visual [nodeData]=\"traitVisualNodes\" [attributeWeights]=\"traitVisualAttrWeights\" [preferenceWeights]=\"traitVisualPrefWeights\"></tv-trait-visual>\n    </div>\n  }\n\n  <lib-dashboard-swipeable-tabs\n    [activeIndex]=\"config?.activeIndex\"\n    [slideContentMaxHeight]=\"config?.slideContentMaxHeight\"\n    [thumbsSwiperOptions]=\"{\n      virtual: {\n        enabled: clientMatches?.length > 5,\n        addSlidesAfter: 8,\n        addSlidesBefore: 8,\n        cache: true,\n      },\n      slidesPerView: 'auto',\n      grabCursor: true,\n      centeredSlides: false,\n      freeMode: {\n        enabled: true,\n        sticky: true,\n      },\n      observer: true,\n      observeParents: true,\n    }\"\n    [mainSwiperOptions]=\"{\n      virtual: {\n        enabled: clientMatches?.length > 5,\n        addSlidesAfter: 2,\n        addSlidesBefore: 2,\n        cache: true,\n      },\n      centeredSlides: true,\n      grabCursor: true,\n      keyboard: { enabled: true, onlyInViewport: false },\n      effect: 'coverflow',\n      spaceBetween: 5,\n      coverflowEffect: {\n        rotate: 0,\n        slideShadows: false,\n        scale: 0.9,\n      },\n      observer: true,\n      observeParents: true,\n    }\"\n    [bottomThumbs]=\"config?.bottomThumbs\"\n    [generalSwiperHeight]=\"'100%'\"\n    [enableMainSwiper]=\"true\"\n    (activeIndexChange)=\"onActiveIndexChange($event)\"\n    *ngIf=\"(config?.loading$ | async) !== true || config?.default; else empty\"\n  >\n    <ng-container thumb-slides>\n      @if (config.default || !clientMatches?.length) {\n        @for (match of defaultNumberOfItems; let i = $index; track match) {\n          <swiper-slide>\n            <lib-client-match-overview\n              [overview]=\"{}\"\n              [expand]=\"0\"\n              [class.lib-client-match-overview-expand]=\"true\"\n              (click)=\"(null)\"\n              [partialColors]=\"null\"\n              [default]=\"config.default\"\n              [showValueProportionLabel]=\"false\"\n              [hideProgressBar]=\"false\"\n            ></lib-client-match-overview>\n          </swiper-slide>\n        }\n      } @else {\n        @for (match of clientMatches; let i = $index; track match._id) {\n          <swiper-slide>\n            @if (config?.chatAdsTemplate && i === 0) {\n              <ng-container *ngTemplateOutlet=\"config?.chatAdsTemplate\"></ng-container>\n            }\n            <lib-client-match-overview\n              [overview]=\"match\"\n              [expand]=\"config?.activeIndex === i\"\n              [class.lib-client-match-overview-expand]=\"config?.activeIndex === i\"\n              [partialColors]=\"match | getColorByMatcher: config\"\n              [loading]=\"config?.loading?.clientMatches\"\n              [showValueProportionLabel]=\"config?.showValueProportionLabel\"\n              [hideProgressBar]=\"config?.hideProgressBar\"\n              [meta]=\"config?.clientMatches$ | chatMeta: match._id | async\"\n            ></lib-client-match-overview>\n          </swiper-slide>\n        }\n      }\n    </ng-container>\n    <ng-container main-slides>\n      @switch (config?.component) {\n        @case (components.ChatScheduler) {\n          @if (config.default || !(config?.schedulers$ | async)?.length) {\n            @for (item of defaultNumberOfItems; track $index) {\n              <swiper-slide class=\"scheduler\">\n                <div class=\"slide-content without-shadow\">\n                  <lib-scheduler [loading$]=\"config?.loading$\" [default]=\"config.default\" [adsTemplate]=\"config?.schedulerAdsTemplate\" style=\"width: 100%\"></lib-scheduler>\n                </div>\n              </swiper-slide>\n            }\n          } @else {\n            @for (scheduler of config?.schedulers$ | async; let i = $index; track scheduler) {\n              <swiper-slide class=\"scheduler\">\n                <div class=\"slide-content without-shadow\">\n                  <lib-scheduler\n                    [adsTemplate]=\"config?.schedulerAdsTemplate\"\n                    [events$]=\"scheduler.events$\"\n                    [loading$]=\"config?.loading$\"\n                    (bookEvent)=\"bookEvent.emit($event, scheduler.matchRequest)\"\n                    (removeSuggestion)=\"removeSuggestion.emit($event)\"\n                  ></lib-scheduler>\n                </div>\n              </swiper-slide>\n            }\n          }\n        }\n        @case (components.ChatHandoff) {\n          @if (config.default || !(config?.clientMatches$ | async)?.length) {\n            @for (chat of defaultNumberOfItems; let i = $index; track chat) {\n              <swiper-slide class=\"chat\">\n                <lib-matcher-statuses\n                  [inputValue]=\"config.chatInputValue\"\n                  [messages]=\"chat?.messages || []\"\n                  (sendMessage)=\"addMessageEmit($event, chat.prospectId, {})\"\n                  (getMessages)=\"getMessages.emit()\"\n                  [maxLength]=\"maxLength\"\n                  [responseTime]=\"chat?.prospectResponseTime || ''\"\n                  [hideStatuses]=\"config.hideStatuses\"\n                ></lib-matcher-statuses>\n              </swiper-slide>\n            }\n          } @else {\n            @for (clientMatch of config?.clientMatches$ | async; let i = $index; track clientMatch?.prospectData?.prospectId ?? $index) {\n              <swiper-slide class=\"chat\">\n                <div class=\"slide-content\">\n                  <lib-matcher-statuses\n                    [status]=\"clientMatch.prospectData.status\"\n                    [adsTemplate]=\"config?.chatTabAdsTemplate\"\n                    [inputValue]=\"config.chatInputValue\"\n                    [messages]=\"clientMatch.prospectData?.messages || []\"\n                    [includeTime]=\"config?.includeTime\"\n                    [includeGifMessage]=\"config?.includeGifMessage\"\n                    (getMessages)=\"getMessages.emit()\"\n                    [maxLength]=\"config?.maxLength\"\n                    [responseTime]=\"clientMatch.prospectData.prospectResponseTime\"\n                    (sendMessage)=\"addMessageEmit($event, clientMatch?.prospectData?.prospectId, clientMatch?.matchRequest)\"\n                    [hideStatuses]=\"config.hideStatuses\"\n                    [prospectJoinDate]=\"clientMatch.prospectData.prospectJoinDate\"\n                  ></lib-matcher-statuses>\n                </div>\n              </swiper-slide>\n            }\n          }\n        }\n      }\n    </ng-container>\n  </lib-dashboard-swipeable-tabs>\n\n  <ng-template #empty>\n    <lib-section-separator></lib-section-separator>\n    <div class=\"messsage f-lg f-gilroy-regular\">{{ emptyMessage }}</div>\n  </ng-template>\n</div>\n", styles: [":host{--match-percentage-font-size: 1.5em;--container-sides-shadow-width: 15px;--match-percentage-value-height: 3em;position:relative}.messsage{margin-bottom:40px}.padding-20{padding:20px!important}.client-home{height:100%}swiper-slide{display:flex;overflow:hidden;position:relative;align-items:center;min-height:120px}swiper-slide.chat.swiper-slide-next,swiper-slide.chat.swiper-slide-prev{opacity:.5}swiper-slide.chat.swiper-slide-next:before,swiper-slide.chat.swiper-slide-prev:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:gray;opacity:.4;border-radius:10px}lib-client-match-overview{cursor:pointer}lib-client-match-overview:not(.lib-client-match-overview-expand){--lib-circle-progress-height: 65%;--lib-circle-progress-width: 65%;--primary-profile-height: 7em;--primary-profile-width: 7em;margin:auto 6px}lib-client-match-overview.lib-client-match-overview-expand{--primary-profile-height: 11em;--primary-profile-width: 11em;--secondary-profile-height: 3em;--secondary-profile-width: 3em}.slide-content{height:auto;width:100%;position:relative;display:block;overflow:visible;padding:0 5px}.slide-content:not(.without-shadow){border-radius:10px;box-shadow:5.70371px 5.70371px 11.40741px #00000052 inset,-3.42222px -3.42222px 4.56296px #ffffff1a inset}.slide-content:has(lib-chat){padding:0}.slide-content lib-chat{--max-width-container: 100%}.slide-content .status-list{position:absolute;top:.9em;left:.5em;display:flex;flex-direction:column;gap:.32em}lib-client-match-overview{--secondary-profile-margin: 0 0 0 -5px}@media (min-width: 350px){.left-side{left:0!important}}@media (max-width: 768px){swiper-slide{min-height:80px}}@media (max-width: 768px){swiper-slide{min-height:80px}lib-client-match-overview{--secondary-profile-margin: 0 0 0 -5px}.trait-visual-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%;min-height:240px}.trait-visual-container tv-trait-visual{width:100%;height:100%;max-width:270px;max-height:240px}}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"client-home\">\n  @if (components.ClientMatchSpiderChart === config?.component) {\n    <lib-spider-chart\n      [datasets]=\"config.spiderConfig?.datasets\"\n      [config]=\"config?.spiderConfig\"\n      [polygon_colors]=\"config?.polygonColors\"\n      [showChartInfo]=\"false\"\n    ></lib-spider-chart>\n  } @else if (components.ClientMatchTraitChart === config?.component) {\n    <div class=\"trait-visual-container\">\n      <tv-trait-visual [nodeData]=\"traitVisualNodes\" [attributeWeights]=\"traitVisualAttrWeights\" [preferenceWeights]=\"traitVisualPrefWeights\"></tv-trait-visual>\n    </div>\n  }\n\n  <lib-dashboard-swipeable-tabs\n    [activeIndex]=\"config?.activeIndex\"\n    [slideContentMaxHeight]=\"config?.slideContentMaxHeight\"\n    [thumbsSwiperOptions]=\"{\n      virtual: {\n        enabled: clientMatches?.length > 5,\n        addSlidesAfter: 8,\n        addSlidesBefore: 8,\n        cache: true,\n      },\n      slidesPerView: 'auto',\n      grabCursor: true,\n      centeredSlides: false,\n      freeMode: {\n        enabled: true,\n        sticky: true,\n      },\n      observer: true,\n      observeParents: true,\n    }\"\n    [mainSwiperOptions]=\"{\n      virtual: {\n        enabled: clientMatches?.length > 5,\n        addSlidesAfter: 2,\n        addSlidesBefore: 2,\n        cache: true,\n      },\n      centeredSlides: true,\n      grabCursor: true,\n      keyboard: { enabled: true, onlyInViewport: false },\n      effect: 'coverflow',\n      spaceBetween: 5,\n      coverflowEffect: {\n        rotate: 0,\n        slideShadows: false,\n        scale: 0.9,\n      },\n      observer: true,\n      observeParents: true,\n    }\"\n    [bottomThumbs]=\"config?.bottomThumbs\"\n    [generalSwiperHeight]=\"'100%'\"\n    [enableMainSwiper]=\"true\"\n    (activeIndexChange)=\"onActiveIndexChange($event)\"\n    *ngIf=\"(config?.loading$ | async) !== true || config?.default; else empty\"\n  >\n    <ng-container thumb-slides>\n      @if (config.default || !clientMatches?.length) {\n        @for (match of defaultNumberOfItems; let i = $index; track match) {\n          <swiper-slide>\n            <lib-client-match-overview\n              [overview]=\"{}\"\n              [expand]=\"0\"\n              [class.lib-client-match-overview-expand]=\"true\"\n              (click)=\"(null)\"\n              [partialColors]=\"null\"\n              [default]=\"config.default\"\n              [showValueProportionLabel]=\"false\"\n              [hideProgressBar]=\"false\"\n            ></lib-client-match-overview>\n          </swiper-slide>\n        }\n      } @else {\n        @for (match of clientMatches; let i = $index; track match._id) {\n          <swiper-slide>\n            @if (config?.chatAdsTemplate && i === 0) {\n              <ng-container *ngTemplateOutlet=\"config?.chatAdsTemplate\"></ng-container>\n            }\n            <lib-client-match-overview\n              [overview]=\"match\"\n              [expand]=\"config?.activeIndex === i\"\n              [class.lib-client-match-overview-expand]=\"config?.activeIndex === i\"\n              [partialColors]=\"match | getColorByMatcher: config\"\n              [loading]=\"config?.loading?.clientMatches\"\n              [showValueProportionLabel]=\"config?.showValueProportionLabel\"\n              [hideProgressBar]=\"config?.hideProgressBar\"\n              [meta]=\"config?.clientMatches$ | chatMeta: match._id | async\"\n            ></lib-client-match-overview>\n          </swiper-slide>\n        }\n      }\n    </ng-container>\n    <ng-container main-slides>\n      @switch (config?.component) {\n        @case (components.ChatScheduler) {\n          @if (config.default || !(config?.schedulers$ | async)?.length) {\n            @for (item of defaultNumberOfItems; track $index) {\n              <swiper-slide class=\"scheduler\">\n                <div class=\"slide-content without-shadow\">\n                  <lib-scheduler [loading$]=\"config?.loading$\" [default]=\"config.default\" [adsTemplate]=\"config?.schedulerAdsTemplate\" style=\"width: 100%\"></lib-scheduler>\n                </div>\n              </swiper-slide>\n            }\n          } @else {\n            @for (scheduler of config?.schedulers$ | async; let i = $index; track scheduler) {\n              <swiper-slide class=\"scheduler\">\n                <div class=\"slide-content without-shadow\">\n                  <lib-scheduler\n                    [adsTemplate]=\"config?.schedulerAdsTemplate\"\n                    [events$]=\"scheduler.events$\"\n                    [loading$]=\"config?.loading$\"\n                    (bookEvent)=\"bookEvent.emit($event, scheduler.matchRequest)\"\n                    (removeSuggestion)=\"removeSuggestion.emit($event)\"\n                  ></lib-scheduler>\n                </div>\n              </swiper-slide>\n            }\n          }\n        }\n        @case (components.ChatHandoff) {\n          @if (config.default || !(config?.clientMatches$ | async)?.length) {\n            @for (chat of defaultNumberOfItems; let i = $index; track chat) {\n              <swiper-slide class=\"chat\">\n                <lib-matcher-statuses\n                  [inputValue]=\"config.chatInputValue\"\n                  [messages]=\"chat?.messages || []\"\n                  (sendMessage)=\"addMessageEmit($event, chat.prospectId, {})\"\n                  (getMessages)=\"getMessages.emit()\"\n                  [maxLength]=\"maxLength\"\n                  [responseTime]=\"chat?.prospectResponseTime || ''\"\n                  [hideStatuses]=\"config.hideStatuses\"\n                ></lib-matcher-statuses>\n              </swiper-slide>\n            }\n          } @else {\n            @for (clientMatch of config?.clientMatches$ | async; let i = $index; track clientMatch?.prospectData?.prospectId ?? $index) {\n              <swiper-slide class=\"chat\">\n                <div class=\"slide-content\">\n                  <lib-matcher-statuses\n                    *ngIf=\"clientMatch.prospectData\"\n                    [status]=\"clientMatch.prospectData.status\"\n                    [adsTemplate]=\"config?.chatTabAdsTemplate\"\n                    [inputValue]=\"config.chatInputValue\"\n                    [messages]=\"clientMatch.prospectData?.messages || []\"\n                    [includeTime]=\"config?.includeTime\"\n                    [includeGifMessage]=\"config?.includeGifMessage\"\n                    (getMessages)=\"getMessages.emit()\"\n                    [maxLength]=\"config?.maxLength\"\n                    [responseTime]=\"clientMatch.prospectData.prospectResponseTime\"\n                    (sendMessage)=\"addMessageEmit($event, clientMatch?.prospectData?.prospectId, clientMatch?.matchRequest)\"\n                    [hideStatuses]=\"config.hideStatuses\"\n                    [prospectJoinDate]=\"clientMatch.prospectData.prospectJoinDate\"\n                  ></lib-matcher-statuses>\n                </div>\n              </swiper-slide>\n            }\n          }\n        }\n      }\n    </ng-container>\n  </lib-dashboard-swipeable-tabs>\n\n  <ng-template #empty>\n    <lib-section-separator></lib-section-separator>\n    <div class=\"messsage f-lg f-gilroy-regular\">{{ emptyMessage }}</div>\n  </ng-template>\n</div>\n", styles: [":host{--match-percentage-font-size: 1.5em;--container-sides-shadow-width: 15px;--match-percentage-value-height: 3em;position:relative}.messsage{margin-bottom:40px}.padding-20{padding:20px!important}.client-home{height:100%}swiper-slide{display:flex;overflow:hidden;position:relative;align-items:center;min-height:120px}swiper-slide.chat.swiper-slide-next,swiper-slide.chat.swiper-slide-prev{opacity:.5}swiper-slide.chat.swiper-slide-next:before,swiper-slide.chat.swiper-slide-prev:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:gray;opacity:.4;border-radius:10px}lib-client-match-overview{cursor:pointer}lib-client-match-overview:not(.lib-client-match-overview-expand){--lib-circle-progress-height: 65%;--lib-circle-progress-width: 65%;--primary-profile-height: 7em;--primary-profile-width: 7em;margin:auto 6px}lib-client-match-overview.lib-client-match-overview-expand{--primary-profile-height: 11em;--primary-profile-width: 11em;--secondary-profile-height: 3em;--secondary-profile-width: 3em}.slide-content{height:auto;width:100%;position:relative;display:block;overflow:visible;padding:0 5px}.slide-content:not(.without-shadow){border-radius:10px;box-shadow:5.70371px 5.70371px 11.40741px #00000052 inset,-3.42222px -3.42222px 4.56296px #ffffff1a inset}.slide-content:has(lib-chat){padding:0}.slide-content lib-chat{--max-width-container: 100%}.slide-content .status-list{position:absolute;top:.9em;left:.5em;display:flex;flex-direction:column;gap:.32em}lib-client-match-overview{--secondary-profile-margin: 0 0 0 -5px}@media (min-width: 350px){.left-side{left:0!important}}@media (max-width: 768px){swiper-slide{min-height:80px}}@media (max-width: 768px){swiper-slide{min-height:80px}lib-client-match-overview{--secondary-profile-margin: 0 0 0 -5px}.trait-visual-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%;min-height:240px}.trait-visual-container tv-trait-visual{width:100%;height:100%;max-width:270px;max-height:240px}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { config: [{
                 type: Input
             }], activeIndexChange: [{
@@ -3918,21 +3918,11 @@ class LibHandoffPanelComponent {
         return `handoff-panel--${this.config.version || HandoffPanelVersion.STANDARD}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibHandoffPanelComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LibHandoffPanelComponent, isStandalone: true, selector: "lib-handoff-panel", inputs: { config: "config" }, outputs: { addMessage: "addMessage", scheduleSlotToggle: "scheduleSlotToggle" }, ngImport: i0, template: "<div class=\"handoff-panel\" [ngClass]=\"getVersionClass()\">\n  <div class=\"handoff-panel__tabs\">\n    <button\n      class=\"handoff-panel__tab\"\n      [ngClass]=\"{ 'handoff-panel__tab--active': activeTabIndex === 0 }\"\n      (click)=\"onTabChange(0)\"\n    >\n      Chat Handoff\n    </button>\n    <button\n      class=\"handoff-panel__tab\"\n      [ngClass]=\"{ 'handoff-panel__tab--active': activeTabIndex === 1 }\"\n      (click)=\"onTabChange(1)\"\n    >\n      Schedule\n    </button>\n    <button\n      class=\"handoff-panel__tab\"\n      [ngClass]=\"{ 'handoff-panel__tab--active': activeTabIndex === 2 }\"\n      (click)=\"onTabChange(2)\"\n    >\n      Date Prep\n    </button>\n  </div>\n\n  <div class=\"handoff-panel__content\">\n    <!-- Chat Handoff Tab -->\n    @if (activeTabIndex === 0) {\n      <div class=\"handoff-panel__chat\">\n        <lib-chat\n          [default]=\"config.default\"\n          [messages$]=\"messages$\"\n          (addMessage)=\"onMessageAdd($event)\"\n        ></lib-chat>\n      </div>\n    }\n\n    <!-- Schedule Tab -->\n    @if (activeTabIndex === 1) {\n      <div class=\"handoff-panel__schedule\">\n        @if (scheduleSlots && scheduleSlots.length > 0) {\n          <div class=\"schedule-list\">\n            @for (slot of scheduleSlots; track slot.id) {\n              <div class=\"schedule-item\">\n                <div class=\"schedule-item__info\">\n                  @if (slot.profileImage) {\n                    <img class=\"schedule-item__avatar\" [src]=\"slot.profileImage\" alt=\"Profile\" />\n                  }\n                  <div class=\"schedule-item__details\">\n                    <div class=\"schedule-item__time\">{{ slot.time }} - {{ slot.duration }}</div>\n                    @if (slot.description) {\n                      <div class=\"schedule-item__description\">{{ slot.description }}</div>\n                    }\n                  </div>\n                </div>\n                <lib-toggle\n                  [formControl]=\"getSlotControl(slot)\"\n                ></lib-toggle>\n              </div>\n            }\n          </div>\n        } @else {\n          <div class=\"handoff-panel__empty\">\n            <p>No schedule slots available</p>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Date Prep Tab -->\n    @if (activeTabIndex === 2) {\n      <div class=\"handoff-panel__date-prep\">\n        <div class=\"date-prep-info\">\n          <h3 class=\"date-prep-info__title\">{{ datePrepInfo.title }}</h3>\n          @if (datePrepInfo.items && datePrepInfo.items.length > 0) {\n            <ul class=\"date-prep-info__list\">\n              @for (item of datePrepInfo.items; track $index) {\n                <li class=\"date-prep-info__item\">{{ item }}</li>\n              }\n            </ul>\n          } @else {\n            <div class=\"handoff-panel__empty\">\n              <p>No date prep information available</p>\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n\n", styles: ["@charset \"UTF-8\";.handoff-panel{display:flex;flex-direction:column;height:100%;background-color:var(--ion-background-color);color:#666}.handoff-panel__tabs{display:flex;border-bottom:1px solid #dfe0e3;background-color:#464a4c}.handoff-panel__tab{flex:1;padding:12px 16px;background:transparent;border:none;border-bottom:2px solid transparent;color:#f4f6f7;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s ease}.handoff-panel__tab:hover{color:#a6a6a6;background-color:#ffffff0d}.handoff-panel__tab--active{color:#666;border-bottom-color:#45899b;background-color:#ffffff05}.handoff-panel__content{flex:1;overflow-y:auto;padding:16px}.handoff-panel__chat,.handoff-panel__schedule,.handoff-panel__date-prep{height:100%}.handoff-panel__empty{display:flex;align-items:center;justify-content:center;height:200px;color:#f4f6f7;font-size:14px}.handoff-panel--standard .handoff-panel__tab--active{border-bottom-color:#45899b}.handoff-panel--pro .handoff-panel__tab--active{border-bottom-color:#9c27b0}.handoff-panel--super .handoff-panel__tab--active{border-bottom-color:#d4863d}.schedule-list{display:flex;flex-direction:column;gap:12px}.schedule-item{display:flex;align-items:center;justify-content:space-between;padding:12px;background-color:#464a4c;border-radius:8px;border:1px solid #dfe0e3;transition:all .3s ease}.schedule-item:hover{background-color:#464a4c;border-color:#ccc}.schedule-item__info{display:flex;align-items:center;gap:12px;flex:1}.schedule-item__avatar{width:40px;height:40px;border-radius:50%;object-fit:cover}.schedule-item__details{display:flex;flex-direction:column;gap:4px}.schedule-item__time{font-size:14px;font-weight:500;color:#666}.schedule-item__description{font-size:12px;color:#f4f6f7}.date-prep-info__title{font-size:18px;font-weight:600;color:#666;margin-bottom:16px}.date-prep-info__list{list-style:none;padding:0;margin:0}.date-prep-info__item{padding:8px 0 8px 20px;position:relative;color:#a6a6a6;font-size:14px;line-height:1.5}.date-prep-info__item:before{content:\"\\2022\";position:absolute;left:0;color:#45899b;font-size:18px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: LibChatComponentModule }, { kind: "component", type: ChatComponent, selector: "lib-chat", inputs: ["default", "responseTime", "inputValue", "emojiPickerConfig", "includeGifMessage", "includeTime", "dateMessages", "maxLength", "enableGifPicker", "prospectJoinDate", "disabled"], outputs: ["sendMessage", "getMessages"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "ngmodule", type: FormFieldModule }, { kind: "ngmodule", type: InputFieldModule }, { kind: "ngmodule", type: ToggleModule }, { kind: "component", type: i2.ToggleComponent, selector: "lib-toggle", inputs: ["disabled", "toggleState", "variant", "left", "right", "thumbImg", "multipleOptions"], outputs: ["toggleStateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LibHandoffPanelComponent, isStandalone: true, selector: "lib-handoff-panel", inputs: { config: "config" }, outputs: { addMessage: "addMessage", scheduleSlotToggle: "scheduleSlotToggle" }, ngImport: i0, template: "<div class=\"handoff-panel\" [ngClass]=\"getVersionClass()\">\n  <div class=\"handoff-panel__tabs\">\n    <button class=\"handoff-panel__tab\" [ngClass]=\"{ 'handoff-panel__tab--active': activeTabIndex === 0 }\" (click)=\"onTabChange(0)\">Chat Handoff</button>\n    <button class=\"handoff-panel__tab\" [ngClass]=\"{ 'handoff-panel__tab--active': activeTabIndex === 1 }\" (click)=\"onTabChange(1)\">Schedule</button>\n    <button class=\"handoff-panel__tab\" [ngClass]=\"{ 'handoff-panel__tab--active': activeTabIndex === 2 }\" (click)=\"onTabChange(2)\">Date Prep</button>\n  </div>\n\n  <div class=\"handoff-panel__content\">\n    <!-- Chat Handoff Tab -->\n    @if (activeTabIndex === 0) {\n      <div class=\"handoff-panel__chat\">\n        <lib-chat [default]=\"config.default\" [messages$]=\"messages$\" (addMessage)=\"onMessageAdd($event)\"></lib-chat>\n      </div>\n    }\n\n    <!-- Schedule Tab -->\n    @if (activeTabIndex === 1) {\n      <div class=\"handoff-panel__schedule\">\n        @if (scheduleSlots && scheduleSlots.length > 0) {\n          <div class=\"schedule-list\">\n            @for (slot of scheduleSlots; track slot.id) {\n              <div class=\"schedule-item\">\n                <div class=\"schedule-item__info\">\n                  @if (slot.profileImage) {\n                    <img class=\"schedule-item__avatar\" [src]=\"slot.profileImage\" alt=\"Profile\" />\n                  }\n                  <div class=\"schedule-item__details\">\n                    <div class=\"schedule-item__time\">{{ slot.time }} - {{ slot.duration }}</div>\n                    @if (slot.description) {\n                      <div class=\"schedule-item__description\">{{ slot.description }}</div>\n                    }\n                  </div>\n                </div>\n                <lib-toggle [formControl]=\"getSlotControl(slot)\"></lib-toggle>\n              </div>\n            }\n          </div>\n        } @else {\n          <div class=\"handoff-panel__empty\">\n            <p>No schedule slots available</p>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Date Prep Tab -->\n    @if (activeTabIndex === 2) {\n      <div class=\"handoff-panel__date-prep\">\n        <div class=\"date-prep-info\">\n          <h3 class=\"date-prep-info__title\">{{ datePrepInfo.title }}</h3>\n          @if (datePrepInfo.items && datePrepInfo.items.length > 0) {\n            <ul class=\"date-prep-info__list\">\n              @for (item of datePrepInfo.items; track $index) {\n                <li class=\"date-prep-info__item\">{{ item }}</li>\n              }\n            </ul>\n          } @else {\n            <div class=\"handoff-panel__empty\">\n              <p>No date prep information available</p>\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.handoff-panel{display:flex;flex-direction:column;height:100%;background-color:var(--ion-background-color);color:#666}.handoff-panel__tabs{display:flex;border-bottom:1px solid #dfe0e3;background-color:#464a4c}.handoff-panel__tab{flex:1;padding:12px 16px;background:transparent;border:none;border-bottom:2px solid transparent;color:#f4f6f7;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s ease}.handoff-panel__tab:hover{color:#a6a6a6;background-color:#ffffff0d}.handoff-panel__tab--active{color:#666;border-bottom-color:#45899b;background-color:#ffffff05}.handoff-panel__content{flex:1;overflow-y:auto;padding:16px}.handoff-panel__chat,.handoff-panel__schedule,.handoff-panel__date-prep{height:100%}.handoff-panel__empty{display:flex;align-items:center;justify-content:center;height:200px;color:#f4f6f7;font-size:14px}.handoff-panel--standard .handoff-panel__tab--active{border-bottom-color:#45899b}.handoff-panel--pro .handoff-panel__tab--active{border-bottom-color:#9c27b0}.handoff-panel--super .handoff-panel__tab--active{border-bottom-color:#d4863d}.schedule-list{display:flex;flex-direction:column;gap:12px}.schedule-item{display:flex;align-items:center;justify-content:space-between;padding:12px;background-color:#464a4c;border-radius:8px;border:1px solid #dfe0e3;transition:all .3s ease}.schedule-item:hover{background-color:#464a4c;border-color:#ccc}.schedule-item__info{display:flex;align-items:center;gap:12px;flex:1}.schedule-item__avatar{width:40px;height:40px;border-radius:50%;object-fit:cover}.schedule-item__details{display:flex;flex-direction:column;gap:4px}.schedule-item__time{font-size:14px;font-weight:500;color:#666}.schedule-item__description{font-size:12px;color:#f4f6f7}.date-prep-info__title{font-size:18px;font-weight:600;color:#666;margin-bottom:16px}.date-prep-info__list{list-style:none;padding:0;margin:0}.date-prep-info__item{padding:8px 0 8px 20px;position:relative;color:#a6a6a6;font-size:14px;line-height:1.5}.date-prep-info__item:before{content:\"\\2022\";position:absolute;left:0;color:#45899b;font-size:18px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: LibChatComponentModule }, { kind: "component", type: ChatComponent, selector: "lib-chat", inputs: ["default", "responseTime", "inputValue", "emojiPickerConfig", "includeGifMessage", "includeTime", "dateMessages", "maxLength", "enableGifPicker", "prospectJoinDate", "disabled"], outputs: ["sendMessage", "getMessages"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "ngmodule", type: FormFieldModule }, { kind: "ngmodule", type: InputFieldModule }, { kind: "ngmodule", type: ToggleModule }, { kind: "component", type: i2.ToggleComponent, selector: "lib-toggle", inputs: ["disabled", "toggleState", "variant", "left", "right", "thumbImg", "multipleOptions"], outputs: ["toggleStateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibHandoffPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-handoff-panel', imports: [
-                        CommonModule,
-                        TranslateModule,
-                        LibChatComponentModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        ButtonsModule,
-                        FormFieldModule,
-                        InputFieldModule,
-                        ToggleModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"handoff-panel\" [ngClass]=\"getVersionClass()\">\n  <div class=\"handoff-panel__tabs\">\n    <button\n      class=\"handoff-panel__tab\"\n      [ngClass]=\"{ 'handoff-panel__tab--active': activeTabIndex === 0 }\"\n      (click)=\"onTabChange(0)\"\n    >\n      Chat Handoff\n    </button>\n    <button\n      class=\"handoff-panel__tab\"\n      [ngClass]=\"{ 'handoff-panel__tab--active': activeTabIndex === 1 }\"\n      (click)=\"onTabChange(1)\"\n    >\n      Schedule\n    </button>\n    <button\n      class=\"handoff-panel__tab\"\n      [ngClass]=\"{ 'handoff-panel__tab--active': activeTabIndex === 2 }\"\n      (click)=\"onTabChange(2)\"\n    >\n      Date Prep\n    </button>\n  </div>\n\n  <div class=\"handoff-panel__content\">\n    <!-- Chat Handoff Tab -->\n    @if (activeTabIndex === 0) {\n      <div class=\"handoff-panel__chat\">\n        <lib-chat\n          [default]=\"config.default\"\n          [messages$]=\"messages$\"\n          (addMessage)=\"onMessageAdd($event)\"\n        ></lib-chat>\n      </div>\n    }\n\n    <!-- Schedule Tab -->\n    @if (activeTabIndex === 1) {\n      <div class=\"handoff-panel__schedule\">\n        @if (scheduleSlots && scheduleSlots.length > 0) {\n          <div class=\"schedule-list\">\n            @for (slot of scheduleSlots; track slot.id) {\n              <div class=\"schedule-item\">\n                <div class=\"schedule-item__info\">\n                  @if (slot.profileImage) {\n                    <img class=\"schedule-item__avatar\" [src]=\"slot.profileImage\" alt=\"Profile\" />\n                  }\n                  <div class=\"schedule-item__details\">\n                    <div class=\"schedule-item__time\">{{ slot.time }} - {{ slot.duration }}</div>\n                    @if (slot.description) {\n                      <div class=\"schedule-item__description\">{{ slot.description }}</div>\n                    }\n                  </div>\n                </div>\n                <lib-toggle\n                  [formControl]=\"getSlotControl(slot)\"\n                ></lib-toggle>\n              </div>\n            }\n          </div>\n        } @else {\n          <div class=\"handoff-panel__empty\">\n            <p>No schedule slots available</p>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Date Prep Tab -->\n    @if (activeTabIndex === 2) {\n      <div class=\"handoff-panel__date-prep\">\n        <div class=\"date-prep-info\">\n          <h3 class=\"date-prep-info__title\">{{ datePrepInfo.title }}</h3>\n          @if (datePrepInfo.items && datePrepInfo.items.length > 0) {\n            <ul class=\"date-prep-info__list\">\n              @for (item of datePrepInfo.items; track $index) {\n                <li class=\"date-prep-info__item\">{{ item }}</li>\n              }\n            </ul>\n          } @else {\n            <div class=\"handoff-panel__empty\">\n              <p>No date prep information available</p>\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n\n", styles: ["@charset \"UTF-8\";.handoff-panel{display:flex;flex-direction:column;height:100%;background-color:var(--ion-background-color);color:#666}.handoff-panel__tabs{display:flex;border-bottom:1px solid #dfe0e3;background-color:#464a4c}.handoff-panel__tab{flex:1;padding:12px 16px;background:transparent;border:none;border-bottom:2px solid transparent;color:#f4f6f7;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s ease}.handoff-panel__tab:hover{color:#a6a6a6;background-color:#ffffff0d}.handoff-panel__tab--active{color:#666;border-bottom-color:#45899b;background-color:#ffffff05}.handoff-panel__content{flex:1;overflow-y:auto;padding:16px}.handoff-panel__chat,.handoff-panel__schedule,.handoff-panel__date-prep{height:100%}.handoff-panel__empty{display:flex;align-items:center;justify-content:center;height:200px;color:#f4f6f7;font-size:14px}.handoff-panel--standard .handoff-panel__tab--active{border-bottom-color:#45899b}.handoff-panel--pro .handoff-panel__tab--active{border-bottom-color:#9c27b0}.handoff-panel--super .handoff-panel__tab--active{border-bottom-color:#d4863d}.schedule-list{display:flex;flex-direction:column;gap:12px}.schedule-item{display:flex;align-items:center;justify-content:space-between;padding:12px;background-color:#464a4c;border-radius:8px;border:1px solid #dfe0e3;transition:all .3s ease}.schedule-item:hover{background-color:#464a4c;border-color:#ccc}.schedule-item__info{display:flex;align-items:center;gap:12px;flex:1}.schedule-item__avatar{width:40px;height:40px;border-radius:50%;object-fit:cover}.schedule-item__details{display:flex;flex-direction:column;gap:4px}.schedule-item__time{font-size:14px;font-weight:500;color:#666}.schedule-item__description{font-size:12px;color:#f4f6f7}.date-prep-info__title{font-size:18px;font-weight:600;color:#666;margin-bottom:16px}.date-prep-info__list{list-style:none;padding:0;margin:0}.date-prep-info__item{padding:8px 0 8px 20px;position:relative;color:#a6a6a6;font-size:14px;line-height:1.5}.date-prep-info__item:before{content:\"\\2022\";position:absolute;left:0;color:#45899b;font-size:18px}\n"] }]
+            args: [{ selector: 'lib-handoff-panel', imports: [CommonModule, TranslateModule, LibChatComponentModule, FormsModule, ReactiveFormsModule, ButtonsModule, FormFieldModule, InputFieldModule, ToggleModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"handoff-panel\" [ngClass]=\"getVersionClass()\">\n  <div class=\"handoff-panel__tabs\">\n    <button class=\"handoff-panel__tab\" [ngClass]=\"{ 'handoff-panel__tab--active': activeTabIndex === 0 }\" (click)=\"onTabChange(0)\">Chat Handoff</button>\n    <button class=\"handoff-panel__tab\" [ngClass]=\"{ 'handoff-panel__tab--active': activeTabIndex === 1 }\" (click)=\"onTabChange(1)\">Schedule</button>\n    <button class=\"handoff-panel__tab\" [ngClass]=\"{ 'handoff-panel__tab--active': activeTabIndex === 2 }\" (click)=\"onTabChange(2)\">Date Prep</button>\n  </div>\n\n  <div class=\"handoff-panel__content\">\n    <!-- Chat Handoff Tab -->\n    @if (activeTabIndex === 0) {\n      <div class=\"handoff-panel__chat\">\n        <lib-chat [default]=\"config.default\" [messages$]=\"messages$\" (addMessage)=\"onMessageAdd($event)\"></lib-chat>\n      </div>\n    }\n\n    <!-- Schedule Tab -->\n    @if (activeTabIndex === 1) {\n      <div class=\"handoff-panel__schedule\">\n        @if (scheduleSlots && scheduleSlots.length > 0) {\n          <div class=\"schedule-list\">\n            @for (slot of scheduleSlots; track slot.id) {\n              <div class=\"schedule-item\">\n                <div class=\"schedule-item__info\">\n                  @if (slot.profileImage) {\n                    <img class=\"schedule-item__avatar\" [src]=\"slot.profileImage\" alt=\"Profile\" />\n                  }\n                  <div class=\"schedule-item__details\">\n                    <div class=\"schedule-item__time\">{{ slot.time }} - {{ slot.duration }}</div>\n                    @if (slot.description) {\n                      <div class=\"schedule-item__description\">{{ slot.description }}</div>\n                    }\n                  </div>\n                </div>\n                <lib-toggle [formControl]=\"getSlotControl(slot)\"></lib-toggle>\n              </div>\n            }\n          </div>\n        } @else {\n          <div class=\"handoff-panel__empty\">\n            <p>No schedule slots available</p>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Date Prep Tab -->\n    @if (activeTabIndex === 2) {\n      <div class=\"handoff-panel__date-prep\">\n        <div class=\"date-prep-info\">\n          <h3 class=\"date-prep-info__title\">{{ datePrepInfo.title }}</h3>\n          @if (datePrepInfo.items && datePrepInfo.items.length > 0) {\n            <ul class=\"date-prep-info__list\">\n              @for (item of datePrepInfo.items; track $index) {\n                <li class=\"date-prep-info__item\">{{ item }}</li>\n              }\n            </ul>\n          } @else {\n            <div class=\"handoff-panel__empty\">\n              <p>No date prep information available</p>\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.handoff-panel{display:flex;flex-direction:column;height:100%;background-color:var(--ion-background-color);color:#666}.handoff-panel__tabs{display:flex;border-bottom:1px solid #dfe0e3;background-color:#464a4c}.handoff-panel__tab{flex:1;padding:12px 16px;background:transparent;border:none;border-bottom:2px solid transparent;color:#f4f6f7;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s ease}.handoff-panel__tab:hover{color:#a6a6a6;background-color:#ffffff0d}.handoff-panel__tab--active{color:#666;border-bottom-color:#45899b;background-color:#ffffff05}.handoff-panel__content{flex:1;overflow-y:auto;padding:16px}.handoff-panel__chat,.handoff-panel__schedule,.handoff-panel__date-prep{height:100%}.handoff-panel__empty{display:flex;align-items:center;justify-content:center;height:200px;color:#f4f6f7;font-size:14px}.handoff-panel--standard .handoff-panel__tab--active{border-bottom-color:#45899b}.handoff-panel--pro .handoff-panel__tab--active{border-bottom-color:#9c27b0}.handoff-panel--super .handoff-panel__tab--active{border-bottom-color:#d4863d}.schedule-list{display:flex;flex-direction:column;gap:12px}.schedule-item{display:flex;align-items:center;justify-content:space-between;padding:12px;background-color:#464a4c;border-radius:8px;border:1px solid #dfe0e3;transition:all .3s ease}.schedule-item:hover{background-color:#464a4c;border-color:#ccc}.schedule-item__info{display:flex;align-items:center;gap:12px;flex:1}.schedule-item__avatar{width:40px;height:40px;border-radius:50%;object-fit:cover}.schedule-item__details{display:flex;flex-direction:column;gap:4px}.schedule-item__time{font-size:14px;font-weight:500;color:#666}.schedule-item__description{font-size:12px;color:#f4f6f7}.date-prep-info__title{font-size:18px;font-weight:600;color:#666;margin-bottom:16px}.date-prep-info__list{list-style:none;padding:0;margin:0}.date-prep-info__item{padding:8px 0 8px 20px;position:relative;color:#a6a6a6;font-size:14px;line-height:1.5}.date-prep-info__item:before{content:\"\\2022\";position:absolute;left:0;color:#45899b;font-size:18px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { config: [{
                 type: Input
             }], addMessage: [{
@@ -4082,9 +4072,7 @@ class LibVisualManagerModalComponent {
             this.preferences[index].isSelected = !wasSelected;
             // Force change detection to update the view
             this.changeDetectorRef.detectChanges();
-            const eventValue = this.preferences[index].isSelected
-                ? VisualManagerModalEventValue.AddPreference
-                : VisualManagerModalEventValue.RemovePreference;
+            const eventValue = this.preferences[index].isSelected ? VisualManagerModalEventValue.AddPreference : VisualManagerModalEventValue.RemovePreference;
             // Emit event but don't close the modal - user can continue toggling items
             if (this.data) {
                 this.event.emit({
@@ -4219,11 +4207,11 @@ class LibVisualManagerModalComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibVisualManagerModalComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2.PopupModalService }, { token: MODAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LibVisualManagerModalComponent, isStandalone: true, selector: "lib-visual-manager-modal", inputs: { data: "data" }, outputs: { event: "event" }, providers: [LibModalComponent], viewQueries: [{ propertyName: "childModalElementRef", first: true, predicate: ["childModalElementRef"], descendants: true }], ngImport: i0, template: "<div class=\"visual-manager-modal\" #childModalElementRef>\n  <header class=\"visual-manager-modal__header\">\n    <div class=\"visual-manager-modal__header-left\">\n      <img class=\"visual-manager-modal__filter-icon\" src=\"assets/icons/filter-icon.svg\" alt=\"Filter icon\" />\n      <h2 class=\"visual-manager-modal__title\">{{ 'VISUAL_MANAGER_MODAL.TITLE' | translate }}</h2>\n    </div>\n    <button class=\"visual-manager-modal__close-button\" (click)=\"close()\">\n      <img class=\"visual-manager-modal__close-icon\" src=\"assets/icons/close-icon.svg\" alt=\"Close\" />\n    </button>\n  </header>\n\n  <div class=\"visual-manager-modal__content\">\n    <!-- Selected Items Section -->\n    @if (selectedItems.length > 0) {\n      <div class=\"visual-manager-modal__section\">\n        <ol class=\"visual-manager-modal__list visual-manager-modal__list--ordered\">\n          @for (preference of selectedItems; track preference.id; let i = $index) {\n            <li \n              class=\"visual-manager-modal__item\"\n              (dragover)=\"onDragOver($event)\"\n              (drop)=\"onDrop($event, preference, true)\"\n            >\n              <span class=\"visual-manager-modal__item-number\">{{ i + 1 }}</span>\n              <div class=\"visual-manager-modal__input-wrapper\">\n                <lib-input-field\n                  class=\"visual-manager-modal__item-name\"\n                  [formControl]=\"getPreferenceControl(preference.id)\"\n                  (valueChange)=\"onPreferenceNameChange(preference, $event)\"\n                ></lib-input-field>\n                <button class=\"visual-manager-modal__action-button1\" > </button>\n                <button\n                  class=\"visual-manager-modal__action-button\"\n                  (click)=\"togglePreference(preference, $event)\"\n                >\n                  <img class=\"visual-manager-modal__action-icon\" src=\"assets/icons/close-icon.svg\" alt=\"Remove\" />\n                </button>\n              </div>\n              <img \n                class=\"visual-manager-modal__drag-handle\" \n                src=\"assets/icons/drag-handle.svg\" \n                alt=\"Drag handle\"\n                draggable=\"true\"\n                (dragstart)=\"onDragStart($event, preference, true)\"\n                (dragend)=\"onDragEnd($event)\"\n              />\n            </li>\n          }\n        </ol>\n      </div>\n    }\n\n    <!-- Separator -->\n    @if (selectedItems.length > 0 && deselectedItems.length > 0) {\n      <div class=\"visual-manager-modal__separator\"></div>\n    }\n\n    <!-- Deselected Items Section -->\n    @if (deselectedItems.length > 0) {\n      <div class=\"visual-manager-modal__section\">\n        <ul class=\"visual-manager-modal__list\">\n          @for (preference of deselectedItems; track preference.id) {\n            <li \n              class=\"visual-manager-modal__item\"\n              (dragover)=\"onDragOver($event)\"\n              (drop)=\"onDrop($event, preference, false)\"\n            >\n              <div class=\"visual-manager-modal__input-wrapper\">\n                <lib-input-field\n                  class=\"visual-manager-modal__item-name\"\n                  [formControl]=\"getPreferenceControl(preference.id)\"\n                  (valueChange)=\"onPreferenceNameChange(preference, $event)\"\n                ></lib-input-field>\n                <button class=\"visual-manager-modal__action-button1\" > </button>\n                <button\n                  class=\"visual-manager-modal__action-button\"\n                  (click)=\"togglePreference(preference, $event)\"\n                >\n                  <img class=\"visual-manager-modal__action-icon\" src=\"assets/icons/plus.svg\" alt=\"Add\" />\n                </button>\n              </div>\n              <img \n                class=\"visual-manager-modal__drag-handle\" \n                src=\"assets/icons/drag-handle.svg\" \n                alt=\"Drag handle\"\n                draggable=\"true\"\n                (dragstart)=\"onDragStart($event, preference, false)\"\n                (dragend)=\"onDragEnd($event)\"\n              />\n            </li>\n          }\n        </ul>\n      </div>\n    }\n  </div>\n\n  <footer class=\"visual-manager-modal__footer\">\n    <lib-secondary-btn (click)=\"reset()\">\n      {{ 'VISUAL_MANAGER_MODAL.RESET' | translate }}\n    </lib-secondary-btn>\n    <lib-primary-btn (click)=\"apply()\">\n      {{ 'VISUAL_MANAGER_MODAL.APPLY' | translate }}\n    </lib-primary-btn>\n  </footer>\n</div>\n\n", styles: [":host{font-size:clamp(0px,3.2dvw,15px)}:host *{box-sizing:border-box}.visual-manager-modal{-webkit-backdrop-filter:blur(.625em);backdrop-filter:blur(.625em);background:linear-gradient(180deg,#323133,#1f1e20);color:#fff;padding:1.5em 2em;width:28.125em;margin:0 auto;border-radius:1.5625em;font-family:Gilroy;box-shadow:.5em .5em 1em #00000080,-.5em -.5em 1em #ffffff0d;position:relative;display:flex;flex-direction:column}.visual-manager-modal__header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.5em;padding-bottom:1em;border-bottom:1px solid rgba(255,255,255,.1);gap:.75em}.visual-manager-modal__header-left{display:flex;flex-direction:column;align-items:center;gap:.5em;flex:1}.visual-manager-modal__filter-icon{width:3em;height:3em;cursor:pointer;flex-shrink:0}.visual-manager-modal__title{font-size:1.25em;font-weight:500;font-family:Gilroy;margin:0;color:#fff}.visual-manager-modal__close-button{background:transparent;border:none;cursor:pointer;padding:.25em;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s}.visual-manager-modal__close-button:hover{background:#ffffff1a}.visual-manager-modal__close-icon{width:2em;height:2em;filter:brightness(0) saturate(100%) invert(39%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(98%) contrast(105%)}.visual-manager-modal__content{margin-bottom:1.5em;max-height:50vh;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:1em}.visual-manager-modal__section{display:flex;flex-direction:column;gap:.75em}.visual-manager-modal__section-label{font-size:.9em;font-weight:500;color:#4a9eff;margin-bottom:.25em}.visual-manager-modal__separator{height:1px;background:#ffffff1a;margin:.5em 0}.visual-manager-modal__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75em}.visual-manager-modal__list--ordered{list-style:none}.visual-manager-modal__item{display:flex;align-items:center;gap:.5em;width:100%}.visual-manager-modal__item-number{display:flex;align-items:center;justify-content:center;min-width:1.5em;height:1.5em;font-size:.9em;font-weight:500;color:#ffffffb3;flex-shrink:0}.visual-manager-modal__input-wrapper{position:relative;flex:1;min-width:0}.visual-manager-modal__item-name{width:100%}.visual-manager-modal__item-name ::ng-deep .content-wrapper{position:relative}.visual-manager-modal__item-name ::ng-deep .input-field,.visual-manager-modal__item-name ::ng-deep .input-field-readonly{padding-right:2.5em}.visual-manager-modal__action-button{position:absolute;right:.4em;top:50%;transform:translateY(-50%);background:linear-gradient(174.9deg,#595859cf -26.99%,#29252dcf 22.7% 100.94%);border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .2s;width:3em;height:3em;border-radius:50%;pointer-events:auto;-webkit-backdrop-filter:blur(.5326657891px);backdrop-filter:blur(.5326657891px);box-shadow:7.24px 6.58px 17.77px 1.65px #121212a6,0 0 2.45px #0000004d}.visual-manager-modal__action-button:active{opacity:.9;box-shadow:inset 2px 2px 4px #0006,inset -2px -2px 4px #ffffff14}.visual-manager-modal__action-button1{position:absolute;right:.4em;top:50%;transform:translateY(-50%);background:linear-gradient(174.9deg,#69686acf 28.4%,#29252dcf 92.06% 100.94%);border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .2s;width:3em;height:3em;border-radius:50%;pointer-events:auto;-webkit-backdrop-filter:blur(.5326657891px);backdrop-filter:blur(.5326657891px);box-shadow:0 2.56px 2.56px .82px #0000006e,0 0 10.65px 5.33px #4242429c}.visual-manager-modal__action-icon{width:1em;height:1em;display:block}.visual-manager-modal__drag-handle{width:1em;height:1em;cursor:grab;flex-shrink:0;opacity:.6;-webkit-user-select:none;user-select:none}.visual-manager-modal__drag-handle:active{cursor:grabbing}.visual-manager-modal__item.dragging{opacity:.5}.visual-manager-modal__footer{display:flex;justify-content:space-between;gap:1em;padding-top:1em;border-top:1px solid rgba(255,255,255,.1);margin-top:auto}.visual-manager-modal__footer lib-secondary-btn,.visual-manager-modal__footer lib-primary-btn{flex:1}.visual-manager-modal__content::-webkit-scrollbar{width:.5em}.visual-manager-modal__content::-webkit-scrollbar-track{background:#0003;border-radius:.25em}.visual-manager-modal__content::-webkit-scrollbar-thumb{background:#fff3;border-radius:.25em}.visual-manager-modal__content::-webkit-scrollbar-thumb:hover{background:#ffffff4d}@media (max-width: 768px){:host{font-size:calc(clamp(0px,3.2dvw,15px)*.8)}.visual-manager-modal{width:90%;padding:1.25em 1.5em}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2.PrimaryBtnComponent, selector: "lib-primary-btn", inputs: ["hoverOutline", "disabled", "type", "form", "label", "showArrowIcon", "disableTextShadow", "loading$"] }, { kind: "component", type: i2.SecondaryBtnComponent, selector: "lib-secondary-btn", inputs: ["hoverOutline", "disabled", "type", "form", "label", "showArrowIcon", "disableTextShadow", "loading$"] }, { kind: "ngmodule", type: InputFieldModule }, { kind: "component", type: i2.InputFieldComponent, selector: "lib-input-field,[lib-input-field]", inputs: ["name", "autocomplete", "label", "placeholder", "type", "readonly", "focus", "enableGoogleAddress", "locationAutocompleteConfig", "defaultLocation", "mask", "prefix", "suffix", "maxLength", "value", "address", "textarea", "resize", "counter", "patterns", "trimWhiteSpace", "disabled"], outputs: ["mapError", "locationChange", "keyDown", "onBlur"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LibVisualManagerModalComponent, isStandalone: true, selector: "lib-visual-manager-modal", inputs: { data: "data" }, outputs: { event: "event" }, providers: [LibModalComponent], viewQueries: [{ propertyName: "childModalElementRef", first: true, predicate: ["childModalElementRef"], descendants: true }], ngImport: i0, template: "<div class=\"visual-manager-modal\" #childModalElementRef>\n  <header class=\"visual-manager-modal__header\">\n    <div class=\"visual-manager-modal__header-left\">\n      <img class=\"visual-manager-modal__filter-icon\" src=\"assets/icons/filter-icon.svg\" alt=\"Filter icon\" />\n      <h2 class=\"visual-manager-modal__title\">{{ 'VISUAL_MANAGER_MODAL.TITLE' | translate }}</h2>\n    </div>\n    <button class=\"visual-manager-modal__close-button\" (click)=\"close()\">\n      <img class=\"visual-manager-modal__close-icon\" src=\"assets/icons/close-icon.svg\" alt=\"Close\" />\n    </button>\n  </header>\n\n  <div class=\"visual-manager-modal__content\">\n    <!-- Selected Items Section -->\n    @if (selectedItems.length > 0) {\n      <div class=\"visual-manager-modal__section\">\n        <ol class=\"visual-manager-modal__list visual-manager-modal__list--ordered\">\n          @for (preference of selectedItems; track preference.id; let i = $index) {\n            <li class=\"visual-manager-modal__item\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, preference, true)\">\n              <span class=\"visual-manager-modal__item-number\">{{ i + 1 }}</span>\n              <div class=\"visual-manager-modal__input-wrapper\">\n                <lib-input-field\n                  class=\"visual-manager-modal__item-name\"\n                  [formControl]=\"getPreferenceControl(preference.id)\"\n                  (valueChange)=\"onPreferenceNameChange(preference, $event)\"\n                ></lib-input-field>\n                <button class=\"visual-manager-modal__action-button1\"></button>\n                <button class=\"visual-manager-modal__action-button\" (click)=\"togglePreference(preference, $event)\">\n                  <img class=\"visual-manager-modal__action-icon\" src=\"assets/icons/close-icon.svg\" alt=\"Remove\" />\n                </button>\n              </div>\n              <img\n                class=\"visual-manager-modal__drag-handle\"\n                src=\"assets/icons/drag-handle.svg\"\n                alt=\"Drag handle\"\n                draggable=\"true\"\n                (dragstart)=\"onDragStart($event, preference, true)\"\n                (dragend)=\"onDragEnd($event)\"\n              />\n            </li>\n          }\n        </ol>\n      </div>\n    }\n\n    <!-- Separator -->\n    @if (selectedItems.length > 0 && deselectedItems.length > 0) {\n      <div class=\"visual-manager-modal__separator\"></div>\n    }\n\n    <!-- Deselected Items Section -->\n    @if (deselectedItems.length > 0) {\n      <div class=\"visual-manager-modal__section\">\n        <ul class=\"visual-manager-modal__list\">\n          @for (preference of deselectedItems; track preference.id) {\n            <li class=\"visual-manager-modal__item\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, preference, false)\">\n              <div class=\"visual-manager-modal__input-wrapper\">\n                <lib-input-field\n                  class=\"visual-manager-modal__item-name\"\n                  [formControl]=\"getPreferenceControl(preference.id)\"\n                  (valueChange)=\"onPreferenceNameChange(preference, $event)\"\n                ></lib-input-field>\n                <button class=\"visual-manager-modal__action-button1\"></button>\n                <button class=\"visual-manager-modal__action-button\" (click)=\"togglePreference(preference, $event)\">\n                  <img class=\"visual-manager-modal__action-icon\" src=\"assets/icons/plus.svg\" alt=\"Add\" />\n                </button>\n              </div>\n              <img\n                class=\"visual-manager-modal__drag-handle\"\n                src=\"assets/icons/drag-handle.svg\"\n                alt=\"Drag handle\"\n                draggable=\"true\"\n                (dragstart)=\"onDragStart($event, preference, false)\"\n                (dragend)=\"onDragEnd($event)\"\n              />\n            </li>\n          }\n        </ul>\n      </div>\n    }\n  </div>\n\n  <footer class=\"visual-manager-modal__footer\">\n    <lib-secondary-btn (click)=\"reset()\">\n      {{ 'VISUAL_MANAGER_MODAL.RESET' | translate }}\n    </lib-secondary-btn>\n    <lib-primary-btn (click)=\"apply()\">\n      {{ 'VISUAL_MANAGER_MODAL.APPLY' | translate }}\n    </lib-primary-btn>\n  </footer>\n</div>\n", styles: [":host{font-size:clamp(0px,3.2dvw,15px)}:host *{box-sizing:border-box}.visual-manager-modal{-webkit-backdrop-filter:blur(.625em);backdrop-filter:blur(.625em);background:linear-gradient(180deg,#323133,#1f1e20);color:#fff;padding:1.5em 2em;width:28.125em;margin:0 auto;border-radius:1.5625em;font-family:Gilroy;box-shadow:.5em .5em 1em #00000080,-.5em -.5em 1em #ffffff0d;position:relative;display:flex;flex-direction:column}.visual-manager-modal__header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.5em;padding-bottom:1em;border-bottom:1px solid rgba(255,255,255,.1);gap:.75em}.visual-manager-modal__header-left{display:flex;flex-direction:column;align-items:center;gap:.5em;flex:1}.visual-manager-modal__filter-icon{width:3em;height:3em;cursor:pointer;flex-shrink:0}.visual-manager-modal__title{font-size:1.25em;font-weight:500;font-family:Gilroy;margin:0;color:#fff}.visual-manager-modal__close-button{background:transparent;border:none;cursor:pointer;padding:.25em;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s}.visual-manager-modal__close-button:hover{background:#ffffff1a}.visual-manager-modal__close-icon{width:2em;height:2em;filter:brightness(0) saturate(100%) invert(39%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(98%) contrast(105%)}.visual-manager-modal__content{margin-bottom:1.5em;max-height:50vh;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:1em}.visual-manager-modal__section{display:flex;flex-direction:column;gap:.75em}.visual-manager-modal__section-label{font-size:.9em;font-weight:500;color:#4a9eff;margin-bottom:.25em}.visual-manager-modal__separator{height:1px;background:#ffffff1a;margin:.5em 0}.visual-manager-modal__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75em}.visual-manager-modal__list--ordered{list-style:none}.visual-manager-modal__item{display:flex;align-items:center;gap:.5em;width:100%}.visual-manager-modal__item-number{display:flex;align-items:center;justify-content:center;min-width:1.5em;height:1.5em;font-size:.9em;font-weight:500;color:#ffffffb3;flex-shrink:0}.visual-manager-modal__input-wrapper{position:relative;flex:1;min-width:0}.visual-manager-modal__item-name{width:100%}.visual-manager-modal__item-name ::ng-deep .content-wrapper{position:relative}.visual-manager-modal__item-name ::ng-deep .input-field,.visual-manager-modal__item-name ::ng-deep .input-field-readonly{padding-right:2.5em}.visual-manager-modal__action-button{position:absolute;right:.4em;top:50%;transform:translateY(-50%);background:linear-gradient(174.9deg,#595859cf -26.99%,#29252dcf 22.7% 100.94%);border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .2s;width:3em;height:3em;border-radius:50%;pointer-events:auto;-webkit-backdrop-filter:blur(.5326657891px);backdrop-filter:blur(.5326657891px);box-shadow:7.24px 6.58px 17.77px 1.65px #121212a6,0 0 2.45px #0000004d}.visual-manager-modal__action-button:active{opacity:.9;box-shadow:inset 2px 2px 4px #0006,inset -2px -2px 4px #ffffff14}.visual-manager-modal__action-button1{position:absolute;right:.4em;top:50%;transform:translateY(-50%);background:linear-gradient(174.9deg,#69686acf 28.4%,#29252dcf 92.06% 100.94%);border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .2s;width:3em;height:3em;border-radius:50%;pointer-events:auto;-webkit-backdrop-filter:blur(.5326657891px);backdrop-filter:blur(.5326657891px);box-shadow:0 2.56px 2.56px .82px #0000006e,0 0 10.65px 5.33px #4242429c}.visual-manager-modal__action-icon{width:1em;height:1em;display:block}.visual-manager-modal__drag-handle{width:1em;height:1em;cursor:grab;flex-shrink:0;opacity:.6;-webkit-user-select:none;user-select:none}.visual-manager-modal__drag-handle:active{cursor:grabbing}.visual-manager-modal__item.dragging{opacity:.5}.visual-manager-modal__footer{display:flex;justify-content:space-between;gap:1em;padding-top:1em;border-top:1px solid rgba(255,255,255,.1);margin-top:auto}.visual-manager-modal__footer lib-secondary-btn,.visual-manager-modal__footer lib-primary-btn{flex:1}.visual-manager-modal__content::-webkit-scrollbar{width:.5em}.visual-manager-modal__content::-webkit-scrollbar-track{background:#0003;border-radius:.25em}.visual-manager-modal__content::-webkit-scrollbar-thumb{background:#fff3;border-radius:.25em}.visual-manager-modal__content::-webkit-scrollbar-thumb:hover{background:#ffffff4d}@media (max-width: 768px){:host{font-size:calc(clamp(0px,3.2dvw,15px)*.8)}.visual-manager-modal{width:90%;padding:1.25em 1.5em}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2.PrimaryBtnComponent, selector: "lib-primary-btn", inputs: ["hoverOutline", "disabled", "type", "form", "label", "showArrowIcon", "disableTextShadow", "loading$"] }, { kind: "component", type: i2.SecondaryBtnComponent, selector: "lib-secondary-btn", inputs: ["hoverOutline", "disabled", "type", "form", "label", "showArrowIcon", "disableTextShadow", "loading$"] }, { kind: "ngmodule", type: InputFieldModule }, { kind: "component", type: i2.InputFieldComponent, selector: "lib-input-field,[lib-input-field]", inputs: ["name", "autocomplete", "label", "placeholder", "type", "readonly", "focus", "enableGoogleAddress", "locationAutocompleteConfig", "defaultLocation", "mask", "prefix", "suffix", "maxLength", "value", "address", "textarea", "resize", "counter", "patterns", "trimWhiteSpace", "disabled"], outputs: ["mapError", "locationChange", "keyDown", "onBlur"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibVisualManagerModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-visual-manager-modal', standalone: true, imports: [CommonModule, TranslateModule, ButtonsModule, InputFieldModule, ReactiveFormsModule], providers: [LibModalComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"visual-manager-modal\" #childModalElementRef>\n  <header class=\"visual-manager-modal__header\">\n    <div class=\"visual-manager-modal__header-left\">\n      <img class=\"visual-manager-modal__filter-icon\" src=\"assets/icons/filter-icon.svg\" alt=\"Filter icon\" />\n      <h2 class=\"visual-manager-modal__title\">{{ 'VISUAL_MANAGER_MODAL.TITLE' | translate }}</h2>\n    </div>\n    <button class=\"visual-manager-modal__close-button\" (click)=\"close()\">\n      <img class=\"visual-manager-modal__close-icon\" src=\"assets/icons/close-icon.svg\" alt=\"Close\" />\n    </button>\n  </header>\n\n  <div class=\"visual-manager-modal__content\">\n    <!-- Selected Items Section -->\n    @if (selectedItems.length > 0) {\n      <div class=\"visual-manager-modal__section\">\n        <ol class=\"visual-manager-modal__list visual-manager-modal__list--ordered\">\n          @for (preference of selectedItems; track preference.id; let i = $index) {\n            <li \n              class=\"visual-manager-modal__item\"\n              (dragover)=\"onDragOver($event)\"\n              (drop)=\"onDrop($event, preference, true)\"\n            >\n              <span class=\"visual-manager-modal__item-number\">{{ i + 1 }}</span>\n              <div class=\"visual-manager-modal__input-wrapper\">\n                <lib-input-field\n                  class=\"visual-manager-modal__item-name\"\n                  [formControl]=\"getPreferenceControl(preference.id)\"\n                  (valueChange)=\"onPreferenceNameChange(preference, $event)\"\n                ></lib-input-field>\n                <button class=\"visual-manager-modal__action-button1\" > </button>\n                <button\n                  class=\"visual-manager-modal__action-button\"\n                  (click)=\"togglePreference(preference, $event)\"\n                >\n                  <img class=\"visual-manager-modal__action-icon\" src=\"assets/icons/close-icon.svg\" alt=\"Remove\" />\n                </button>\n              </div>\n              <img \n                class=\"visual-manager-modal__drag-handle\" \n                src=\"assets/icons/drag-handle.svg\" \n                alt=\"Drag handle\"\n                draggable=\"true\"\n                (dragstart)=\"onDragStart($event, preference, true)\"\n                (dragend)=\"onDragEnd($event)\"\n              />\n            </li>\n          }\n        </ol>\n      </div>\n    }\n\n    <!-- Separator -->\n    @if (selectedItems.length > 0 && deselectedItems.length > 0) {\n      <div class=\"visual-manager-modal__separator\"></div>\n    }\n\n    <!-- Deselected Items Section -->\n    @if (deselectedItems.length > 0) {\n      <div class=\"visual-manager-modal__section\">\n        <ul class=\"visual-manager-modal__list\">\n          @for (preference of deselectedItems; track preference.id) {\n            <li \n              class=\"visual-manager-modal__item\"\n              (dragover)=\"onDragOver($event)\"\n              (drop)=\"onDrop($event, preference, false)\"\n            >\n              <div class=\"visual-manager-modal__input-wrapper\">\n                <lib-input-field\n                  class=\"visual-manager-modal__item-name\"\n                  [formControl]=\"getPreferenceControl(preference.id)\"\n                  (valueChange)=\"onPreferenceNameChange(preference, $event)\"\n                ></lib-input-field>\n                <button class=\"visual-manager-modal__action-button1\" > </button>\n                <button\n                  class=\"visual-manager-modal__action-button\"\n                  (click)=\"togglePreference(preference, $event)\"\n                >\n                  <img class=\"visual-manager-modal__action-icon\" src=\"assets/icons/plus.svg\" alt=\"Add\" />\n                </button>\n              </div>\n              <img \n                class=\"visual-manager-modal__drag-handle\" \n                src=\"assets/icons/drag-handle.svg\" \n                alt=\"Drag handle\"\n                draggable=\"true\"\n                (dragstart)=\"onDragStart($event, preference, false)\"\n                (dragend)=\"onDragEnd($event)\"\n              />\n            </li>\n          }\n        </ul>\n      </div>\n    }\n  </div>\n\n  <footer class=\"visual-manager-modal__footer\">\n    <lib-secondary-btn (click)=\"reset()\">\n      {{ 'VISUAL_MANAGER_MODAL.RESET' | translate }}\n    </lib-secondary-btn>\n    <lib-primary-btn (click)=\"apply()\">\n      {{ 'VISUAL_MANAGER_MODAL.APPLY' | translate }}\n    </lib-primary-btn>\n  </footer>\n</div>\n\n", styles: [":host{font-size:clamp(0px,3.2dvw,15px)}:host *{box-sizing:border-box}.visual-manager-modal{-webkit-backdrop-filter:blur(.625em);backdrop-filter:blur(.625em);background:linear-gradient(180deg,#323133,#1f1e20);color:#fff;padding:1.5em 2em;width:28.125em;margin:0 auto;border-radius:1.5625em;font-family:Gilroy;box-shadow:.5em .5em 1em #00000080,-.5em -.5em 1em #ffffff0d;position:relative;display:flex;flex-direction:column}.visual-manager-modal__header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.5em;padding-bottom:1em;border-bottom:1px solid rgba(255,255,255,.1);gap:.75em}.visual-manager-modal__header-left{display:flex;flex-direction:column;align-items:center;gap:.5em;flex:1}.visual-manager-modal__filter-icon{width:3em;height:3em;cursor:pointer;flex-shrink:0}.visual-manager-modal__title{font-size:1.25em;font-weight:500;font-family:Gilroy;margin:0;color:#fff}.visual-manager-modal__close-button{background:transparent;border:none;cursor:pointer;padding:.25em;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s}.visual-manager-modal__close-button:hover{background:#ffffff1a}.visual-manager-modal__close-icon{width:2em;height:2em;filter:brightness(0) saturate(100%) invert(39%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(98%) contrast(105%)}.visual-manager-modal__content{margin-bottom:1.5em;max-height:50vh;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:1em}.visual-manager-modal__section{display:flex;flex-direction:column;gap:.75em}.visual-manager-modal__section-label{font-size:.9em;font-weight:500;color:#4a9eff;margin-bottom:.25em}.visual-manager-modal__separator{height:1px;background:#ffffff1a;margin:.5em 0}.visual-manager-modal__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75em}.visual-manager-modal__list--ordered{list-style:none}.visual-manager-modal__item{display:flex;align-items:center;gap:.5em;width:100%}.visual-manager-modal__item-number{display:flex;align-items:center;justify-content:center;min-width:1.5em;height:1.5em;font-size:.9em;font-weight:500;color:#ffffffb3;flex-shrink:0}.visual-manager-modal__input-wrapper{position:relative;flex:1;min-width:0}.visual-manager-modal__item-name{width:100%}.visual-manager-modal__item-name ::ng-deep .content-wrapper{position:relative}.visual-manager-modal__item-name ::ng-deep .input-field,.visual-manager-modal__item-name ::ng-deep .input-field-readonly{padding-right:2.5em}.visual-manager-modal__action-button{position:absolute;right:.4em;top:50%;transform:translateY(-50%);background:linear-gradient(174.9deg,#595859cf -26.99%,#29252dcf 22.7% 100.94%);border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .2s;width:3em;height:3em;border-radius:50%;pointer-events:auto;-webkit-backdrop-filter:blur(.5326657891px);backdrop-filter:blur(.5326657891px);box-shadow:7.24px 6.58px 17.77px 1.65px #121212a6,0 0 2.45px #0000004d}.visual-manager-modal__action-button:active{opacity:.9;box-shadow:inset 2px 2px 4px #0006,inset -2px -2px 4px #ffffff14}.visual-manager-modal__action-button1{position:absolute;right:.4em;top:50%;transform:translateY(-50%);background:linear-gradient(174.9deg,#69686acf 28.4%,#29252dcf 92.06% 100.94%);border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .2s;width:3em;height:3em;border-radius:50%;pointer-events:auto;-webkit-backdrop-filter:blur(.5326657891px);backdrop-filter:blur(.5326657891px);box-shadow:0 2.56px 2.56px .82px #0000006e,0 0 10.65px 5.33px #4242429c}.visual-manager-modal__action-icon{width:1em;height:1em;display:block}.visual-manager-modal__drag-handle{width:1em;height:1em;cursor:grab;flex-shrink:0;opacity:.6;-webkit-user-select:none;user-select:none}.visual-manager-modal__drag-handle:active{cursor:grabbing}.visual-manager-modal__item.dragging{opacity:.5}.visual-manager-modal__footer{display:flex;justify-content:space-between;gap:1em;padding-top:1em;border-top:1px solid rgba(255,255,255,.1);margin-top:auto}.visual-manager-modal__footer lib-secondary-btn,.visual-manager-modal__footer lib-primary-btn{flex:1}.visual-manager-modal__content::-webkit-scrollbar{width:.5em}.visual-manager-modal__content::-webkit-scrollbar-track{background:#0003;border-radius:.25em}.visual-manager-modal__content::-webkit-scrollbar-thumb{background:#fff3;border-radius:.25em}.visual-manager-modal__content::-webkit-scrollbar-thumb:hover{background:#ffffff4d}@media (max-width: 768px){:host{font-size:calc(clamp(0px,3.2dvw,15px)*.8)}.visual-manager-modal{width:90%;padding:1.25em 1.5em}}\n"] }]
+            args: [{ selector: 'lib-visual-manager-modal', standalone: true, imports: [CommonModule, TranslateModule, ButtonsModule, InputFieldModule, ReactiveFormsModule], providers: [LibModalComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"visual-manager-modal\" #childModalElementRef>\n  <header class=\"visual-manager-modal__header\">\n    <div class=\"visual-manager-modal__header-left\">\n      <img class=\"visual-manager-modal__filter-icon\" src=\"assets/icons/filter-icon.svg\" alt=\"Filter icon\" />\n      <h2 class=\"visual-manager-modal__title\">{{ 'VISUAL_MANAGER_MODAL.TITLE' | translate }}</h2>\n    </div>\n    <button class=\"visual-manager-modal__close-button\" (click)=\"close()\">\n      <img class=\"visual-manager-modal__close-icon\" src=\"assets/icons/close-icon.svg\" alt=\"Close\" />\n    </button>\n  </header>\n\n  <div class=\"visual-manager-modal__content\">\n    <!-- Selected Items Section -->\n    @if (selectedItems.length > 0) {\n      <div class=\"visual-manager-modal__section\">\n        <ol class=\"visual-manager-modal__list visual-manager-modal__list--ordered\">\n          @for (preference of selectedItems; track preference.id; let i = $index) {\n            <li class=\"visual-manager-modal__item\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, preference, true)\">\n              <span class=\"visual-manager-modal__item-number\">{{ i + 1 }}</span>\n              <div class=\"visual-manager-modal__input-wrapper\">\n                <lib-input-field\n                  class=\"visual-manager-modal__item-name\"\n                  [formControl]=\"getPreferenceControl(preference.id)\"\n                  (valueChange)=\"onPreferenceNameChange(preference, $event)\"\n                ></lib-input-field>\n                <button class=\"visual-manager-modal__action-button1\"></button>\n                <button class=\"visual-manager-modal__action-button\" (click)=\"togglePreference(preference, $event)\">\n                  <img class=\"visual-manager-modal__action-icon\" src=\"assets/icons/close-icon.svg\" alt=\"Remove\" />\n                </button>\n              </div>\n              <img\n                class=\"visual-manager-modal__drag-handle\"\n                src=\"assets/icons/drag-handle.svg\"\n                alt=\"Drag handle\"\n                draggable=\"true\"\n                (dragstart)=\"onDragStart($event, preference, true)\"\n                (dragend)=\"onDragEnd($event)\"\n              />\n            </li>\n          }\n        </ol>\n      </div>\n    }\n\n    <!-- Separator -->\n    @if (selectedItems.length > 0 && deselectedItems.length > 0) {\n      <div class=\"visual-manager-modal__separator\"></div>\n    }\n\n    <!-- Deselected Items Section -->\n    @if (deselectedItems.length > 0) {\n      <div class=\"visual-manager-modal__section\">\n        <ul class=\"visual-manager-modal__list\">\n          @for (preference of deselectedItems; track preference.id) {\n            <li class=\"visual-manager-modal__item\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, preference, false)\">\n              <div class=\"visual-manager-modal__input-wrapper\">\n                <lib-input-field\n                  class=\"visual-manager-modal__item-name\"\n                  [formControl]=\"getPreferenceControl(preference.id)\"\n                  (valueChange)=\"onPreferenceNameChange(preference, $event)\"\n                ></lib-input-field>\n                <button class=\"visual-manager-modal__action-button1\"></button>\n                <button class=\"visual-manager-modal__action-button\" (click)=\"togglePreference(preference, $event)\">\n                  <img class=\"visual-manager-modal__action-icon\" src=\"assets/icons/plus.svg\" alt=\"Add\" />\n                </button>\n              </div>\n              <img\n                class=\"visual-manager-modal__drag-handle\"\n                src=\"assets/icons/drag-handle.svg\"\n                alt=\"Drag handle\"\n                draggable=\"true\"\n                (dragstart)=\"onDragStart($event, preference, false)\"\n                (dragend)=\"onDragEnd($event)\"\n              />\n            </li>\n          }\n        </ul>\n      </div>\n    }\n  </div>\n\n  <footer class=\"visual-manager-modal__footer\">\n    <lib-secondary-btn (click)=\"reset()\">\n      {{ 'VISUAL_MANAGER_MODAL.RESET' | translate }}\n    </lib-secondary-btn>\n    <lib-primary-btn (click)=\"apply()\">\n      {{ 'VISUAL_MANAGER_MODAL.APPLY' | translate }}\n    </lib-primary-btn>\n  </footer>\n</div>\n", styles: [":host{font-size:clamp(0px,3.2dvw,15px)}:host *{box-sizing:border-box}.visual-manager-modal{-webkit-backdrop-filter:blur(.625em);backdrop-filter:blur(.625em);background:linear-gradient(180deg,#323133,#1f1e20);color:#fff;padding:1.5em 2em;width:28.125em;margin:0 auto;border-radius:1.5625em;font-family:Gilroy;box-shadow:.5em .5em 1em #00000080,-.5em -.5em 1em #ffffff0d;position:relative;display:flex;flex-direction:column}.visual-manager-modal__header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.5em;padding-bottom:1em;border-bottom:1px solid rgba(255,255,255,.1);gap:.75em}.visual-manager-modal__header-left{display:flex;flex-direction:column;align-items:center;gap:.5em;flex:1}.visual-manager-modal__filter-icon{width:3em;height:3em;cursor:pointer;flex-shrink:0}.visual-manager-modal__title{font-size:1.25em;font-weight:500;font-family:Gilroy;margin:0;color:#fff}.visual-manager-modal__close-button{background:transparent;border:none;cursor:pointer;padding:.25em;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s}.visual-manager-modal__close-button:hover{background:#ffffff1a}.visual-manager-modal__close-icon{width:2em;height:2em;filter:brightness(0) saturate(100%) invert(39%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(98%) contrast(105%)}.visual-manager-modal__content{margin-bottom:1.5em;max-height:50vh;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:1em}.visual-manager-modal__section{display:flex;flex-direction:column;gap:.75em}.visual-manager-modal__section-label{font-size:.9em;font-weight:500;color:#4a9eff;margin-bottom:.25em}.visual-manager-modal__separator{height:1px;background:#ffffff1a;margin:.5em 0}.visual-manager-modal__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75em}.visual-manager-modal__list--ordered{list-style:none}.visual-manager-modal__item{display:flex;align-items:center;gap:.5em;width:100%}.visual-manager-modal__item-number{display:flex;align-items:center;justify-content:center;min-width:1.5em;height:1.5em;font-size:.9em;font-weight:500;color:#ffffffb3;flex-shrink:0}.visual-manager-modal__input-wrapper{position:relative;flex:1;min-width:0}.visual-manager-modal__item-name{width:100%}.visual-manager-modal__item-name ::ng-deep .content-wrapper{position:relative}.visual-manager-modal__item-name ::ng-deep .input-field,.visual-manager-modal__item-name ::ng-deep .input-field-readonly{padding-right:2.5em}.visual-manager-modal__action-button{position:absolute;right:.4em;top:50%;transform:translateY(-50%);background:linear-gradient(174.9deg,#595859cf -26.99%,#29252dcf 22.7% 100.94%);border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .2s;width:3em;height:3em;border-radius:50%;pointer-events:auto;-webkit-backdrop-filter:blur(.5326657891px);backdrop-filter:blur(.5326657891px);box-shadow:7.24px 6.58px 17.77px 1.65px #121212a6,0 0 2.45px #0000004d}.visual-manager-modal__action-button:active{opacity:.9;box-shadow:inset 2px 2px 4px #0006,inset -2px -2px 4px #ffffff14}.visual-manager-modal__action-button1{position:absolute;right:.4em;top:50%;transform:translateY(-50%);background:linear-gradient(174.9deg,#69686acf 28.4%,#29252dcf 92.06% 100.94%);border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .2s;width:3em;height:3em;border-radius:50%;pointer-events:auto;-webkit-backdrop-filter:blur(.5326657891px);backdrop-filter:blur(.5326657891px);box-shadow:0 2.56px 2.56px .82px #0000006e,0 0 10.65px 5.33px #4242429c}.visual-manager-modal__action-icon{width:1em;height:1em;display:block}.visual-manager-modal__drag-handle{width:1em;height:1em;cursor:grab;flex-shrink:0;opacity:.6;-webkit-user-select:none;user-select:none}.visual-manager-modal__drag-handle:active{cursor:grabbing}.visual-manager-modal__item.dragging{opacity:.5}.visual-manager-modal__footer{display:flex;justify-content:space-between;gap:1em;padding-top:1em;border-top:1px solid rgba(255,255,255,.1);margin-top:auto}.visual-manager-modal__footer lib-secondary-btn,.visual-manager-modal__footer lib-primary-btn{flex:1}.visual-manager-modal__content::-webkit-scrollbar{width:.5em}.visual-manager-modal__content::-webkit-scrollbar-track{background:#0003;border-radius:.25em}.visual-manager-modal__content::-webkit-scrollbar-thumb{background:#fff3;border-radius:.25em}.visual-manager-modal__content::-webkit-scrollbar-thumb:hover{background:#ffffff4d}@media (max-width: 768px){:host{font-size:calc(clamp(0px,3.2dvw,15px)*.8)}.visual-manager-modal{width:90%;padding:1.25em 1.5em}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i2.PopupModalService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -4391,11 +4379,11 @@ class LibClientDashboardComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibClientDashboardComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LibClientDashboardComponent, isStandalone: true, selector: "lib-client-dashboard", inputs: { config: "config", agendaAdsData: "agendaAdsData" }, outputs: { addMessage: "addMessage", getMessages: "getMessages", bookEvent: "bookEvent", removeSuggestion: "removeSuggestion", activeIndexChange: "activeIndexChange", handleClosedAlert: "handleClosedAlert", handleAppearPopup: "handleAppearPopup" }, ngImport: i0, template: "<!-- Horizontal Agenda -->\n<div class=\"agenda-handler\" [class.height-zero]=\"isMinimizeVisual\" [class.has-ads]=\"config?.agendaAdsTemplate\">\n  <h3 class=\"agenda-title\">\n    {{ 'CLIENT_DASHBOARD.TITLES.UPCOMING_DATES' | translate }}\n    <span (click)=\"onHandleAppearPopup(alertStatusFields.upcomingDates)\"><img [width]=\"12\" [height]=\"12\" [src]=\"assetPaths.defaultIcon\" [alt]=\"item?.label + ' icon'\" /></span>\n  </h3>\n  <lib-agenda [events]=\"config?.events\" [adsTemplate]=\"config?.agendaAdsTemplate\" [agendaAdsData]=\"agendaAdsData\"></lib-agenda>\n  @if (config.alertStatus.upcomingDates) {\n    <div class=\"alert-popup-agenda\" [class.opacity-zero]=\"isMinimizeVisual\">\n      <lib-alert-popup\n        [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.UPCOMING_DATES.TITLE' | translate\"\n        [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.UPCOMING_DATES.DESCRIPTION' | translate\"\n        (closed)=\"\n          onClosedAlert({\n            event: $event,\n            field: alertStatusFields.upcomingDates,\n          })\n        \"\n      ></lib-alert-popup>\n    </div>\n  }\n</div>\n<!-- Scheduler - Trait - Spider - Handoff -->\n<div\n  (click)=\"onClick($event)\"\n  [class.height-zero-activated]=\"isMinimizeVisual\"\n  (touchstart)=\"onTouchStart($event)\"\n  [class.has-ads]=\"!!config?.agendaAdsTemplate?.elementRef\" class=\"client-home__container\">\n  <lib-dashboard-swipeable-tabs\n    [activeIndex]=\"config?.activeTabIndex\"\n    [thumbsSwiperOptions]=\"dashboardThumbsSwiperOptions\"\n    [mainSwiperOptions]=\"mainSwiperOptions\"\n    [slideContentMaxHeight]=\"config?.slideContentMaxHeight\"\n    [bottomThumbs]=\"false\"\n    [generalSwiperHeight]=\"'100%'\"\n    [mainSwiperHeight]=\"'calc(100% - 34px)'\"\n    [thumbsSwiperHeight]=\"'34px'\"\n    [subMainSwiperHeight]=\"'100%'\"\n    (activeIndexChange)=\"onActiveTabIndexChange($event)\"\n  >\n    <ng-container thumb-slides>\n      @for (item of items; let i = $index; track item) {\n        <swiper-slide class=\"main-tab\">\n          <span\n            class=\"tab\"\n            [class.active]=\"i === config.activeTabIndex\"\n            [class.disabled]=\"item?.key === 'CHAT_HANDOFF' && !(config?.clientMatches$ | async)?.[config?.activeIndex]?.showHandoff && !config.default\"\n          >\n            {{ item?.label | translate }}\n            @if (i === config.activeTabIndex) {\n              <ng-container>\n                <img\n                  [width]=\"12\"\n                  [height]=\"12\"\n                  [src]=\"assetPaths.defaultIcon\"\n                  [alt]=\"item?.label + ' info icon'\"\n                  (click)=\"item.onClickInfo()\"\n                />\n                <img\n                  [width]=\"12\"\n                  [height]=\"12\"\n                  [src]=\"assetPaths.settingsIcon\"\n                  alt=\"Settings icon\"\n                  (click)=\"onSettingsClick(); $event.stopPropagation()\"\n                  style=\"cursor: pointer;\"\n                />\n              </ng-container>\n            }\n          </span>\n        </swiper-slide>\n      }\n    </ng-container>\n    <ng-container main-slides>\n      <swiper-slide class=\"no-swiping-selector swiper__scheduler\">\n        <div class=\"swiper__client-home\">\n          @if (config.alertStatus.chatMeetupAgenda) {\n            <div class=\"alert-popup-client-scheduler\">\n              <lib-alert-popup\n                [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.CHAT_MEETUP_AGENDA.TITLE' | translate\"\n                [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.CHAT_MEETUP_AGENDA.DESCRIPTION' | translate\"\n                (closed)=\"\n                  onClosedAlert({\n                    event: $event,\n                    field: alertStatusFields.chatMeetupAgenda,\n                  })\n                \"\n              ></lib-alert-popup>\n            </div>\n          }\n          <lib-client-home\n            [config]=\"{\n              schedulerAdsTemplate: config?.schedulerAdsTemplate,\n              schedulerTabAdsTemplate: config?.schedulerTabAdsTemplate,\n              chatAdsTemplate: config?.chatAdsTemplate,\n              chatTabAdsTemplate: config?.chatTabAdsTemplate,\n              traitVisualAdsTemplate: config?.traitVisualAdsTemplate,\n              activeIndex: config?.activeIndex,\n              clientMatches$: config?.clientMatches$,\n              schedulers$: config?.schedulers$,\n              component: components.ChatScheduler,\n              default: config?.default,\n              thumbsSwiperOptions: clientHomeThumbsSwiperOptions,\n              alertStatus: config.alertStatus,\n              bottomThumbs: true,\n              showValueProportionLabel: false,\n              hideProgressBar: true,\n            }\"\n            (bookEvent)=\"bookEvent?.emit($event)\"\n            (removeSuggestion)=\"removeSuggestion?.emit($event)\"\n            (addMessage)=\"handleNewMessage($event)\"\n            (getMessages)=\"getMessages.emit($event)\"\n            (activeIndexChange)=\"onActiveProspectChange($event)\"\n            (handleClosedAlert)=\"onClosedAlert($event)\"\n            (handleAppearPopup)=\"onHandleAppearPopup($event)\"\n          ></lib-client-home>\n        </div>\n      </swiper-slide>\n      <swiper-slide class=\"no-swiping-selector\">\n        <div class=\"swiper__client-home\">\n          @if (config.alertStatus.compatibilityProfileTrait) {\n            <div class=\"alert-popup-trait-chart\">\n              <lib-alert-popup\n                [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.FORCE_GRAPH_COMPATIBILITY.TITLE' | translate\"\n                [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.FORCE_GRAPH_COMPATIBILITY.DESCRIPTION' | translate\"\n                (closed)=\"\n                  onClosedAlert({\n                    event: $event,\n                    field: alertStatusFields.compatibilityProfileTrait,\n                  })\n                \"\n              ></lib-alert-popup>\n            </div>\n          }\n          <lib-client-home\n            [config]=\"{\n              schedulerAdsTemplate: config?.schedulerAdsTemplate,\n              schedulerTabAdsTemplate: config?.schedulerTabAdsTemplate,\n              chatAdsTemplate: config?.chatAdsTemplate,\n              chatTabAdsTemplate: config?.chatTabAdsTemplate,\n              traitVisualAdsTemplate: config?.traitVisualAdsTemplate,\n              activeIndex: config?.activeChartItem,\n              clientMatches$: config?.clientMatches$,\n              component: components.ClientMatchTraitChart,\n              default: config?.default,\n              thumbsSwiperOptions: clientHomeThumbsSwiperOptions,\n              polygonColors: config?.polygonColors,\n              spiderConfig: config?.spiderConfig,\n              alertStatus: config.alertStatus,\n              bottomThumbs: true,\n              showValueProportionLabel: false,\n              hideProgressBar: true,\n            }\"\n          ></lib-client-home>\n        </div>\n      </swiper-slide>\n      <swiper-slide class=\"no-swiping-selector\">\n        <div class=\"swiper__client-home\">\n          @if (config.alertStatus.compatibilityProfileSpider) {\n            <div class=\"alert-popup-spider-chart\">\n              <lib-alert-popup\n                [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.COMPATIBILITY_PROFILE.TITLE' | translate\"\n                [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.COMPATIBILITY_PROFILE.DESCRIPTION' | translate\"\n                (closed)=\"\n                  onClosedAlert({\n                    event: $event,\n                    field: alertStatusFields.compatibilityProfileSpider,\n                  })\n                \"\n              ></lib-alert-popup>\n            </div>\n          }\n          <div [class.spider-chart___active]=\"isMinimizeVisual\">\n            <lib-client-home\n              [config]=\"{\n                schedulerAdsTemplate: config?.schedulerAdsTemplate,\n                schedulerTabAdsTemplate: config?.schedulerTabAdsTemplate,\n                chatAdsTemplate: config?.chatAdsTemplate,\n                chatTabAdsTemplate: config?.chatTabAdsTemplate,\n                traitVisualAdsTemplate: config?.traitVisualAdsTemplate,\n                activeIndex: config?.activeChartItem,\n                clientMatches$: config?.clientMatches$,\n                component: components.ClientMatchSpiderChart,\n                default: config?.default,\n                spiderConfig: config?.spiderConfig,\n                polygonColors: config?.polygonColors,\n                alertStatus: config.alertStatus,\n                bottomThumbs: true,\n                showValueProportionLabel: false,\n                hideProgressBar: true,\n              }\"\n            ></lib-client-home>\n          </div>\n        </div>\n      </swiper-slide>\n      @if ((config?.clientMatches$ | async)?.[config?.activeIndex]?.showHandoff || config.default) {\n        <swiper-slide class=\"no-swiping-selector\">\n          <div class=\"swiper__client-home\">\n            @if (config.alertStatus.chatHandoff) {\n              <div class=\"alert-popup-chat-handoff\">\n                <lib-alert-popup\n                  [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.HANDOFF_CHAT.TITLE' | translate\"\n                  [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.HANDOFF_CHAT.DESCRIPTION' | translate\"\n                  (closed)=\"\n                    onClosedAlert({\n                      event: $event,\n                      field: alertStatusFields.chatHandoff,\n                    })\n                  \"\n                ></lib-alert-popup>\n              </div>\n            }\n            @if (config.alertStatus.chatProgress) {\n              <div class=\"alert-popup-chat-progress\">\n                <lib-alert-popup\n                  [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.CHAT_PROGRESS.TITLE' | translate\"\n                  [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.CHAT_PROGRESS.DESCRIPTION' | translate\"\n                  (closed)=\"\n                    onClosedAlert({\n                      event: $event,\n                      field: alertStatusFields.chatProgress,\n                    })\n                  \"\n                ></lib-alert-popup>\n              </div>\n            }\n            <lib-client-home\n              [config]=\"{\n                schedulerAdsTemplate: config?.schedulerAdsTemplate,\n                schedulerTabAdsTemplate: config?.schedulerTabAdsTemplate,\n                chatAdsTemplate: config?.chatAdsTemplate,\n                chatTabAdsTemplate: config?.chatTabAdsTemplate,\n                traitVisualAdsTemplate: config?.traitVisualAdsTemplate,\n                activeIndex: config?.activeIndex,\n                clientMatches$: config?.clientMatches$,\n                component: components.ChatHandoff,\n                default: config?.default,\n                alertStatus: config.alertStatus,\n                hideStatuses: true,\n                bottomThumbs: true,\n                showValueProportionLabel: false,\n                hideProgressBar: true,\n              }\"\n              (addMessage)=\"handleNewMessage($event)\"\n              (getMessages)=\"getMessages?.emit($event)\"\n              (activeIndexChange)=\"onActiveProspectChange($event)\"\n            ></lib-client-home>\n          </div>\n        </swiper-slide>\n      }\n    </ng-container>\n  </lib-dashboard-swipeable-tabs>\n</div>\n", styles: [":host{--match-percentage-font-size: 1.5em;--container-sides-shadow-width: 15px;--match-percentage-value-height: 3em;position:relative}.agenda-handler{height:133px;overflow:hidden;transition:height .5s ease;position:relative}.agenda-handler.has-ads{height:fit-content}.agenda-handler.height-zero-activated{height:100%!important}.agenda-handler .agenda-title{display:flex;width:100%;padding:0 23.5px;font-size:12px}.agenda-handler .agenda-title span{margin-left:5px}.agenda-handler lib-agenda{position:relative;display:block;width:100%;margin:auto;padding:0 5px}.agenda-handler .alert-popup-agenda{position:absolute;opacity:1;top:40px;right:40px;z-index:999;transition:opacity .3s ease}.client-home__container{height:calc(100% - 133px)}.client-home__container.has-ads{height:calc(100% - 190px)}.client-home__container>lib-swipeable-tabs{height:100%;display:block}.height-zero{height:0px!important}.opacity-zero{opacity:0!important;pointer-events:none}.tab{display:flex;gap:7px;padding:10px 30px;color:#fff9;cursor:pointer}.tab.active{color:#fff}.tab.disabled{opacity:.3;color:#fff9!important;pointer-events:none}.swiper__scheduler{height:100%}.swiper__scheduler lib-client-home{height:100%;display:block}.swiper__client-home{position:relative;width:100%;height:100%}.swiper__client-home .alert-popup-client-scheduler{position:absolute;z-index:999;top:100px;right:40px}.swiper__client-home .alert-popup-chat-handoff{position:absolute;z-index:999;top:40px;right:40px}.swiper__client-home .alert-popup-chat-progress{position:absolute;z-index:999;top:200px;right:40px}.swiper__client-home .alert-popup-trait-chart,.swiper__client-home .alert-popup-spider-chart{position:absolute;z-index:999;top:123px;right:40px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: LibChatComponentModule }, { kind: "ngmodule", type: LibAgendaModule }, { kind: "component", type: AgendaComponent, selector: "lib-agenda", inputs: ["adsTemplate", "agendaAdsData", "loading$", "startDate", "endDate", "events", "setAdsData"] }, { kind: "ngmodule", type: PipeModule }, { kind: "component", type: LibClientHomeComponent, selector: "lib-client-home", inputs: ["config"], outputs: ["activeIndexChange", "addMessage", "getMessages", "bookEvent", "removeSuggestion", "handleAppearPopup"] }, { kind: "component", type: LibDashboardSwipeableTabsComponent, selector: "lib-dashboard-swipeable-tabs", inputs: ["thumbsSwiperOptions", "mainSwiperOptions", "activeIndex", "bottomThumbs", "slideContentMaxHeight", "mainSwiperHeight", "subMainSwiperHeight", "thumbsSwiperHeight", "generalSwiperHeight"], outputs: ["activeIndexChange"] }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: AlertPopupComponent, selector: "lib-alert-popup", inputs: ["title", "description", "timeState", "number"], outputs: ["closed"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LibClientDashboardComponent, isStandalone: true, selector: "lib-client-dashboard", inputs: { config: "config", agendaAdsData: "agendaAdsData" }, outputs: { addMessage: "addMessage", getMessages: "getMessages", bookEvent: "bookEvent", removeSuggestion: "removeSuggestion", activeIndexChange: "activeIndexChange", handleClosedAlert: "handleClosedAlert", handleAppearPopup: "handleAppearPopup" }, ngImport: i0, template: "<!-- Horizontal Agenda -->\n<div class=\"agenda-handler\" [class.height-zero]=\"isMinimizeVisual\" [class.has-ads]=\"config?.agendaAdsTemplate\">\n  <h3 class=\"agenda-title\">\n    {{ 'CLIENT_DASHBOARD.TITLES.UPCOMING_DATES' | translate }}\n    <span (click)=\"onHandleAppearPopup(alertStatusFields.upcomingDates)\"><img [width]=\"12\" [height]=\"12\" [src]=\"assetPaths.defaultIcon\" [alt]=\"item?.label + ' icon'\" /></span>\n  </h3>\n  <lib-agenda [events]=\"config?.events\" [adsTemplate]=\"config?.agendaAdsTemplate\" [agendaAdsData]=\"agendaAdsData\"></lib-agenda>\n  @if (config.alertStatus.upcomingDates) {\n    <div class=\"alert-popup-agenda\" [class.opacity-zero]=\"isMinimizeVisual\">\n      <lib-alert-popup\n        [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.UPCOMING_DATES.TITLE' | translate\"\n        [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.UPCOMING_DATES.DESCRIPTION' | translate\"\n        (closed)=\"\n          onClosedAlert({\n            event: $event,\n            field: alertStatusFields.upcomingDates,\n          })\n        \"\n      ></lib-alert-popup>\n    </div>\n  }\n</div>\n<!-- Scheduler - Trait - Spider - Handoff -->\n<div\n  (click)=\"onClick($event)\"\n  [class.height-zero-activated]=\"isMinimizeVisual\"\n  (touchstart)=\"onTouchStart($event)\"\n  [class.has-ads]=\"!!config?.agendaAdsTemplate?.elementRef\"\n  class=\"client-home__container\"\n>\n  <lib-dashboard-swipeable-tabs\n    [activeIndex]=\"config?.activeTabIndex\"\n    [thumbsSwiperOptions]=\"dashboardThumbsSwiperOptions\"\n    [mainSwiperOptions]=\"mainSwiperOptions\"\n    [slideContentMaxHeight]=\"config?.slideContentMaxHeight\"\n    [bottomThumbs]=\"false\"\n    [generalSwiperHeight]=\"'100%'\"\n    [mainSwiperHeight]=\"'calc(100% - 34px)'\"\n    [thumbsSwiperHeight]=\"'34px'\"\n    [subMainSwiperHeight]=\"'100%'\"\n    (activeIndexChange)=\"onActiveTabIndexChange($event)\"\n  >\n    <ng-container thumb-slides>\n      @for (item of items; let i = $index; track item) {\n        <swiper-slide class=\"main-tab\">\n          <span\n            class=\"tab\"\n            [class.active]=\"i === config.activeTabIndex\"\n            [class.disabled]=\"item?.key === 'CHAT_HANDOFF' && !(config?.clientMatches$ | async)?.[config?.activeIndex]?.showHandoff && !config.default\"\n          >\n            {{ item?.label | translate }}\n            @if (i === config.activeTabIndex) {\n              <ng-container>\n                <img [width]=\"12\" [height]=\"12\" [src]=\"assetPaths.defaultIcon\" [alt]=\"item?.label + ' info icon'\" (click)=\"item.onClickInfo()\" />\n                <img [width]=\"12\" [height]=\"12\" [src]=\"assetPaths.settingsIcon\" alt=\"Settings icon\" (click)=\"onSettingsClick(); $event.stopPropagation()\" style=\"cursor: pointer\" />\n              </ng-container>\n            }\n          </span>\n        </swiper-slide>\n      }\n    </ng-container>\n    <ng-container main-slides>\n      <swiper-slide class=\"no-swiping-selector swiper__scheduler\">\n        <div class=\"swiper__client-home\">\n          @if (config.alertStatus.chatMeetupAgenda) {\n            <div class=\"alert-popup-client-scheduler\">\n              <lib-alert-popup\n                [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.CHAT_MEETUP_AGENDA.TITLE' | translate\"\n                [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.CHAT_MEETUP_AGENDA.DESCRIPTION' | translate\"\n                (closed)=\"\n                  onClosedAlert({\n                    event: $event,\n                    field: alertStatusFields.chatMeetupAgenda,\n                  })\n                \"\n              ></lib-alert-popup>\n            </div>\n          }\n          <lib-client-home\n            [config]=\"{\n              schedulerAdsTemplate: config?.schedulerAdsTemplate,\n              schedulerTabAdsTemplate: config?.schedulerTabAdsTemplate,\n              chatAdsTemplate: config?.chatAdsTemplate,\n              chatTabAdsTemplate: config?.chatTabAdsTemplate,\n              traitVisualAdsTemplate: config?.traitVisualAdsTemplate,\n              activeIndex: config?.activeIndex,\n              clientMatches$: config?.clientMatches$,\n              schedulers$: config?.schedulers$,\n              component: components.ChatScheduler,\n              default: config?.default,\n              thumbsSwiperOptions: clientHomeThumbsSwiperOptions,\n              alertStatus: config.alertStatus,\n              bottomThumbs: true,\n              showValueProportionLabel: false,\n              hideProgressBar: true,\n            }\"\n            (bookEvent)=\"bookEvent?.emit($event)\"\n            (removeSuggestion)=\"removeSuggestion?.emit($event)\"\n            (addMessage)=\"handleNewMessage($event)\"\n            (getMessages)=\"getMessages.emit($event)\"\n            (activeIndexChange)=\"onActiveProspectChange($event)\"\n            (handleClosedAlert)=\"onClosedAlert($event)\"\n            (handleAppearPopup)=\"onHandleAppearPopup($event)\"\n          ></lib-client-home>\n        </div>\n      </swiper-slide>\n      <swiper-slide class=\"no-swiping-selector\">\n        <div class=\"swiper__client-home\">\n          @if (config.alertStatus.compatibilityProfileTrait) {\n            <div class=\"alert-popup-trait-chart\">\n              <lib-alert-popup\n                [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.FORCE_GRAPH_COMPATIBILITY.TITLE' | translate\"\n                [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.FORCE_GRAPH_COMPATIBILITY.DESCRIPTION' | translate\"\n                (closed)=\"\n                  onClosedAlert({\n                    event: $event,\n                    field: alertStatusFields.compatibilityProfileTrait,\n                  })\n                \"\n              ></lib-alert-popup>\n            </div>\n          }\n          <lib-client-home\n            [config]=\"{\n              schedulerAdsTemplate: config?.schedulerAdsTemplate,\n              schedulerTabAdsTemplate: config?.schedulerTabAdsTemplate,\n              chatAdsTemplate: config?.chatAdsTemplate,\n              chatTabAdsTemplate: config?.chatTabAdsTemplate,\n              traitVisualAdsTemplate: config?.traitVisualAdsTemplate,\n              activeIndex: config?.activeChartItem,\n              clientMatches$: config?.clientMatches$,\n              component: components.ClientMatchTraitChart,\n              default: config?.default,\n              thumbsSwiperOptions: clientHomeThumbsSwiperOptions,\n              polygonColors: config?.polygonColors,\n              spiderConfig: config?.spiderConfig,\n              alertStatus: config.alertStatus,\n              bottomThumbs: true,\n              showValueProportionLabel: false,\n              hideProgressBar: true,\n            }\"\n          ></lib-client-home>\n        </div>\n      </swiper-slide>\n      <swiper-slide class=\"no-swiping-selector\">\n        <div class=\"swiper__client-home\">\n          @if (config.alertStatus.compatibilityProfileSpider) {\n            <div class=\"alert-popup-spider-chart\">\n              <lib-alert-popup\n                [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.COMPATIBILITY_PROFILE.TITLE' | translate\"\n                [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.COMPATIBILITY_PROFILE.DESCRIPTION' | translate\"\n                (closed)=\"\n                  onClosedAlert({\n                    event: $event,\n                    field: alertStatusFields.compatibilityProfileSpider,\n                  })\n                \"\n              ></lib-alert-popup>\n            </div>\n          }\n          <div [class.spider-chart___active]=\"isMinimizeVisual\">\n            <lib-client-home\n              [config]=\"{\n                schedulerAdsTemplate: config?.schedulerAdsTemplate,\n                schedulerTabAdsTemplate: config?.schedulerTabAdsTemplate,\n                chatAdsTemplate: config?.chatAdsTemplate,\n                chatTabAdsTemplate: config?.chatTabAdsTemplate,\n                traitVisualAdsTemplate: config?.traitVisualAdsTemplate,\n                activeIndex: config?.activeChartItem,\n                clientMatches$: config?.clientMatches$,\n                component: components.ClientMatchSpiderChart,\n                default: config?.default,\n                spiderConfig: config?.spiderConfig,\n                polygonColors: config?.polygonColors,\n                alertStatus: config.alertStatus,\n                bottomThumbs: true,\n                showValueProportionLabel: false,\n                hideProgressBar: true,\n              }\"\n            ></lib-client-home>\n          </div>\n        </div>\n      </swiper-slide>\n      @if ((config?.clientMatches$ | async)?.[config?.activeIndex]?.showHandoff || config.default) {\n        <swiper-slide class=\"no-swiping-selector\">\n          <div class=\"swiper__client-home\">\n            @if (config.alertStatus.chatHandoff) {\n              <div class=\"alert-popup-chat-handoff\">\n                <lib-alert-popup\n                  [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.HANDOFF_CHAT.TITLE' | translate\"\n                  [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.HANDOFF_CHAT.DESCRIPTION' | translate\"\n                  (closed)=\"\n                    onClosedAlert({\n                      event: $event,\n                      field: alertStatusFields.chatHandoff,\n                    })\n                  \"\n                ></lib-alert-popup>\n              </div>\n            }\n            @if (config.alertStatus.chatProgress) {\n              <div class=\"alert-popup-chat-progress\">\n                <lib-alert-popup\n                  [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.CHAT_PROGRESS.TITLE' | translate\"\n                  [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.CHAT_PROGRESS.DESCRIPTION' | translate\"\n                  (closed)=\"\n                    onClosedAlert({\n                      event: $event,\n                      field: alertStatusFields.chatProgress,\n                    })\n                  \"\n                ></lib-alert-popup>\n              </div>\n            }\n            <lib-client-home\n              [config]=\"{\n                schedulerAdsTemplate: config?.schedulerAdsTemplate,\n                schedulerTabAdsTemplate: config?.schedulerTabAdsTemplate,\n                chatAdsTemplate: config?.chatAdsTemplate,\n                chatTabAdsTemplate: config?.chatTabAdsTemplate,\n                traitVisualAdsTemplate: config?.traitVisualAdsTemplate,\n                activeIndex: config?.activeIndex,\n                clientMatches$: config?.clientMatches$,\n                component: components.ChatHandoff,\n                default: config?.default,\n                alertStatus: config.alertStatus,\n                hideStatuses: true,\n                bottomThumbs: true,\n                showValueProportionLabel: false,\n                hideProgressBar: true,\n              }\"\n              (addMessage)=\"handleNewMessage($event)\"\n              (getMessages)=\"getMessages?.emit($event)\"\n              (activeIndexChange)=\"onActiveProspectChange($event)\"\n            ></lib-client-home>\n          </div>\n        </swiper-slide>\n      }\n    </ng-container>\n  </lib-dashboard-swipeable-tabs>\n</div>\n", styles: [":host{--match-percentage-font-size: 1.5em;--container-sides-shadow-width: 15px;--match-percentage-value-height: 3em;position:relative}.agenda-handler{height:133px;overflow:hidden;transition:height .5s ease;position:relative}.agenda-handler.has-ads{height:fit-content}.agenda-handler.height-zero-activated{height:100%!important}.agenda-handler .agenda-title{display:flex;width:100%;padding:0 23.5px;font-size:12px}.agenda-handler .agenda-title span{margin-left:5px}.agenda-handler lib-agenda{position:relative;display:block;width:100%;margin:auto;padding:0 5px}.agenda-handler .alert-popup-agenda{position:absolute;opacity:1;top:40px;right:40px;z-index:999;transition:opacity .3s ease}.client-home__container{height:calc(100% - 133px)}.client-home__container.has-ads{height:calc(100% - 190px)}.client-home__container>lib-swipeable-tabs{height:100%;display:block}.height-zero{height:0px!important}.opacity-zero{opacity:0!important;pointer-events:none}.tab{display:flex;gap:7px;padding:10px 30px;color:#fff9;cursor:pointer}.tab.active{color:#fff}.tab.disabled{opacity:.3;color:#fff9!important;pointer-events:none}.swiper__scheduler{height:100%}.swiper__scheduler lib-client-home{height:100%;display:block}.swiper__client-home{position:relative;width:100%;height:100%}.swiper__client-home .alert-popup-client-scheduler{position:absolute;z-index:999;top:100px;right:40px}.swiper__client-home .alert-popup-chat-handoff{position:absolute;z-index:999;top:40px;right:40px}.swiper__client-home .alert-popup-chat-progress{position:absolute;z-index:999;top:200px;right:40px}.swiper__client-home .alert-popup-trait-chart,.swiper__client-home .alert-popup-spider-chart{position:absolute;z-index:999;top:123px;right:40px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: LibChatComponentModule }, { kind: "ngmodule", type: LibAgendaModule }, { kind: "component", type: AgendaComponent, selector: "lib-agenda", inputs: ["adsTemplate", "agendaAdsData", "loading$", "startDate", "endDate", "events", "setAdsData"] }, { kind: "ngmodule", type: PipeModule }, { kind: "component", type: LibClientHomeComponent, selector: "lib-client-home", inputs: ["config"], outputs: ["activeIndexChange", "addMessage", "getMessages", "bookEvent", "removeSuggestion", "handleAppearPopup"] }, { kind: "component", type: LibDashboardSwipeableTabsComponent, selector: "lib-dashboard-swipeable-tabs", inputs: ["thumbsSwiperOptions", "mainSwiperOptions", "activeIndex", "bottomThumbs", "slideContentMaxHeight", "mainSwiperHeight", "subMainSwiperHeight", "thumbsSwiperHeight", "generalSwiperHeight"], outputs: ["activeIndexChange"] }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: AlertPopupComponent, selector: "lib-alert-popup", inputs: ["title", "description", "timeState", "number"], outputs: ["closed"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibClientDashboardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-client-dashboard', imports: [CommonModule, TranslateModule, LibChatComponentModule, LibAgendaModule, PipeModule, LibClientHomeComponent, LibDashboardSwipeableTabsComponent, SharedModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Horizontal Agenda -->\n<div class=\"agenda-handler\" [class.height-zero]=\"isMinimizeVisual\" [class.has-ads]=\"config?.agendaAdsTemplate\">\n  <h3 class=\"agenda-title\">\n    {{ 'CLIENT_DASHBOARD.TITLES.UPCOMING_DATES' | translate }}\n    <span (click)=\"onHandleAppearPopup(alertStatusFields.upcomingDates)\"><img [width]=\"12\" [height]=\"12\" [src]=\"assetPaths.defaultIcon\" [alt]=\"item?.label + ' icon'\" /></span>\n  </h3>\n  <lib-agenda [events]=\"config?.events\" [adsTemplate]=\"config?.agendaAdsTemplate\" [agendaAdsData]=\"agendaAdsData\"></lib-agenda>\n  @if (config.alertStatus.upcomingDates) {\n    <div class=\"alert-popup-agenda\" [class.opacity-zero]=\"isMinimizeVisual\">\n      <lib-alert-popup\n        [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.UPCOMING_DATES.TITLE' | translate\"\n        [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.UPCOMING_DATES.DESCRIPTION' | translate\"\n        (closed)=\"\n          onClosedAlert({\n            event: $event,\n            field: alertStatusFields.upcomingDates,\n          })\n        \"\n      ></lib-alert-popup>\n    </div>\n  }\n</div>\n<!-- Scheduler - Trait - Spider - Handoff -->\n<div\n  (click)=\"onClick($event)\"\n  [class.height-zero-activated]=\"isMinimizeVisual\"\n  (touchstart)=\"onTouchStart($event)\"\n  [class.has-ads]=\"!!config?.agendaAdsTemplate?.elementRef\" class=\"client-home__container\">\n  <lib-dashboard-swipeable-tabs\n    [activeIndex]=\"config?.activeTabIndex\"\n    [thumbsSwiperOptions]=\"dashboardThumbsSwiperOptions\"\n    [mainSwiperOptions]=\"mainSwiperOptions\"\n    [slideContentMaxHeight]=\"config?.slideContentMaxHeight\"\n    [bottomThumbs]=\"false\"\n    [generalSwiperHeight]=\"'100%'\"\n    [mainSwiperHeight]=\"'calc(100% - 34px)'\"\n    [thumbsSwiperHeight]=\"'34px'\"\n    [subMainSwiperHeight]=\"'100%'\"\n    (activeIndexChange)=\"onActiveTabIndexChange($event)\"\n  >\n    <ng-container thumb-slides>\n      @for (item of items; let i = $index; track item) {\n        <swiper-slide class=\"main-tab\">\n          <span\n            class=\"tab\"\n            [class.active]=\"i === config.activeTabIndex\"\n            [class.disabled]=\"item?.key === 'CHAT_HANDOFF' && !(config?.clientMatches$ | async)?.[config?.activeIndex]?.showHandoff && !config.default\"\n          >\n            {{ item?.label | translate }}\n            @if (i === config.activeTabIndex) {\n              <ng-container>\n                <img\n                  [width]=\"12\"\n                  [height]=\"12\"\n                  [src]=\"assetPaths.defaultIcon\"\n                  [alt]=\"item?.label + ' info icon'\"\n                  (click)=\"item.onClickInfo()\"\n                />\n                <img\n                  [width]=\"12\"\n                  [height]=\"12\"\n                  [src]=\"assetPaths.settingsIcon\"\n                  alt=\"Settings icon\"\n                  (click)=\"onSettingsClick(); $event.stopPropagation()\"\n                  style=\"cursor: pointer;\"\n                />\n              </ng-container>\n            }\n          </span>\n        </swiper-slide>\n      }\n    </ng-container>\n    <ng-container main-slides>\n      <swiper-slide class=\"no-swiping-selector swiper__scheduler\">\n        <div class=\"swiper__client-home\">\n          @if (config.alertStatus.chatMeetupAgenda) {\n            <div class=\"alert-popup-client-scheduler\">\n              <lib-alert-popup\n                [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.CHAT_MEETUP_AGENDA.TITLE' | translate\"\n                [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.CHAT_MEETUP_AGENDA.DESCRIPTION' | translate\"\n                (closed)=\"\n                  onClosedAlert({\n                    event: $event,\n                    field: alertStatusFields.chatMeetupAgenda,\n                  })\n                \"\n              ></lib-alert-popup>\n            </div>\n          }\n          <lib-client-home\n            [config]=\"{\n              schedulerAdsTemplate: config?.schedulerAdsTemplate,\n              schedulerTabAdsTemplate: config?.schedulerTabAdsTemplate,\n              chatAdsTemplate: config?.chatAdsTemplate,\n              chatTabAdsTemplate: config?.chatTabAdsTemplate,\n              traitVisualAdsTemplate: config?.traitVisualAdsTemplate,\n              activeIndex: config?.activeIndex,\n              clientMatches$: config?.clientMatches$,\n              schedulers$: config?.schedulers$,\n              component: components.ChatScheduler,\n              default: config?.default,\n              thumbsSwiperOptions: clientHomeThumbsSwiperOptions,\n              alertStatus: config.alertStatus,\n              bottomThumbs: true,\n              showValueProportionLabel: false,\n              hideProgressBar: true,\n            }\"\n            (bookEvent)=\"bookEvent?.emit($event)\"\n            (removeSuggestion)=\"removeSuggestion?.emit($event)\"\n            (addMessage)=\"handleNewMessage($event)\"\n            (getMessages)=\"getMessages.emit($event)\"\n            (activeIndexChange)=\"onActiveProspectChange($event)\"\n            (handleClosedAlert)=\"onClosedAlert($event)\"\n            (handleAppearPopup)=\"onHandleAppearPopup($event)\"\n          ></lib-client-home>\n        </div>\n      </swiper-slide>\n      <swiper-slide class=\"no-swiping-selector\">\n        <div class=\"swiper__client-home\">\n          @if (config.alertStatus.compatibilityProfileTrait) {\n            <div class=\"alert-popup-trait-chart\">\n              <lib-alert-popup\n                [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.FORCE_GRAPH_COMPATIBILITY.TITLE' | translate\"\n                [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.FORCE_GRAPH_COMPATIBILITY.DESCRIPTION' | translate\"\n                (closed)=\"\n                  onClosedAlert({\n                    event: $event,\n                    field: alertStatusFields.compatibilityProfileTrait,\n                  })\n                \"\n              ></lib-alert-popup>\n            </div>\n          }\n          <lib-client-home\n            [config]=\"{\n              schedulerAdsTemplate: config?.schedulerAdsTemplate,\n              schedulerTabAdsTemplate: config?.schedulerTabAdsTemplate,\n              chatAdsTemplate: config?.chatAdsTemplate,\n              chatTabAdsTemplate: config?.chatTabAdsTemplate,\n              traitVisualAdsTemplate: config?.traitVisualAdsTemplate,\n              activeIndex: config?.activeChartItem,\n              clientMatches$: config?.clientMatches$,\n              component: components.ClientMatchTraitChart,\n              default: config?.default,\n              thumbsSwiperOptions: clientHomeThumbsSwiperOptions,\n              polygonColors: config?.polygonColors,\n              spiderConfig: config?.spiderConfig,\n              alertStatus: config.alertStatus,\n              bottomThumbs: true,\n              showValueProportionLabel: false,\n              hideProgressBar: true,\n            }\"\n          ></lib-client-home>\n        </div>\n      </swiper-slide>\n      <swiper-slide class=\"no-swiping-selector\">\n        <div class=\"swiper__client-home\">\n          @if (config.alertStatus.compatibilityProfileSpider) {\n            <div class=\"alert-popup-spider-chart\">\n              <lib-alert-popup\n                [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.COMPATIBILITY_PROFILE.TITLE' | translate\"\n                [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.COMPATIBILITY_PROFILE.DESCRIPTION' | translate\"\n                (closed)=\"\n                  onClosedAlert({\n                    event: $event,\n                    field: alertStatusFields.compatibilityProfileSpider,\n                  })\n                \"\n              ></lib-alert-popup>\n            </div>\n          }\n          <div [class.spider-chart___active]=\"isMinimizeVisual\">\n            <lib-client-home\n              [config]=\"{\n                schedulerAdsTemplate: config?.schedulerAdsTemplate,\n                schedulerTabAdsTemplate: config?.schedulerTabAdsTemplate,\n                chatAdsTemplate: config?.chatAdsTemplate,\n                chatTabAdsTemplate: config?.chatTabAdsTemplate,\n                traitVisualAdsTemplate: config?.traitVisualAdsTemplate,\n                activeIndex: config?.activeChartItem,\n                clientMatches$: config?.clientMatches$,\n                component: components.ClientMatchSpiderChart,\n                default: config?.default,\n                spiderConfig: config?.spiderConfig,\n                polygonColors: config?.polygonColors,\n                alertStatus: config.alertStatus,\n                bottomThumbs: true,\n                showValueProportionLabel: false,\n                hideProgressBar: true,\n              }\"\n            ></lib-client-home>\n          </div>\n        </div>\n      </swiper-slide>\n      @if ((config?.clientMatches$ | async)?.[config?.activeIndex]?.showHandoff || config.default) {\n        <swiper-slide class=\"no-swiping-selector\">\n          <div class=\"swiper__client-home\">\n            @if (config.alertStatus.chatHandoff) {\n              <div class=\"alert-popup-chat-handoff\">\n                <lib-alert-popup\n                  [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.HANDOFF_CHAT.TITLE' | translate\"\n                  [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.HANDOFF_CHAT.DESCRIPTION' | translate\"\n                  (closed)=\"\n                    onClosedAlert({\n                      event: $event,\n                      field: alertStatusFields.chatHandoff,\n                    })\n                  \"\n                ></lib-alert-popup>\n              </div>\n            }\n            @if (config.alertStatus.chatProgress) {\n              <div class=\"alert-popup-chat-progress\">\n                <lib-alert-popup\n                  [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.CHAT_PROGRESS.TITLE' | translate\"\n                  [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.CHAT_PROGRESS.DESCRIPTION' | translate\"\n                  (closed)=\"\n                    onClosedAlert({\n                      event: $event,\n                      field: alertStatusFields.chatProgress,\n                    })\n                  \"\n                ></lib-alert-popup>\n              </div>\n            }\n            <lib-client-home\n              [config]=\"{\n                schedulerAdsTemplate: config?.schedulerAdsTemplate,\n                schedulerTabAdsTemplate: config?.schedulerTabAdsTemplate,\n                chatAdsTemplate: config?.chatAdsTemplate,\n                chatTabAdsTemplate: config?.chatTabAdsTemplate,\n                traitVisualAdsTemplate: config?.traitVisualAdsTemplate,\n                activeIndex: config?.activeIndex,\n                clientMatches$: config?.clientMatches$,\n                component: components.ChatHandoff,\n                default: config?.default,\n                alertStatus: config.alertStatus,\n                hideStatuses: true,\n                bottomThumbs: true,\n                showValueProportionLabel: false,\n                hideProgressBar: true,\n              }\"\n              (addMessage)=\"handleNewMessage($event)\"\n              (getMessages)=\"getMessages?.emit($event)\"\n              (activeIndexChange)=\"onActiveProspectChange($event)\"\n            ></lib-client-home>\n          </div>\n        </swiper-slide>\n      }\n    </ng-container>\n  </lib-dashboard-swipeable-tabs>\n</div>\n", styles: [":host{--match-percentage-font-size: 1.5em;--container-sides-shadow-width: 15px;--match-percentage-value-height: 3em;position:relative}.agenda-handler{height:133px;overflow:hidden;transition:height .5s ease;position:relative}.agenda-handler.has-ads{height:fit-content}.agenda-handler.height-zero-activated{height:100%!important}.agenda-handler .agenda-title{display:flex;width:100%;padding:0 23.5px;font-size:12px}.agenda-handler .agenda-title span{margin-left:5px}.agenda-handler lib-agenda{position:relative;display:block;width:100%;margin:auto;padding:0 5px}.agenda-handler .alert-popup-agenda{position:absolute;opacity:1;top:40px;right:40px;z-index:999;transition:opacity .3s ease}.client-home__container{height:calc(100% - 133px)}.client-home__container.has-ads{height:calc(100% - 190px)}.client-home__container>lib-swipeable-tabs{height:100%;display:block}.height-zero{height:0px!important}.opacity-zero{opacity:0!important;pointer-events:none}.tab{display:flex;gap:7px;padding:10px 30px;color:#fff9;cursor:pointer}.tab.active{color:#fff}.tab.disabled{opacity:.3;color:#fff9!important;pointer-events:none}.swiper__scheduler{height:100%}.swiper__scheduler lib-client-home{height:100%;display:block}.swiper__client-home{position:relative;width:100%;height:100%}.swiper__client-home .alert-popup-client-scheduler{position:absolute;z-index:999;top:100px;right:40px}.swiper__client-home .alert-popup-chat-handoff{position:absolute;z-index:999;top:40px;right:40px}.swiper__client-home .alert-popup-chat-progress{position:absolute;z-index:999;top:200px;right:40px}.swiper__client-home .alert-popup-trait-chart,.swiper__client-home .alert-popup-spider-chart{position:absolute;z-index:999;top:123px;right:40px}\n"] }]
+            args: [{ selector: 'lib-client-dashboard', imports: [CommonModule, TranslateModule, LibChatComponentModule, LibAgendaModule, PipeModule, LibClientHomeComponent, LibDashboardSwipeableTabsComponent, SharedModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Horizontal Agenda -->\n<div class=\"agenda-handler\" [class.height-zero]=\"isMinimizeVisual\" [class.has-ads]=\"config?.agendaAdsTemplate\">\n  <h3 class=\"agenda-title\">\n    {{ 'CLIENT_DASHBOARD.TITLES.UPCOMING_DATES' | translate }}\n    <span (click)=\"onHandleAppearPopup(alertStatusFields.upcomingDates)\"><img [width]=\"12\" [height]=\"12\" [src]=\"assetPaths.defaultIcon\" [alt]=\"item?.label + ' icon'\" /></span>\n  </h3>\n  <lib-agenda [events]=\"config?.events\" [adsTemplate]=\"config?.agendaAdsTemplate\" [agendaAdsData]=\"agendaAdsData\"></lib-agenda>\n  @if (config.alertStatus.upcomingDates) {\n    <div class=\"alert-popup-agenda\" [class.opacity-zero]=\"isMinimizeVisual\">\n      <lib-alert-popup\n        [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.UPCOMING_DATES.TITLE' | translate\"\n        [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.UPCOMING_DATES.DESCRIPTION' | translate\"\n        (closed)=\"\n          onClosedAlert({\n            event: $event,\n            field: alertStatusFields.upcomingDates,\n          })\n        \"\n      ></lib-alert-popup>\n    </div>\n  }\n</div>\n<!-- Scheduler - Trait - Spider - Handoff -->\n<div\n  (click)=\"onClick($event)\"\n  [class.height-zero-activated]=\"isMinimizeVisual\"\n  (touchstart)=\"onTouchStart($event)\"\n  [class.has-ads]=\"!!config?.agendaAdsTemplate?.elementRef\"\n  class=\"client-home__container\"\n>\n  <lib-dashboard-swipeable-tabs\n    [activeIndex]=\"config?.activeTabIndex\"\n    [thumbsSwiperOptions]=\"dashboardThumbsSwiperOptions\"\n    [mainSwiperOptions]=\"mainSwiperOptions\"\n    [slideContentMaxHeight]=\"config?.slideContentMaxHeight\"\n    [bottomThumbs]=\"false\"\n    [generalSwiperHeight]=\"'100%'\"\n    [mainSwiperHeight]=\"'calc(100% - 34px)'\"\n    [thumbsSwiperHeight]=\"'34px'\"\n    [subMainSwiperHeight]=\"'100%'\"\n    (activeIndexChange)=\"onActiveTabIndexChange($event)\"\n  >\n    <ng-container thumb-slides>\n      @for (item of items; let i = $index; track item) {\n        <swiper-slide class=\"main-tab\">\n          <span\n            class=\"tab\"\n            [class.active]=\"i === config.activeTabIndex\"\n            [class.disabled]=\"item?.key === 'CHAT_HANDOFF' && !(config?.clientMatches$ | async)?.[config?.activeIndex]?.showHandoff && !config.default\"\n          >\n            {{ item?.label | translate }}\n            @if (i === config.activeTabIndex) {\n              <ng-container>\n                <img [width]=\"12\" [height]=\"12\" [src]=\"assetPaths.defaultIcon\" [alt]=\"item?.label + ' info icon'\" (click)=\"item.onClickInfo()\" />\n                <img [width]=\"12\" [height]=\"12\" [src]=\"assetPaths.settingsIcon\" alt=\"Settings icon\" (click)=\"onSettingsClick(); $event.stopPropagation()\" style=\"cursor: pointer\" />\n              </ng-container>\n            }\n          </span>\n        </swiper-slide>\n      }\n    </ng-container>\n    <ng-container main-slides>\n      <swiper-slide class=\"no-swiping-selector swiper__scheduler\">\n        <div class=\"swiper__client-home\">\n          @if (config.alertStatus.chatMeetupAgenda) {\n            <div class=\"alert-popup-client-scheduler\">\n              <lib-alert-popup\n                [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.CHAT_MEETUP_AGENDA.TITLE' | translate\"\n                [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.CHAT_MEETUP_AGENDA.DESCRIPTION' | translate\"\n                (closed)=\"\n                  onClosedAlert({\n                    event: $event,\n                    field: alertStatusFields.chatMeetupAgenda,\n                  })\n                \"\n              ></lib-alert-popup>\n            </div>\n          }\n          <lib-client-home\n            [config]=\"{\n              schedulerAdsTemplate: config?.schedulerAdsTemplate,\n              schedulerTabAdsTemplate: config?.schedulerTabAdsTemplate,\n              chatAdsTemplate: config?.chatAdsTemplate,\n              chatTabAdsTemplate: config?.chatTabAdsTemplate,\n              traitVisualAdsTemplate: config?.traitVisualAdsTemplate,\n              activeIndex: config?.activeIndex,\n              clientMatches$: config?.clientMatches$,\n              schedulers$: config?.schedulers$,\n              component: components.ChatScheduler,\n              default: config?.default,\n              thumbsSwiperOptions: clientHomeThumbsSwiperOptions,\n              alertStatus: config.alertStatus,\n              bottomThumbs: true,\n              showValueProportionLabel: false,\n              hideProgressBar: true,\n            }\"\n            (bookEvent)=\"bookEvent?.emit($event)\"\n            (removeSuggestion)=\"removeSuggestion?.emit($event)\"\n            (addMessage)=\"handleNewMessage($event)\"\n            (getMessages)=\"getMessages.emit($event)\"\n            (activeIndexChange)=\"onActiveProspectChange($event)\"\n            (handleClosedAlert)=\"onClosedAlert($event)\"\n            (handleAppearPopup)=\"onHandleAppearPopup($event)\"\n          ></lib-client-home>\n        </div>\n      </swiper-slide>\n      <swiper-slide class=\"no-swiping-selector\">\n        <div class=\"swiper__client-home\">\n          @if (config.alertStatus.compatibilityProfileTrait) {\n            <div class=\"alert-popup-trait-chart\">\n              <lib-alert-popup\n                [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.FORCE_GRAPH_COMPATIBILITY.TITLE' | translate\"\n                [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.FORCE_GRAPH_COMPATIBILITY.DESCRIPTION' | translate\"\n                (closed)=\"\n                  onClosedAlert({\n                    event: $event,\n                    field: alertStatusFields.compatibilityProfileTrait,\n                  })\n                \"\n              ></lib-alert-popup>\n            </div>\n          }\n          <lib-client-home\n            [config]=\"{\n              schedulerAdsTemplate: config?.schedulerAdsTemplate,\n              schedulerTabAdsTemplate: config?.schedulerTabAdsTemplate,\n              chatAdsTemplate: config?.chatAdsTemplate,\n              chatTabAdsTemplate: config?.chatTabAdsTemplate,\n              traitVisualAdsTemplate: config?.traitVisualAdsTemplate,\n              activeIndex: config?.activeChartItem,\n              clientMatches$: config?.clientMatches$,\n              component: components.ClientMatchTraitChart,\n              default: config?.default,\n              thumbsSwiperOptions: clientHomeThumbsSwiperOptions,\n              polygonColors: config?.polygonColors,\n              spiderConfig: config?.spiderConfig,\n              alertStatus: config.alertStatus,\n              bottomThumbs: true,\n              showValueProportionLabel: false,\n              hideProgressBar: true,\n            }\"\n          ></lib-client-home>\n        </div>\n      </swiper-slide>\n      <swiper-slide class=\"no-swiping-selector\">\n        <div class=\"swiper__client-home\">\n          @if (config.alertStatus.compatibilityProfileSpider) {\n            <div class=\"alert-popup-spider-chart\">\n              <lib-alert-popup\n                [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.COMPATIBILITY_PROFILE.TITLE' | translate\"\n                [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.COMPATIBILITY_PROFILE.DESCRIPTION' | translate\"\n                (closed)=\"\n                  onClosedAlert({\n                    event: $event,\n                    field: alertStatusFields.compatibilityProfileSpider,\n                  })\n                \"\n              ></lib-alert-popup>\n            </div>\n          }\n          <div [class.spider-chart___active]=\"isMinimizeVisual\">\n            <lib-client-home\n              [config]=\"{\n                schedulerAdsTemplate: config?.schedulerAdsTemplate,\n                schedulerTabAdsTemplate: config?.schedulerTabAdsTemplate,\n                chatAdsTemplate: config?.chatAdsTemplate,\n                chatTabAdsTemplate: config?.chatTabAdsTemplate,\n                traitVisualAdsTemplate: config?.traitVisualAdsTemplate,\n                activeIndex: config?.activeChartItem,\n                clientMatches$: config?.clientMatches$,\n                component: components.ClientMatchSpiderChart,\n                default: config?.default,\n                spiderConfig: config?.spiderConfig,\n                polygonColors: config?.polygonColors,\n                alertStatus: config.alertStatus,\n                bottomThumbs: true,\n                showValueProportionLabel: false,\n                hideProgressBar: true,\n              }\"\n            ></lib-client-home>\n          </div>\n        </div>\n      </swiper-slide>\n      @if ((config?.clientMatches$ | async)?.[config?.activeIndex]?.showHandoff || config.default) {\n        <swiper-slide class=\"no-swiping-selector\">\n          <div class=\"swiper__client-home\">\n            @if (config.alertStatus.chatHandoff) {\n              <div class=\"alert-popup-chat-handoff\">\n                <lib-alert-popup\n                  [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.HANDOFF_CHAT.TITLE' | translate\"\n                  [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.HANDOFF_CHAT.DESCRIPTION' | translate\"\n                  (closed)=\"\n                    onClosedAlert({\n                      event: $event,\n                      field: alertStatusFields.chatHandoff,\n                    })\n                  \"\n                ></lib-alert-popup>\n              </div>\n            }\n            @if (config.alertStatus.chatProgress) {\n              <div class=\"alert-popup-chat-progress\">\n                <lib-alert-popup\n                  [title]=\"'CLIENT_DASHBOARD.ALERT_POPUP.CHAT_PROGRESS.TITLE' | translate\"\n                  [description]=\"'CLIENT_DASHBOARD.ALERT_POPUP.CHAT_PROGRESS.DESCRIPTION' | translate\"\n                  (closed)=\"\n                    onClosedAlert({\n                      event: $event,\n                      field: alertStatusFields.chatProgress,\n                    })\n                  \"\n                ></lib-alert-popup>\n              </div>\n            }\n            <lib-client-home\n              [config]=\"{\n                schedulerAdsTemplate: config?.schedulerAdsTemplate,\n                schedulerTabAdsTemplate: config?.schedulerTabAdsTemplate,\n                chatAdsTemplate: config?.chatAdsTemplate,\n                chatTabAdsTemplate: config?.chatTabAdsTemplate,\n                traitVisualAdsTemplate: config?.traitVisualAdsTemplate,\n                activeIndex: config?.activeIndex,\n                clientMatches$: config?.clientMatches$,\n                component: components.ChatHandoff,\n                default: config?.default,\n                alertStatus: config.alertStatus,\n                hideStatuses: true,\n                bottomThumbs: true,\n                showValueProportionLabel: false,\n                hideProgressBar: true,\n              }\"\n              (addMessage)=\"handleNewMessage($event)\"\n              (getMessages)=\"getMessages?.emit($event)\"\n              (activeIndexChange)=\"onActiveProspectChange($event)\"\n            ></lib-client-home>\n          </div>\n        </swiper-slide>\n      }\n    </ng-container>\n  </lib-dashboard-swipeable-tabs>\n</div>\n", styles: [":host{--match-percentage-font-size: 1.5em;--container-sides-shadow-width: 15px;--match-percentage-value-height: 3em;position:relative}.agenda-handler{height:133px;overflow:hidden;transition:height .5s ease;position:relative}.agenda-handler.has-ads{height:fit-content}.agenda-handler.height-zero-activated{height:100%!important}.agenda-handler .agenda-title{display:flex;width:100%;padding:0 23.5px;font-size:12px}.agenda-handler .agenda-title span{margin-left:5px}.agenda-handler lib-agenda{position:relative;display:block;width:100%;margin:auto;padding:0 5px}.agenda-handler .alert-popup-agenda{position:absolute;opacity:1;top:40px;right:40px;z-index:999;transition:opacity .3s ease}.client-home__container{height:calc(100% - 133px)}.client-home__container.has-ads{height:calc(100% - 190px)}.client-home__container>lib-swipeable-tabs{height:100%;display:block}.height-zero{height:0px!important}.opacity-zero{opacity:0!important;pointer-events:none}.tab{display:flex;gap:7px;padding:10px 30px;color:#fff9;cursor:pointer}.tab.active{color:#fff}.tab.disabled{opacity:.3;color:#fff9!important;pointer-events:none}.swiper__scheduler{height:100%}.swiper__scheduler lib-client-home{height:100%;display:block}.swiper__client-home{position:relative;width:100%;height:100%}.swiper__client-home .alert-popup-client-scheduler{position:absolute;z-index:999;top:100px;right:40px}.swiper__client-home .alert-popup-chat-handoff{position:absolute;z-index:999;top:40px;right:40px}.swiper__client-home .alert-popup-chat-progress{position:absolute;z-index:999;top:200px;right:40px}.swiper__client-home .alert-popup-trait-chart,.swiper__client-home .alert-popup-spider-chart{position:absolute;z-index:999;top:123px;right:40px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { config: [{
                 type: Input
             }], agendaAdsData: [{
@@ -4537,11 +4525,11 @@ class LibProfileComparisonComponent {
         this.cdr.detectChanges();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibProfileComparisonComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LibProfileComparisonComponent, isStandalone: true, selector: "lib-profile-comparison", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"profile-comparison\">\n  <div class=\"profile-comparison__container\">\n    <!-- Left Profile -->\n    <div class=\"profile-comparison__card profile-comparison__card--left\">\n      <h3 class=\"profile-comparison__name\">{{ comparisonData.leftProfile.name }}</h3>\n      <div class=\"profile-comparison__attributes\">\n        @for (attr of comparisonData.leftProfile.attributes; track $index) {\n          <div class=\"profile-comparison__attribute\" [ngClass]=\"{ 'profile-comparison__attribute--match': attr.match }\">\n            <span class=\"profile-comparison__attribute-label\">{{ attr.label }}</span>\n            <span class=\"profile-comparison__attribute-value\">{{ attr.value }}</span>\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- Right Profile -->\n    <div class=\"profile-comparison__card profile-comparison__card--right\">\n      <h3 class=\"profile-comparison__name\">{{ comparisonData.rightProfile.name }}</h3>\n      <div class=\"profile-comparison__attributes\">\n        @for (attr of comparisonData.rightProfile.attributes; track $index) {\n          <div class=\"profile-comparison__attribute\" [ngClass]=\"{ 'profile-comparison__attribute--match': attr.match }\">\n            <span class=\"profile-comparison__attribute-label\">{{ attr.label }}</span>\n            <span class=\"profile-comparison__attribute-value\">{{ attr.value }}</span>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n\n", styles: [".profile-comparison{width:100%;padding:16px}.profile-comparison__container{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1200px;margin:0 auto}@media (max-width: 768px){.profile-comparison__container{grid-template-columns:1fr;gap:24px}}.profile-comparison__card{background-color:#464a4c;border:1px solid #dfe0e3;border-radius:8px;padding:20px;transition:all .3s ease}.profile-comparison__card:hover{border-color:#ccc;box-shadow:0 4px 12px #00000026}.profile-comparison__card--left{border-left:3px solid #45899b}.profile-comparison__card--right{border-left:3px solid #9c27b0}.profile-comparison__name{font-size:20px;font-weight:600;color:#666;margin:0 0 20px;padding-bottom:12px;border-bottom:1px solid #dfe0e3}.profile-comparison__attributes{display:flex;flex-direction:column;gap:12px}.profile-comparison__attribute{display:flex;flex-direction:column;gap:4px;padding:12px;background-color:#464a4c;border-radius:6px;border:1px solid transparent;transition:all .2s ease}.profile-comparison__attribute:hover{background-color:#eeeef0;border-color:#ccc}.profile-comparison__attribute--match{border-left:3px solid #599b4e;background-color:#599b4e1a}.profile-comparison__attribute-label{font-size:12px;color:#f4f6f7;text-transform:uppercase;letter-spacing:.5px;font-weight:500}.profile-comparison__attribute-value{font-size:14px;color:#666;font-weight:400}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LibProfileComparisonComponent, isStandalone: true, selector: "lib-profile-comparison", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"profile-comparison\">\n  <div class=\"profile-comparison__container\">\n    <!-- Left Profile -->\n    <div class=\"profile-comparison__card profile-comparison__card--left\">\n      <h3 class=\"profile-comparison__name\">{{ comparisonData.leftProfile.name }}</h3>\n      <div class=\"profile-comparison__attributes\">\n        @for (attr of comparisonData.leftProfile.attributes; track $index) {\n          <div class=\"profile-comparison__attribute\" [ngClass]=\"{ 'profile-comparison__attribute--match': attr.match }\">\n            <span class=\"profile-comparison__attribute-label\">{{ attr.label }}</span>\n            <span class=\"profile-comparison__attribute-value\">{{ attr.value }}</span>\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- Right Profile -->\n    <div class=\"profile-comparison__card profile-comparison__card--right\">\n      <h3 class=\"profile-comparison__name\">{{ comparisonData.rightProfile.name }}</h3>\n      <div class=\"profile-comparison__attributes\">\n        @for (attr of comparisonData.rightProfile.attributes; track $index) {\n          <div class=\"profile-comparison__attribute\" [ngClass]=\"{ 'profile-comparison__attribute--match': attr.match }\">\n            <span class=\"profile-comparison__attribute-label\">{{ attr.label }}</span>\n            <span class=\"profile-comparison__attribute-value\">{{ attr.value }}</span>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".profile-comparison{width:100%;padding:16px}.profile-comparison__container{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1200px;margin:0 auto}@media (max-width: 768px){.profile-comparison__container{grid-template-columns:1fr;gap:24px}}.profile-comparison__card{background-color:#464a4c;border:1px solid #dfe0e3;border-radius:8px;padding:20px;transition:all .3s ease}.profile-comparison__card:hover{border-color:#ccc;box-shadow:0 4px 12px #00000026}.profile-comparison__card--left{border-left:3px solid #45899b}.profile-comparison__card--right{border-left:3px solid #9c27b0}.profile-comparison__name{font-size:20px;font-weight:600;color:#666;margin:0 0 20px;padding-bottom:12px;border-bottom:1px solid #dfe0e3}.profile-comparison__attributes{display:flex;flex-direction:column;gap:12px}.profile-comparison__attribute{display:flex;flex-direction:column;gap:4px;padding:12px;background-color:#464a4c;border-radius:6px;border:1px solid transparent;transition:all .2s ease}.profile-comparison__attribute:hover{background-color:#eeeef0;border-color:#ccc}.profile-comparison__attribute--match{border-left:3px solid #599b4e;background-color:#599b4e1a}.profile-comparison__attribute-label{font-size:12px;color:#f4f6f7;text-transform:uppercase;letter-spacing:.5px;font-weight:500}.profile-comparison__attribute-value{font-size:14px;color:#666;font-weight:400}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibProfileComparisonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-profile-comparison', imports: [CommonModule, TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"profile-comparison\">\n  <div class=\"profile-comparison__container\">\n    <!-- Left Profile -->\n    <div class=\"profile-comparison__card profile-comparison__card--left\">\n      <h3 class=\"profile-comparison__name\">{{ comparisonData.leftProfile.name }}</h3>\n      <div class=\"profile-comparison__attributes\">\n        @for (attr of comparisonData.leftProfile.attributes; track $index) {\n          <div class=\"profile-comparison__attribute\" [ngClass]=\"{ 'profile-comparison__attribute--match': attr.match }\">\n            <span class=\"profile-comparison__attribute-label\">{{ attr.label }}</span>\n            <span class=\"profile-comparison__attribute-value\">{{ attr.value }}</span>\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- Right Profile -->\n    <div class=\"profile-comparison__card profile-comparison__card--right\">\n      <h3 class=\"profile-comparison__name\">{{ comparisonData.rightProfile.name }}</h3>\n      <div class=\"profile-comparison__attributes\">\n        @for (attr of comparisonData.rightProfile.attributes; track $index) {\n          <div class=\"profile-comparison__attribute\" [ngClass]=\"{ 'profile-comparison__attribute--match': attr.match }\">\n            <span class=\"profile-comparison__attribute-label\">{{ attr.label }}</span>\n            <span class=\"profile-comparison__attribute-value\">{{ attr.value }}</span>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n\n", styles: [".profile-comparison{width:100%;padding:16px}.profile-comparison__container{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1200px;margin:0 auto}@media (max-width: 768px){.profile-comparison__container{grid-template-columns:1fr;gap:24px}}.profile-comparison__card{background-color:#464a4c;border:1px solid #dfe0e3;border-radius:8px;padding:20px;transition:all .3s ease}.profile-comparison__card:hover{border-color:#ccc;box-shadow:0 4px 12px #00000026}.profile-comparison__card--left{border-left:3px solid #45899b}.profile-comparison__card--right{border-left:3px solid #9c27b0}.profile-comparison__name{font-size:20px;font-weight:600;color:#666;margin:0 0 20px;padding-bottom:12px;border-bottom:1px solid #dfe0e3}.profile-comparison__attributes{display:flex;flex-direction:column;gap:12px}.profile-comparison__attribute{display:flex;flex-direction:column;gap:4px;padding:12px;background-color:#464a4c;border-radius:6px;border:1px solid transparent;transition:all .2s ease}.profile-comparison__attribute:hover{background-color:#eeeef0;border-color:#ccc}.profile-comparison__attribute--match{border-left:3px solid #599b4e;background-color:#599b4e1a}.profile-comparison__attribute-label{font-size:12px;color:#f4f6f7;text-transform:uppercase;letter-spacing:.5px;font-weight:500}.profile-comparison__attribute-value{font-size:14px;color:#666;font-weight:400}\n"] }]
+            args: [{ selector: 'lib-profile-comparison', imports: [CommonModule, TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"profile-comparison\">\n  <div class=\"profile-comparison__container\">\n    <!-- Left Profile -->\n    <div class=\"profile-comparison__card profile-comparison__card--left\">\n      <h3 class=\"profile-comparison__name\">{{ comparisonData.leftProfile.name }}</h3>\n      <div class=\"profile-comparison__attributes\">\n        @for (attr of comparisonData.leftProfile.attributes; track $index) {\n          <div class=\"profile-comparison__attribute\" [ngClass]=\"{ 'profile-comparison__attribute--match': attr.match }\">\n            <span class=\"profile-comparison__attribute-label\">{{ attr.label }}</span>\n            <span class=\"profile-comparison__attribute-value\">{{ attr.value }}</span>\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- Right Profile -->\n    <div class=\"profile-comparison__card profile-comparison__card--right\">\n      <h3 class=\"profile-comparison__name\">{{ comparisonData.rightProfile.name }}</h3>\n      <div class=\"profile-comparison__attributes\">\n        @for (attr of comparisonData.rightProfile.attributes; track $index) {\n          <div class=\"profile-comparison__attribute\" [ngClass]=\"{ 'profile-comparison__attribute--match': attr.match }\">\n            <span class=\"profile-comparison__attribute-label\">{{ attr.label }}</span>\n            <span class=\"profile-comparison__attribute-value\">{{ attr.value }}</span>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".profile-comparison{width:100%;padding:16px}.profile-comparison__container{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1200px;margin:0 auto}@media (max-width: 768px){.profile-comparison__container{grid-template-columns:1fr;gap:24px}}.profile-comparison__card{background-color:#464a4c;border:1px solid #dfe0e3;border-radius:8px;padding:20px;transition:all .3s ease}.profile-comparison__card:hover{border-color:#ccc;box-shadow:0 4px 12px #00000026}.profile-comparison__card--left{border-left:3px solid #45899b}.profile-comparison__card--right{border-left:3px solid #9c27b0}.profile-comparison__name{font-size:20px;font-weight:600;color:#666;margin:0 0 20px;padding-bottom:12px;border-bottom:1px solid #dfe0e3}.profile-comparison__attributes{display:flex;flex-direction:column;gap:12px}.profile-comparison__attribute{display:flex;flex-direction:column;gap:4px;padding:12px;background-color:#464a4c;border-radius:6px;border:1px solid transparent;transition:all .2s ease}.profile-comparison__attribute:hover{background-color:#eeeef0;border-color:#ccc}.profile-comparison__attribute--match{border-left:3px solid #599b4e;background-color:#599b4e1a}.profile-comparison__attribute-label{font-size:12px;color:#f4f6f7;text-transform:uppercase;letter-spacing:.5px;font-weight:500}.profile-comparison__attribute-value{font-size:14px;color:#666;font-weight:400}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { config: [{
                 type: Input
             }] } });
@@ -4644,7 +4632,7 @@ class LibComposeMacherDashComponent {
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibComposeMacherDashComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LibComposeMacherDashComponent, isStandalone: true, selector: "lib-compose-matcher-dash", inputs: { config: "config" }, outputs: { addMessage: "addMessage", updateLLMConversation: "updateLLMConversation", getMessages: "getMessages", bookEvent: "bookEvent", removeSuggestion: "removeSuggestion", activeIndexChange: "activeIndexChange" }, ngImport: i0, template: "<div class=\"compose-matcher\">\n  <lib-client-home\n    [config]=\"{\n      chatAdsTemplate: config.chatAdsTemplate,\n      schedulerAdsTemplate: config.schedulerAdsTemplate,\n      schedulerTabAdsTemplate: config.schedulerTabAdsTemplate,\n      loading: config.loading,\n      activeIndex: config.activeIndex,\n      clientMatches$: config.clientMatches$,\n      component: components.ChatHandoff,\n      chatInputValue: suggest,\n      bottomThumbs: false,\n      default: config.default,\n      alertStatus: config.alertStatus,\n      showValueProportionLabel: true,\n    }\"\n    (addMessage)=\"addMessage?.emit($event)\"\n    (getMessages)=\"getMessages?.emit($event)\"\n    (updateLLMConversation)=\"updateLLMConversation?.emit($event)\"\n    (activeIndexChange)=\"onActiveProspectChange($event)\"\n  ></lib-client-home>\n  <lib-swipeable-tabs\n    [activeIndex]=\"config?.activeTabIndex\"\n    [slideContentMaxHeight]=\"config?.slideContentMaxHeight\"\n    [bottomThumbs]=\"false\"\n    (activeIndexChange)=\"onActiveTabIndexChange($event)\"\n  >\n    <ng-container thumb-slides>\n      @for (status of statuses; let i = $index; track status) {\n        <swiper-slide class=\"bubble-btn\">\n          <lib-bubble-btn class=\"custom-bubble-status\" [title]=\"status.title\" [hasIcon]=\"true\" (click)=\"config.activeTabIndex = i\">\n            @if (status.isText) {\n              <div class=\"time-wrapper\">\n                <span\n                  *ngFor=\"let part of ((clientMatches$ | async)?.[config?.activeIndex]?.prospectResponseTime ?? '0h 0m 0s').split(' ')\"\n                  class=\"time\"\n                  [ngClass]=\"{ active: config?.activeTabIndex === i }\"\n                >\n                  {{ part }}\n                </span>\n              </div>\n            } @else {\n              <img [src]=\"status.icon\" width=\"18px\" height=\"18px\" [ngClass]=\"{ active: config?.activeTabIndex === i }\" />\n            }\n          </lib-bubble-btn>\n        </swiper-slide>\n      }\n    </ng-container>\n    <ng-container main-slides>\n      <swiper-slide *ngIf=\"config?.clientMatches$ | async as clientMatches\">\n        <ng-container *ngIf=\"clientMatches[config?.activeIndex]?.prospectData as activeChat\">\n          <lib-chat-suggestion [chatSuggestions]=\"activeChat.chatSuggestions\" (suggestClicked)=\"suggest = $event\" [default]=\"config?.default\"></lib-chat-suggestion>\n\n          <div class=\"llm-preference-container\">\n            <lib-form-field\n              [label]=\"'LLM Preference'\"\n              [defaultValue]=\"activeChat.llmPreference\"\n              [placeholder]=\"'Select LLM Preference'\"\n              [options]=\"config.llmPreferenceOptions | updateLLMPreference: (activeChat?.llmPreferenceLoading$ | async)\"\n              [type]=\"FormFieldType.radio\"\n              (valueChange)=\"updateLLMConversation.emit({ chatId: activeChat._id, llmPreference: $event, prospectName: activeChat.name })\"\n            ></lib-form-field>\n          </div>\n        </ng-container>\n      </swiper-slide>\n      <swiper-slide>\n        <div class=\"slide-content without-shadow\">\n          <div class=\"count-booked\">{{ schedularCounts.booked }} booked - {{ schedularCounts.suggested }} suggested</div>\n          <lib-scheduler\n            [adsTemplate]=\"config?.schedulerAdsTemplate\"\n            [events$]=\"config?.events$\"\n            (bookEvent)=\"bookEvent?.emit($event)\"\n            (removeSuggestion)=\"removeSuggestion?.emit($event)\"\n            [default]=\"config?.default\"\n          ></lib-scheduler>\n          <div class=\"prospect-calendar\">Fill in Client and Prospect calendar data for more</div>\n        </div>\n      </swiper-slide>\n      <swiper-slide>\n        <div class=\"plan-container\">\n          <lib-spider-chart\n            [config]=\"config?.spiderConfig\"\n            [datasets]=\"config?.spiderConfig.datasets\"\n            [polygon_colors]=\"config?.polygonColors\"\n            [default]=\"config?.default\"\n          ></lib-spider-chart>\n          <img width=\"280px\" height=\"250px\" src=\"assets/trait-visual/force-directed-graph.png\" />\n        </div>\n      </swiper-slide>\n      <swiper-slide>\n        <lib-profile-card [profile]=\"(config?.clientMatches$ | async)?.[config?.activeIndex] | getProfileWithProgress\"></lib-profile-card>\n      </swiper-slide>\n      <swiper-slide>\n        <div class=\"slide-content\">\n          <ng-container *ngIf=\"config?.clientMatches$ | async as clientMatches\">\n            <lib-profile-comparison\n              [config]=\"{\n                data: {\n                  leftProfile: {\n                    name: clientMatches[config?.activeIndex]?.primary?.name || 'Client',\n                    attributes: getClientAttributes(clientMatches[config?.activeIndex])\n                  },\n                  rightProfile: {\n                    name: clientMatches[config?.activeIndex]?.secondary?.name || 'Prospect',\n                    attributes: getProspectAttributes(clientMatches[config?.activeIndex])\n                  }\n                },\n                default: config?.default\n              }\"\n            ></lib-profile-comparison>\n          </ng-container>\n        </div>\n      </swiper-slide>\n    </ng-container>\n  </lib-swipeable-tabs>\n  @if (\n    (config?.default && config?.activeTabIndex === 0) ||\n    (config?.default && config?.activeTabIndex === 1) ||\n    (config?.default && config?.activeTabIndex === 2) ||\n    (config?.default && config?.activeTabIndex === 3)\n  ) {\n    <div class=\"alert-popup\">\n      <lib-alert-popup [title]=\"'Compatibility Profile'\" [description]=\"'Once you have prospects, we will show you they stock up!'\"></lib-alert-popup>\n    </div>\n  }\n</div>\n", styles: [":host{--match-percentage-fornt-size: 1.5em;--container-sides-shadow-width: 25px;--match-percentage-value-height: 3em}.compose-matcher{position:relative;padding:0 60px;gap:20px}.compose-matcher img.active{filter:brightness(0) saturate(100%) invert(49%) sepia(70%) saturate(5452%) hue-rotate(321deg) brightness(99%) contrast(102%)}.compose-matcher span.active{color:#fe3c72}.compose-matcher .time-wrapper{display:flex;flex-direction:column;align-items:center}.compose-matcher .time{font-size:8px;height:8px;line-height:8px}swiper-slide{display:flex;justify-content:center}swiper-slide lib-chat-suggestion,swiper-slide lib-profile-card{margin-top:1em}.slide-content{height:auto;width:100%;position:relative;display:block;overflow:auto;padding:0 5px}.slide-content:not(.without-shadow){border-radius:10px;padding:20px;box-shadow:5.70371px 5.70371px 11.40741px #00000052 inset,-3.42222px -3.42222px 4.56296px #ffffff1a inset}.bubble-btn{padding:12px;min-width:25%}.prospect-calendar{display:flex;justify-content:center;margin-top:10px;color:#ebebf599;font-size:10px}.count-booked{display:flex;justify-content:center;margin-top:10px}.plan-container{display:flex}.alert-popup{position:absolute;z-index:999;bottom:100px;right:0}.llm-preference-container{display:flex;gap:.5em;align-items:center;justify-content:space-around;margin-left:16px;margin-right:-50px;flex-direction:column}@media (max-width: 576px){.compose-matcher{padding:0}.plan-container{flex-direction:column;align-items:center}.alert-popup{position:absolute;z-index:999;top:280px;right:5px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: LibChatComponentModule }, { kind: "ngmodule", type: LibAgendaModule }, { kind: "ngmodule", type: PipeModule }, { kind: "component", type: LibClientHomeComponent, selector: "lib-client-home", inputs: ["config"], outputs: ["activeIndexChange", "addMessage", "getMessages", "bookEvent", "removeSuggestion", "handleAppearPopup"] }, { kind: "component", type: ChatSuggestionComponent, selector: "lib-chat-suggestion", inputs: ["chatSuggestions"], outputs: ["suggestClicked"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2.BubbleBtnComponent, selector: "lib-bubble-btn", inputs: ["title", "subTitle", "hasIcon", "checked", "disabled", "loading$"] }, { kind: "component", type: LibSchedulerComponent, selector: "lib-scheduler", inputs: ["adsTemplate", "loading$", "emptyMessage", "displayBookedStatuses", "displayEmptyDays", "events$", "startDate", "endDate", "default"], outputs: ["bookEvent", "removeSuggestion"] }, { kind: "component", type: SpiderChartComponent, selector: "lib-spider-chart", inputs: ["datasets", "config", "polygon_colors", "showChartInfo"] }, { kind: "ngmodule", type: ProfileCardModule }, { kind: "component", type: ProfileCardComponent, selector: "lib-profile-card", inputs: ["profile", "progressText"] }, { kind: "component", type: LibProfileComparisonComponent, selector: "lib-profile-comparison", inputs: ["config"] }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: AlertPopupComponent, selector: "lib-alert-popup", inputs: ["title", "description", "timeState", "number"], outputs: ["closed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormFieldModule }, { kind: "component", type: i2.FormFieldComponent, selector: "lib-form-field", inputs: ["fieldName", "label", "placeholder", "message", "useTooltips", "descriptionText", "formFieldControl", "submitted", "required", "type", "plusIconUrl", "minusIconUrl", "maxLength", "max", "min", "pinValue", "dualKnobs", "reverseBarColor", "defaultValue", "noMargin", "options", "iconHtml", "invalidPatternMessage", "dateFormat", "currencySymbol", "hideCents", "isEditable", "rowEditConfirmationObsv", "errorInlineMode", "showLabelInRequiredErrorMessage", "decimalPosition", "hyperlinkTarget", "readOnly", "focus", "showRequiredIndicator", "maxDate", "minDate", "radioTranslateLabels", "radioDeselectable", "radioRippleEffect"], outputs: ["rowEdit", "focusOut", "valueChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: UpdateLLMPreferencePipe, name: "updateLLMPreference" }, { kind: "pipe", type: GetProfileWithProgressPipe, name: "getProfileWithProgress" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LibComposeMacherDashComponent, isStandalone: true, selector: "lib-compose-matcher-dash", inputs: { config: "config" }, outputs: { addMessage: "addMessage", updateLLMConversation: "updateLLMConversation", getMessages: "getMessages", bookEvent: "bookEvent", removeSuggestion: "removeSuggestion", activeIndexChange: "activeIndexChange" }, ngImport: i0, template: "<div class=\"compose-matcher\">\n  <lib-client-home\n    [config]=\"{\n      chatAdsTemplate: config.chatAdsTemplate,\n      schedulerAdsTemplate: config.schedulerAdsTemplate,\n      schedulerTabAdsTemplate: config.schedulerTabAdsTemplate,\n      loading: config.loading,\n      activeIndex: config.activeIndex,\n      clientMatches$: config.clientMatches$,\n      component: components.ChatHandoff,\n      chatInputValue: suggest,\n      bottomThumbs: false,\n      default: config.default,\n      alertStatus: config.alertStatus,\n      showValueProportionLabel: true,\n    }\"\n    (addMessage)=\"addMessage?.emit($event)\"\n    (getMessages)=\"getMessages?.emit($event)\"\n    (updateLLMConversation)=\"updateLLMConversation?.emit($event)\"\n    (activeIndexChange)=\"onActiveProspectChange($event)\"\n  ></lib-client-home>\n  <lib-swipeable-tabs\n    [activeIndex]=\"config?.activeTabIndex\"\n    [slideContentMaxHeight]=\"config?.slideContentMaxHeight\"\n    [bottomThumbs]=\"false\"\n    (activeIndexChange)=\"onActiveTabIndexChange($event)\"\n  >\n    <ng-container thumb-slides>\n      @for (status of statuses; let i = $index; track status) {\n        <swiper-slide class=\"bubble-btn\">\n          <lib-bubble-btn class=\"custom-bubble-status\" [title]=\"status.title\" [hasIcon]=\"true\" (click)=\"config.activeTabIndex = i\">\n            @if (status.isText) {\n              <div class=\"time-wrapper\">\n                <span\n                  *ngFor=\"let part of ((clientMatches$ | async)?.[config?.activeIndex]?.prospectResponseTime ?? '0h 0m 0s').split(' ')\"\n                  class=\"time\"\n                  [ngClass]=\"{ active: config?.activeTabIndex === i }\"\n                >\n                  {{ part }}\n                </span>\n              </div>\n            } @else {\n              <img [src]=\"status.icon\" width=\"18px\" height=\"18px\" [ngClass]=\"{ active: config?.activeTabIndex === i }\" />\n            }\n          </lib-bubble-btn>\n        </swiper-slide>\n      }\n    </ng-container>\n    <ng-container main-slides>\n      <swiper-slide *ngIf=\"config?.clientMatches$ | async as clientMatches\">\n        <ng-container *ngIf=\"clientMatches[config?.activeIndex]?.prospectData as activeChat\">\n          <lib-chat-suggestion [chatSuggestions]=\"activeChat.chatSuggestions\" (suggestClicked)=\"suggest = $event\" [default]=\"config?.default\"></lib-chat-suggestion>\n\n          <div class=\"llm-preference-container\">\n            <lib-form-field\n              [label]=\"'LLM Preference'\"\n              [defaultValue]=\"activeChat.llmPreference\"\n              [placeholder]=\"'Select LLM Preference'\"\n              [options]=\"config.llmPreferenceOptions | updateLLMPreference: (activeChat?.llmPreferenceLoading$ | async)\"\n              [type]=\"FormFieldType.radio\"\n              (valueChange)=\"updateLLMConversation.emit({ chatId: activeChat._id, llmPreference: $event, prospectName: activeChat.name })\"\n            ></lib-form-field>\n          </div>\n        </ng-container>\n      </swiper-slide>\n      <swiper-slide>\n        <div class=\"slide-content without-shadow\">\n          <div class=\"count-booked\">{{ schedularCounts.booked }} booked - {{ schedularCounts.suggested }} suggested</div>\n          <lib-scheduler\n            [adsTemplate]=\"config?.schedulerAdsTemplate\"\n            [events$]=\"config?.events$\"\n            (bookEvent)=\"bookEvent?.emit($event)\"\n            (removeSuggestion)=\"removeSuggestion?.emit($event)\"\n            [default]=\"config?.default\"\n          ></lib-scheduler>\n          <div class=\"prospect-calendar\">Fill in Client and Prospect calendar data for more</div>\n        </div>\n      </swiper-slide>\n      <swiper-slide>\n        <div class=\"plan-container\">\n          <lib-spider-chart\n            [config]=\"config?.spiderConfig\"\n            [datasets]=\"config?.spiderConfig.datasets\"\n            [polygon_colors]=\"config?.polygonColors\"\n            [default]=\"config?.default\"\n          ></lib-spider-chart>\n          <img width=\"280px\" height=\"250px\" src=\"assets/trait-visual/force-directed-graph.png\" />\n        </div>\n      </swiper-slide>\n      <swiper-slide>\n        <lib-profile-card [profile]=\"(config?.clientMatches$ | async)?.[config?.activeIndex] | getProfileWithProgress\"></lib-profile-card>\n      </swiper-slide>\n      <swiper-slide>\n        <div class=\"slide-content\">\n          <ng-container *ngIf=\"config?.clientMatches$ | async as clientMatches\">\n            <lib-profile-comparison\n              [config]=\"{\n                data: {\n                  leftProfile: {\n                    name: clientMatches[config?.activeIndex]?.primary?.name || 'Client',\n                    attributes: getClientAttributes(clientMatches[config?.activeIndex]),\n                  },\n                  rightProfile: {\n                    name: clientMatches[config?.activeIndex]?.secondary?.name || 'Prospect',\n                    attributes: getProspectAttributes(clientMatches[config?.activeIndex]),\n                  },\n                },\n                default: config?.default,\n              }\"\n            ></lib-profile-comparison>\n          </ng-container>\n        </div>\n      </swiper-slide>\n    </ng-container>\n  </lib-swipeable-tabs>\n  @if (\n    (config?.default && config?.activeTabIndex === 0) ||\n    (config?.default && config?.activeTabIndex === 1) ||\n    (config?.default && config?.activeTabIndex === 2) ||\n    (config?.default && config?.activeTabIndex === 3)\n  ) {\n    <div class=\"alert-popup\">\n      <lib-alert-popup [title]=\"'Compatibility Profile'\" [description]=\"'Once you have prospects, we will show you they stock up!'\"></lib-alert-popup>\n    </div>\n  }\n</div>\n", styles: [":host{--match-percentage-fornt-size: 1.5em;--container-sides-shadow-width: 25px;--match-percentage-value-height: 3em}.compose-matcher{position:relative;padding:0 60px;gap:20px}.compose-matcher img.active{filter:brightness(0) saturate(100%) invert(49%) sepia(70%) saturate(5452%) hue-rotate(321deg) brightness(99%) contrast(102%)}.compose-matcher span.active{color:#fe3c72}.compose-matcher .time-wrapper{display:flex;flex-direction:column;align-items:center}.compose-matcher .time{font-size:8px;height:8px;line-height:8px}swiper-slide{display:flex;justify-content:center}swiper-slide lib-chat-suggestion,swiper-slide lib-profile-card{margin-top:1em}.slide-content{height:auto;width:100%;position:relative;display:block;overflow:auto;padding:0 5px}.slide-content:not(.without-shadow){border-radius:10px;padding:20px;box-shadow:5.70371px 5.70371px 11.40741px #00000052 inset,-3.42222px -3.42222px 4.56296px #ffffff1a inset}.bubble-btn{padding:12px;min-width:25%}.prospect-calendar{display:flex;justify-content:center;margin-top:10px;color:#ebebf599;font-size:10px}.count-booked{display:flex;justify-content:center;margin-top:10px}.plan-container{display:flex}.alert-popup{position:absolute;z-index:999;bottom:100px;right:0}.llm-preference-container{display:flex;gap:.5em;align-items:center;justify-content:space-around;margin-left:16px;margin-right:-50px;flex-direction:column}@media (max-width: 576px){.compose-matcher{padding:0}.plan-container{flex-direction:column;align-items:center}.alert-popup{position:absolute;z-index:999;top:280px;right:5px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: LibChatComponentModule }, { kind: "ngmodule", type: LibAgendaModule }, { kind: "ngmodule", type: PipeModule }, { kind: "component", type: LibClientHomeComponent, selector: "lib-client-home", inputs: ["config"], outputs: ["activeIndexChange", "addMessage", "getMessages", "bookEvent", "removeSuggestion", "handleAppearPopup"] }, { kind: "component", type: ChatSuggestionComponent, selector: "lib-chat-suggestion", inputs: ["chatSuggestions"], outputs: ["suggestClicked"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2.BubbleBtnComponent, selector: "lib-bubble-btn", inputs: ["title", "subTitle", "hasIcon", "checked", "disabled", "loading$"] }, { kind: "component", type: LibSchedulerComponent, selector: "lib-scheduler", inputs: ["adsTemplate", "loading$", "emptyMessage", "displayBookedStatuses", "displayEmptyDays", "events$", "startDate", "endDate", "default"], outputs: ["bookEvent", "removeSuggestion"] }, { kind: "component", type: SpiderChartComponent, selector: "lib-spider-chart", inputs: ["datasets", "config", "polygon_colors", "showChartInfo"] }, { kind: "ngmodule", type: ProfileCardModule }, { kind: "component", type: ProfileCardComponent, selector: "lib-profile-card", inputs: ["profile", "progressText"] }, { kind: "component", type: LibProfileComparisonComponent, selector: "lib-profile-comparison", inputs: ["config"] }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: AlertPopupComponent, selector: "lib-alert-popup", inputs: ["title", "description", "timeState", "number"], outputs: ["closed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormFieldModule }, { kind: "component", type: i2.FormFieldComponent, selector: "lib-form-field", inputs: ["fieldName", "label", "placeholder", "message", "useTooltips", "descriptionText", "formFieldControl", "submitted", "required", "type", "plusIconUrl", "minusIconUrl", "maxLength", "max", "min", "pinValue", "dualKnobs", "reverseBarColor", "defaultValue", "noMargin", "options", "iconHtml", "invalidPatternMessage", "dateFormat", "currencySymbol", "hideCents", "isEditable", "rowEditConfirmationObsv", "errorInlineMode", "showLabelInRequiredErrorMessage", "decimalPosition", "hyperlinkTarget", "readOnly", "focus", "showRequiredIndicator", "maxDate", "minDate", "radioTranslateLabels", "radioDeselectable", "radioRippleEffect"], outputs: ["rowEdit", "focusOut", "valueChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: UpdateLLMPreferencePipe, name: "updateLLMPreference" }, { kind: "pipe", type: GetProfileWithProgressPipe, name: "getProfileWithProgress" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LibComposeMacherDashComponent, decorators: [{
             type: Component,
@@ -4668,7 +4656,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                         FormFieldModule,
                         UpdateLLMPreferencePipe,
                         GetProfileWithProgressPipe,
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"compose-matcher\">\n  <lib-client-home\n    [config]=\"{\n      chatAdsTemplate: config.chatAdsTemplate,\n      schedulerAdsTemplate: config.schedulerAdsTemplate,\n      schedulerTabAdsTemplate: config.schedulerTabAdsTemplate,\n      loading: config.loading,\n      activeIndex: config.activeIndex,\n      clientMatches$: config.clientMatches$,\n      component: components.ChatHandoff,\n      chatInputValue: suggest,\n      bottomThumbs: false,\n      default: config.default,\n      alertStatus: config.alertStatus,\n      showValueProportionLabel: true,\n    }\"\n    (addMessage)=\"addMessage?.emit($event)\"\n    (getMessages)=\"getMessages?.emit($event)\"\n    (updateLLMConversation)=\"updateLLMConversation?.emit($event)\"\n    (activeIndexChange)=\"onActiveProspectChange($event)\"\n  ></lib-client-home>\n  <lib-swipeable-tabs\n    [activeIndex]=\"config?.activeTabIndex\"\n    [slideContentMaxHeight]=\"config?.slideContentMaxHeight\"\n    [bottomThumbs]=\"false\"\n    (activeIndexChange)=\"onActiveTabIndexChange($event)\"\n  >\n    <ng-container thumb-slides>\n      @for (status of statuses; let i = $index; track status) {\n        <swiper-slide class=\"bubble-btn\">\n          <lib-bubble-btn class=\"custom-bubble-status\" [title]=\"status.title\" [hasIcon]=\"true\" (click)=\"config.activeTabIndex = i\">\n            @if (status.isText) {\n              <div class=\"time-wrapper\">\n                <span\n                  *ngFor=\"let part of ((clientMatches$ | async)?.[config?.activeIndex]?.prospectResponseTime ?? '0h 0m 0s').split(' ')\"\n                  class=\"time\"\n                  [ngClass]=\"{ active: config?.activeTabIndex === i }\"\n                >\n                  {{ part }}\n                </span>\n              </div>\n            } @else {\n              <img [src]=\"status.icon\" width=\"18px\" height=\"18px\" [ngClass]=\"{ active: config?.activeTabIndex === i }\" />\n            }\n          </lib-bubble-btn>\n        </swiper-slide>\n      }\n    </ng-container>\n    <ng-container main-slides>\n      <swiper-slide *ngIf=\"config?.clientMatches$ | async as clientMatches\">\n        <ng-container *ngIf=\"clientMatches[config?.activeIndex]?.prospectData as activeChat\">\n          <lib-chat-suggestion [chatSuggestions]=\"activeChat.chatSuggestions\" (suggestClicked)=\"suggest = $event\" [default]=\"config?.default\"></lib-chat-suggestion>\n\n          <div class=\"llm-preference-container\">\n            <lib-form-field\n              [label]=\"'LLM Preference'\"\n              [defaultValue]=\"activeChat.llmPreference\"\n              [placeholder]=\"'Select LLM Preference'\"\n              [options]=\"config.llmPreferenceOptions | updateLLMPreference: (activeChat?.llmPreferenceLoading$ | async)\"\n              [type]=\"FormFieldType.radio\"\n              (valueChange)=\"updateLLMConversation.emit({ chatId: activeChat._id, llmPreference: $event, prospectName: activeChat.name })\"\n            ></lib-form-field>\n          </div>\n        </ng-container>\n      </swiper-slide>\n      <swiper-slide>\n        <div class=\"slide-content without-shadow\">\n          <div class=\"count-booked\">{{ schedularCounts.booked }} booked - {{ schedularCounts.suggested }} suggested</div>\n          <lib-scheduler\n            [adsTemplate]=\"config?.schedulerAdsTemplate\"\n            [events$]=\"config?.events$\"\n            (bookEvent)=\"bookEvent?.emit($event)\"\n            (removeSuggestion)=\"removeSuggestion?.emit($event)\"\n            [default]=\"config?.default\"\n          ></lib-scheduler>\n          <div class=\"prospect-calendar\">Fill in Client and Prospect calendar data for more</div>\n        </div>\n      </swiper-slide>\n      <swiper-slide>\n        <div class=\"plan-container\">\n          <lib-spider-chart\n            [config]=\"config?.spiderConfig\"\n            [datasets]=\"config?.spiderConfig.datasets\"\n            [polygon_colors]=\"config?.polygonColors\"\n            [default]=\"config?.default\"\n          ></lib-spider-chart>\n          <img width=\"280px\" height=\"250px\" src=\"assets/trait-visual/force-directed-graph.png\" />\n        </div>\n      </swiper-slide>\n      <swiper-slide>\n        <lib-profile-card [profile]=\"(config?.clientMatches$ | async)?.[config?.activeIndex] | getProfileWithProgress\"></lib-profile-card>\n      </swiper-slide>\n      <swiper-slide>\n        <div class=\"slide-content\">\n          <ng-container *ngIf=\"config?.clientMatches$ | async as clientMatches\">\n            <lib-profile-comparison\n              [config]=\"{\n                data: {\n                  leftProfile: {\n                    name: clientMatches[config?.activeIndex]?.primary?.name || 'Client',\n                    attributes: getClientAttributes(clientMatches[config?.activeIndex])\n                  },\n                  rightProfile: {\n                    name: clientMatches[config?.activeIndex]?.secondary?.name || 'Prospect',\n                    attributes: getProspectAttributes(clientMatches[config?.activeIndex])\n                  }\n                },\n                default: config?.default\n              }\"\n            ></lib-profile-comparison>\n          </ng-container>\n        </div>\n      </swiper-slide>\n    </ng-container>\n  </lib-swipeable-tabs>\n  @if (\n    (config?.default && config?.activeTabIndex === 0) ||\n    (config?.default && config?.activeTabIndex === 1) ||\n    (config?.default && config?.activeTabIndex === 2) ||\n    (config?.default && config?.activeTabIndex === 3)\n  ) {\n    <div class=\"alert-popup\">\n      <lib-alert-popup [title]=\"'Compatibility Profile'\" [description]=\"'Once you have prospects, we will show you they stock up!'\"></lib-alert-popup>\n    </div>\n  }\n</div>\n", styles: [":host{--match-percentage-fornt-size: 1.5em;--container-sides-shadow-width: 25px;--match-percentage-value-height: 3em}.compose-matcher{position:relative;padding:0 60px;gap:20px}.compose-matcher img.active{filter:brightness(0) saturate(100%) invert(49%) sepia(70%) saturate(5452%) hue-rotate(321deg) brightness(99%) contrast(102%)}.compose-matcher span.active{color:#fe3c72}.compose-matcher .time-wrapper{display:flex;flex-direction:column;align-items:center}.compose-matcher .time{font-size:8px;height:8px;line-height:8px}swiper-slide{display:flex;justify-content:center}swiper-slide lib-chat-suggestion,swiper-slide lib-profile-card{margin-top:1em}.slide-content{height:auto;width:100%;position:relative;display:block;overflow:auto;padding:0 5px}.slide-content:not(.without-shadow){border-radius:10px;padding:20px;box-shadow:5.70371px 5.70371px 11.40741px #00000052 inset,-3.42222px -3.42222px 4.56296px #ffffff1a inset}.bubble-btn{padding:12px;min-width:25%}.prospect-calendar{display:flex;justify-content:center;margin-top:10px;color:#ebebf599;font-size:10px}.count-booked{display:flex;justify-content:center;margin-top:10px}.plan-container{display:flex}.alert-popup{position:absolute;z-index:999;bottom:100px;right:0}.llm-preference-container{display:flex;gap:.5em;align-items:center;justify-content:space-around;margin-left:16px;margin-right:-50px;flex-direction:column}@media (max-width: 576px){.compose-matcher{padding:0}.plan-container{flex-direction:column;align-items:center}.alert-popup{position:absolute;z-index:999;top:280px;right:5px}}\n"] }]
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"compose-matcher\">\n  <lib-client-home\n    [config]=\"{\n      chatAdsTemplate: config.chatAdsTemplate,\n      schedulerAdsTemplate: config.schedulerAdsTemplate,\n      schedulerTabAdsTemplate: config.schedulerTabAdsTemplate,\n      loading: config.loading,\n      activeIndex: config.activeIndex,\n      clientMatches$: config.clientMatches$,\n      component: components.ChatHandoff,\n      chatInputValue: suggest,\n      bottomThumbs: false,\n      default: config.default,\n      alertStatus: config.alertStatus,\n      showValueProportionLabel: true,\n    }\"\n    (addMessage)=\"addMessage?.emit($event)\"\n    (getMessages)=\"getMessages?.emit($event)\"\n    (updateLLMConversation)=\"updateLLMConversation?.emit($event)\"\n    (activeIndexChange)=\"onActiveProspectChange($event)\"\n  ></lib-client-home>\n  <lib-swipeable-tabs\n    [activeIndex]=\"config?.activeTabIndex\"\n    [slideContentMaxHeight]=\"config?.slideContentMaxHeight\"\n    [bottomThumbs]=\"false\"\n    (activeIndexChange)=\"onActiveTabIndexChange($event)\"\n  >\n    <ng-container thumb-slides>\n      @for (status of statuses; let i = $index; track status) {\n        <swiper-slide class=\"bubble-btn\">\n          <lib-bubble-btn class=\"custom-bubble-status\" [title]=\"status.title\" [hasIcon]=\"true\" (click)=\"config.activeTabIndex = i\">\n            @if (status.isText) {\n              <div class=\"time-wrapper\">\n                <span\n                  *ngFor=\"let part of ((clientMatches$ | async)?.[config?.activeIndex]?.prospectResponseTime ?? '0h 0m 0s').split(' ')\"\n                  class=\"time\"\n                  [ngClass]=\"{ active: config?.activeTabIndex === i }\"\n                >\n                  {{ part }}\n                </span>\n              </div>\n            } @else {\n              <img [src]=\"status.icon\" width=\"18px\" height=\"18px\" [ngClass]=\"{ active: config?.activeTabIndex === i }\" />\n            }\n          </lib-bubble-btn>\n        </swiper-slide>\n      }\n    </ng-container>\n    <ng-container main-slides>\n      <swiper-slide *ngIf=\"config?.clientMatches$ | async as clientMatches\">\n        <ng-container *ngIf=\"clientMatches[config?.activeIndex]?.prospectData as activeChat\">\n          <lib-chat-suggestion [chatSuggestions]=\"activeChat.chatSuggestions\" (suggestClicked)=\"suggest = $event\" [default]=\"config?.default\"></lib-chat-suggestion>\n\n          <div class=\"llm-preference-container\">\n            <lib-form-field\n              [label]=\"'LLM Preference'\"\n              [defaultValue]=\"activeChat.llmPreference\"\n              [placeholder]=\"'Select LLM Preference'\"\n              [options]=\"config.llmPreferenceOptions | updateLLMPreference: (activeChat?.llmPreferenceLoading$ | async)\"\n              [type]=\"FormFieldType.radio\"\n              (valueChange)=\"updateLLMConversation.emit({ chatId: activeChat._id, llmPreference: $event, prospectName: activeChat.name })\"\n            ></lib-form-field>\n          </div>\n        </ng-container>\n      </swiper-slide>\n      <swiper-slide>\n        <div class=\"slide-content without-shadow\">\n          <div class=\"count-booked\">{{ schedularCounts.booked }} booked - {{ schedularCounts.suggested }} suggested</div>\n          <lib-scheduler\n            [adsTemplate]=\"config?.schedulerAdsTemplate\"\n            [events$]=\"config?.events$\"\n            (bookEvent)=\"bookEvent?.emit($event)\"\n            (removeSuggestion)=\"removeSuggestion?.emit($event)\"\n            [default]=\"config?.default\"\n          ></lib-scheduler>\n          <div class=\"prospect-calendar\">Fill in Client and Prospect calendar data for more</div>\n        </div>\n      </swiper-slide>\n      <swiper-slide>\n        <div class=\"plan-container\">\n          <lib-spider-chart\n            [config]=\"config?.spiderConfig\"\n            [datasets]=\"config?.spiderConfig.datasets\"\n            [polygon_colors]=\"config?.polygonColors\"\n            [default]=\"config?.default\"\n          ></lib-spider-chart>\n          <img width=\"280px\" height=\"250px\" src=\"assets/trait-visual/force-directed-graph.png\" />\n        </div>\n      </swiper-slide>\n      <swiper-slide>\n        <lib-profile-card [profile]=\"(config?.clientMatches$ | async)?.[config?.activeIndex] | getProfileWithProgress\"></lib-profile-card>\n      </swiper-slide>\n      <swiper-slide>\n        <div class=\"slide-content\">\n          <ng-container *ngIf=\"config?.clientMatches$ | async as clientMatches\">\n            <lib-profile-comparison\n              [config]=\"{\n                data: {\n                  leftProfile: {\n                    name: clientMatches[config?.activeIndex]?.primary?.name || 'Client',\n                    attributes: getClientAttributes(clientMatches[config?.activeIndex]),\n                  },\n                  rightProfile: {\n                    name: clientMatches[config?.activeIndex]?.secondary?.name || 'Prospect',\n                    attributes: getProspectAttributes(clientMatches[config?.activeIndex]),\n                  },\n                },\n                default: config?.default,\n              }\"\n            ></lib-profile-comparison>\n          </ng-container>\n        </div>\n      </swiper-slide>\n    </ng-container>\n  </lib-swipeable-tabs>\n  @if (\n    (config?.default && config?.activeTabIndex === 0) ||\n    (config?.default && config?.activeTabIndex === 1) ||\n    (config?.default && config?.activeTabIndex === 2) ||\n    (config?.default && config?.activeTabIndex === 3)\n  ) {\n    <div class=\"alert-popup\">\n      <lib-alert-popup [title]=\"'Compatibility Profile'\" [description]=\"'Once you have prospects, we will show you they stock up!'\"></lib-alert-popup>\n    </div>\n  }\n</div>\n", styles: [":host{--match-percentage-fornt-size: 1.5em;--container-sides-shadow-width: 25px;--match-percentage-value-height: 3em}.compose-matcher{position:relative;padding:0 60px;gap:20px}.compose-matcher img.active{filter:brightness(0) saturate(100%) invert(49%) sepia(70%) saturate(5452%) hue-rotate(321deg) brightness(99%) contrast(102%)}.compose-matcher span.active{color:#fe3c72}.compose-matcher .time-wrapper{display:flex;flex-direction:column;align-items:center}.compose-matcher .time{font-size:8px;height:8px;line-height:8px}swiper-slide{display:flex;justify-content:center}swiper-slide lib-chat-suggestion,swiper-slide lib-profile-card{margin-top:1em}.slide-content{height:auto;width:100%;position:relative;display:block;overflow:auto;padding:0 5px}.slide-content:not(.without-shadow){border-radius:10px;padding:20px;box-shadow:5.70371px 5.70371px 11.40741px #00000052 inset,-3.42222px -3.42222px 4.56296px #ffffff1a inset}.bubble-btn{padding:12px;min-width:25%}.prospect-calendar{display:flex;justify-content:center;margin-top:10px;color:#ebebf599;font-size:10px}.count-booked{display:flex;justify-content:center;margin-top:10px}.plan-container{display:flex}.alert-popup{position:absolute;z-index:999;bottom:100px;right:0}.llm-preference-container{display:flex;gap:.5em;align-items:center;justify-content:space-around;margin-left:16px;margin-right:-50px;flex-direction:column}@media (max-width: 576px){.compose-matcher{padding:0}.plan-container{flex-direction:column;align-items:center}.alert-popup{position:absolute;z-index:999;top:280px;right:5px}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { config: [{
                 type: Input
             }], addMessage: [{