@naniteninja/dashboard-components-lib 2.1.16 → 2.1.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -4281,11 +4281,11 @@ class LibClientMatchOverviewComponent {
|
|
|
4281
4281
|
};
|
|
4282
4282
|
}
|
|
4283
4283
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LibClientMatchOverviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4284
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: LibClientMatchOverviewComponent, isStandalone: true, selector: "lib-client-match-overview", inputs: { overview: "overview", meta: "meta", expand: "expand", loading: "loading", default: "default", hideProgressBar: "hideProgressBar", partialColors: "partialColors", showExternalPartialCircleProgress: "showExternalPartialCircleProgress", maxValue: "maxValue", enableChangeOverview: "enableChangeOverview", isGrouped: "isGrouped", showProgressUnderHead: "showProgressUnderHead", showRejectMenu: "showRejectMenu" }, outputs: { sendConversationFlag: "sendConversationFlag", repositionRequest: "repositionRequest", rejectRequest: "rejectRequest" }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }, { propertyName: "rejectMenuTemplate", first: true, predicate: ["rejectMenuTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (!default && imageLoader$ | async) {\n<div class=\"overview\" [ngClass]=\"{ overview__expand: expand, overview__collapse: !expand }\">\n <div class=\"overview__container\">\n @if (!expand) {\n <div class=\"overview__head-with-progress\">\n <lib-standard-chat-head [size]=\"54.487\" [model]=\"standardHeadModel\"></lib-standard-chat-head>\n @if (showProgressUnderHead && progressPercent !== null) {\n <p class=\"overview__progress\">{{ progressPercent }}%</p>\n }\n </div>\n } @else {\n <lib-client-chat-head [size]=\"78\" [model]=\"clientHeadModel\" [class.pulsating-head]=\"overview.allowRepositioning\"></lib-client-chat-head>\n\n @if (showRejectMenu) {\n <div class=\"reject-menu-trigger\" (click)=\"toggleRejectMenu($event)\">\n <i class=\"pi pi-ellipsis-h\"></i>\n </div>\n }\n\n @if (showRejectMenuState) {\n <button type=\"button\" class=\"reject-dropdown-btn\" (click)=\"reject(); $event.stopPropagation()\">\n <span class=\"reject-dropdown-inner\">\n <svg class=\"reject-dropdown-svg\" width=\"59\" height=\"16\" viewBox=\"0 0 59 16\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <text fill=\"#D9D9D9\" xml:space=\"preserve\" style=\"white-space: pre\" font-family=\"Gilroy\" font-size=\"8\"\n letter-spacing=\"0.0703846px\">\n <tspan x=\"34.52\" y=\"10.9501\">Reject</tspan>\n </text>\n <g filter=\"url(#filter0_f_2003_8336)\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M10.9353 4.11938C11.1384 4.3225 11.1384 4.65183 10.9353 4.85495L2.35324 13.437C2.15012 13.6401 1.82079 13.6401 1.61767 13.437C1.41455 13.2339 1.41455 12.9046 1.61767 12.7014L10.1997 4.11938C10.4028 3.91626 10.7322 3.91626 10.9353 4.11938Z\"\n fill=\"#FE3C72\" stroke=\"black\" stroke-width=\"6.44633\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <circle cx=\"6.14645\" cy=\"8.64816\" r=\"4.68112\" stroke=\"black\" stroke-width=\"6.44633\" />\n </g>\n <g filter=\"url(#filter1_f_2003_8336)\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M9.49917 5.55559C9.64784 5.70426 9.64784 5.9453 9.49917 6.09397L3.21775 12.3754C3.06908 12.5241 2.82804 12.5241 2.67937 12.3754C2.5307 12.2267 2.5307 11.9857 2.67937 11.837L8.96079 5.55559C9.10946 5.40692 9.3505 5.40692 9.49917 5.55559Z\"\n stroke=\"#FE3C72\" stroke-width=\"0.589779\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <circle cx=\"5.9941\" cy=\"8.87032\" r=\"3.42623\" stroke=\"#FE3C72\" stroke-width=\"0.589779\" />\n </g>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M9.36719 5.68917C9.50191 5.82389 9.50191 6.04231 9.36719 6.17702L3.67531 11.8689C3.5406 12.0036 3.32218 12.0036 3.18746 11.8689C3.05275 11.7342 3.05275 11.5158 3.18746 11.3811L8.87934 5.68917C9.01406 5.55446 9.23247 5.55446 9.36719 5.68917Z\"\n fill=\"#FFD2DF\" stroke=\"#FFD2DF\" stroke-width=\"0.322317\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <circle cx=\"6.19109\" cy=\"8.69279\" r=\"3.10466\" stroke=\"#FFD2DF\" stroke-width=\"0.634731\" />\n <defs>\n <filter id=\"filter0_f_2003_8336\" x=\"-12.0578\" y=\"-9.5561\" width=\"36.6688\" height=\"36.6686\"\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\" />\n <feGaussianBlur stdDeviation=\"5.15\" result=\"effect1_foregroundBlur_2003_8335\" />\n </filter>\n <filter id=\"filter1_f_2003_8336\" x=\"1.09339\" y=\"3.96961\" width=\"9.99193\" height=\"9.99168\"\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\" />\n <feGaussianBlur stdDeviation=\"0.589779\" result=\"effect1_foregroundBlur_2003_8335\" />\n </filter>\n </defs>\n </svg>\n </span>\n </button>\n }\n\n <div class=\"overview__info-wrapper\">\n <div class=\"overview__comparison comparison\">\n <div class=\"comparison__entity\">\n <div class=\"comparison__value\">\n <span class=\"personality\">{{ overview.personality }}%</span>\n </div>\n <div class=\"comparison__label\">\n <span>Personality</span>\n <span>Match</span>\n </div>\n </div>\n <div class=\"comparison__entity\">\n <div class=\"comparison__value\">\n <span class=\"preferences\">{{ overview.preferences }}%</span>\n </div>\n <div class=\"comparison__label\">\n <span>Preferences</span>\n <span>Match</span>\n </div>\n </div>\n </div>\n\n <div class=\"overview__secondary-profile secondary-profile\">\n <lib-chat-head-small [size]=\"28\" [imageUrl]=\"overview.secondary.src\"></lib-chat-head-small>\n <div class=\"secondary-profile__name\">{{ overview.secondary.name }}</div>\n </div>\n </div>\n }\n </div>\n\n @if (expand) {\n <div class=\"overview__back-shadow\"></div>\n }\n</div>\n@if (expand && !isGrouped) {\n<div class=\"menu-trigger\" (click)=\"toggleMenu($event)\">\n <i class=\"pi pi-ellipsis-h\"></i>\n</div>\n<ng-template #menuTemplate>\n <div class=\"menu-backdrop\" (click)=\"closeMenu()\" style=\"position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9998; background: transparent;\"></div>\n <div class=\"match-menu\" (click)=\"$event.stopPropagation()\" [style.top.px]=\"menuPosition.top\"\n [style.left.px]=\"menuPosition.left\" [style.width.px]=\"menuPosition.width\"\n style=\"position: fixed; z-index: 9999;\">\n <div class=\"menu-item\" (click)=\"reposition()\">{{ overview.allowRepositioning ? 'End Reposition' : 'Reposition' }}</div>\n </div>\n</ng-template>\n}\n} @else if (loading) {\n<div class=\"overview\" part=\"loading\">\n <div class=\"overview__container\">\n <div class=\"default-empty-profile\">\n <p-skeleton shape=\"circle\" size=\"3rem\" class=\"loading-skeleton\" />\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"34\" height=\"35\" viewBox=\"0 0 34 35\" fill=\"none\">\n <circle cx=\"17.0096\" cy=\"17.5439\" r=\"16.5945\" fill=\"#29252D\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M13.4843 18.2501C13.5008 18.2493 13.5174 18.2489 13.5339 18.2489H20.1384C20.1549 18.2489 20.1714 18.2493 20.188 18.2501C22.501 18.3649 24.5513 19.7726 25.4901 21.8878C26.1644 23.2368 25.7884 24.5724 24.9275 25.4921C24.0937 26.3827 22.802 26.9145 21.4595 26.9145H12.2127C10.8707 26.9145 9.57941 26.3825 8.74582 25.4921C7.88499 24.5726 7.50858 23.2372 8.182 21.888C9.12087 19.7726 11.1712 18.365 13.4843 18.2501ZM13.56 20.2486C12.0044 20.3346 10.6283 21.2884 10.0022 22.7165C9.99443 22.7342 9.98617 22.7517 9.97741 22.7689C9.72674 23.2609 9.82034 23.7138 10.2057 24.1253C10.6239 24.5721 11.367 24.9147 12.2127 24.9147H21.4595C22.3061 24.9147 23.0495 24.572 23.4675 24.1253C23.8527 23.7141 23.9461 23.2616 23.6951 22.7694C23.6863 22.7521 23.6779 22.7343 23.67 22.7165C23.044 21.2884 21.6679 20.3346 20.1122 20.2486H13.56Z\"\n fill=\"#5E5E5E\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M16.836 8.24993C15.1794 8.24993 13.8364 9.5929 13.8364 11.2495C13.8364 12.9062 15.1794 14.2492 16.836 14.2492C18.4927 14.2492 19.8356 12.9062 19.8356 11.2495C19.8356 10.454 19.5197 9.69103 18.9571 9.12849C18.3945 8.56595 17.6315 8.24993 16.836 8.24993ZM11.8367 11.2495C11.8367 8.48847 14.075 6.25018 16.836 6.25018C18.162 6.25018 19.4335 6.7769 20.3712 7.71446C21.3086 8.65202 21.8354 9.92363 21.8354 11.2495C21.8354 14.0107 19.5971 16.2489 16.836 16.2489C14.075 16.2489 11.8367 14.0107 11.8367 11.2495Z\"\n fill=\"#5E5E5E\" />\n </svg>\n </div>\n </div>\n</div>\n} @else if (default || !overview.primary) {\n<div class=\"overview\">\n <div class=\"overview__container\">\n <div class=\"default-empty-profile\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"34\" height=\"35\" viewBox=\"0 0 34 35\" fill=\"none\">\n <circle cx=\"17.0096\" cy=\"17.5439\" r=\"16.5945\" fill=\"#29252D\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M13.4843 18.2501C13.5008 18.2493 13.5174 18.2489 13.5339 18.2489H20.1384C20.1549 18.2489 20.1714 18.2493 20.188 18.2501C22.501 18.3649 24.5513 19.7726 25.4901 21.8878C26.1644 23.2368 25.7884 24.5724 24.9275 25.4921C24.0937 26.3827 22.802 26.9145 21.4595 26.9145H12.2127C10.8707 26.9145 9.57941 26.3825 8.74582 25.4921C7.88499 24.5726 7.50858 23.2372 8.182 21.888C9.12087 19.7726 11.1712 18.365 13.4843 18.2501ZM13.56 20.2486C12.0044 20.3346 10.6283 21.2884 10.0022 22.7165C9.99443 22.7342 9.98617 22.7517 9.97741 22.7689C9.72674 23.2609 9.82034 23.7138 10.2057 24.1253C10.6239 24.5721 11.367 24.9147 12.2127 24.9147H21.4595C22.3061 24.9147 23.0495 24.572 23.4675 24.1253C23.8527 23.7141 23.9461 23.2616 23.6951 22.7694C23.6863 22.7521 23.6779 22.7343 23.67 22.7165C23.044 21.2884 21.6679 20.3346 20.1122 20.2486H13.56Z\"\n fill=\"#5E5E5E\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M16.836 8.24993C15.1794 8.24993 13.8364 9.5929 13.8364 11.2495C13.8364 12.9062 15.1794 14.2492 16.836 14.2492C18.4927 14.2492 19.8356 12.9062 19.8356 11.2495C19.8356 10.454 19.5197 9.69103 18.9571 9.12849C18.3945 8.56595 17.6315 8.24993 16.836 8.24993ZM11.8367 11.2495C11.8367 8.48847 14.075 6.25018 16.836 6.25018C18.162 6.25018 19.4335 6.7769 20.3712 7.71446C21.3086 8.65202 21.8354 9.92363 21.8354 11.2495C21.8354 14.0107 19.5971 16.2489 16.836 16.2489C14.075 16.2489 11.8367 14.0107 11.8367 11.2495Z\"\n fill=\"#5E5E5E\" />\n </svg>\n </div>\n </div>\n</div>\n}\n", styles: [".zoom-in{animation:fadeZoomIn .5s ease-in-out}.zoom-out{animation:fadeZoomOut .5s ease-in-out}.zoom-out.collapse{display:none!important}@keyframes fadeZoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}@keyframes fadeZoomIn{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.hide{max-height:0;overflow:hidden;opacity:0;transition:max-height .8s ease-in-out,opacity .8s ease-in-out}.show{max-height:200px;opacity:1;transition:max-height .8s ease-in-out,opacity .8s ease-in-out}.f-calistoga{font-family:Calistoga,serif;font-style:normal}.f-gilroy-medium{font-family:Gilroy-Medium,serif}.f-gilroy-semibold{font-family:Gilroy-SemiBold,serif}.f-gilroy-regular{font-family:Gilroy-Regular,serif}.f-size-34{font-size:2.125rem}.f-3xl{font-size:28px}.f-2xl{font-size:24px}.f-xl{font-size:18px}.f-lg{font-size:16px}.f-md{font-size:14px}.f-sm{font-size:12px}.f-xs{font-size:10px}.f-white{color:var(--ion-text-color)}.f-dark{color:var(--ion-text-color-secondary)}.f-gray{color:var(--ion-text-color);opacity:.6}.f-light-gray{color:var(--ion-text-color);opacity:.7}.f-accent{color:var(--text-highlight-color)}.h-160{line-height:160%}.h-100{line-height:100%}.h-110{line-height:110%}.h-150{line-height:150%}.h-180{line-height:180%}.f-w-400{font-weight:400}.f-w-500{font-weight:500}.f-w-600{font-weight:600}.f-w-700{font-weight:700}h1,h2,h3,h5,h6,p{margin:0}:host{font-size:clamp(0px,var(--component-size, 1.5dvw),.75rem);position:relative;display:block}:host ::ng-deep lib-client-chat-head{position:absolute;top:0;left:0}:host ::ng-deep lib-client-chat-head.pulsating-head{border-radius:50%;animation:pulsate-border 1.5s infinite}@keyframes pulsate-border{0%{box-shadow:0 0 #ffffffb3}70%{box-shadow:0 0 0 10px #fff0}to{box-shadow:0 0 #fff0}}.overview{overflow:visible;width:auto;max-width:var(--card-width, 100%);display:block;position:relative}.overview__collapse{--card-width: 15em}.overview__expand{--card-width: 100%;margin:0 -15px}.overview__back-shadow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:160%;width:140%;z-index:0;background:radial-gradient(closest-side,black 30%,transparent 100%);opacity:.9}.overview__container{z-index:2;position:relative;display:flex;align-items:flex-start;padding:0;height:72px}.overview__collapse .overview__container{height:auto;align-items:flex-start;padding-right:15px}.overview__expand .overview__container{transform:none;transform-origin:center}.overview__info-wrapper{display:flex;flex-direction:column;justify-content:center;margin-left:78px;padding-top:4px}.overview__comparison{display:flex;flex-direction:column;justify-content:center;transform-origin:left center;margin-bottom:2px;position:relative;flex-shrink:0}.overview__head-with-progress{display:flex;flex-direction:column;align-items:center}.overview__progress{margin-top:7px;color:var(--dark-white-100, #fff);font-family:Gilroy,-apple-system,Roboto,Helvetica,sans-serif;font-size:8px;font-style:normal;font-weight:500;line-height:normal;letter-spacing:.07px}.overview .reject-menu-trigger{position:absolute;top:-5px;left:55px;z-index:5;color:#fff;padding:8px;cursor:pointer;font-size:1.2em}.reject-dropdown-btn{position:absolute;left:50%;bottom:75px;transform:translate(-50%);border:none;padding:0;background:transparent;z-index:3}.reject-dropdown-inner{position:relative;display:flex;justify-content:center;align-items:center;width:89px;height:29px;border-radius:8px;background:linear-gradient(180deg,#403d46,#3e3b44);box-shadow:0 2px 4px #00000040,0 4px 4px #00000040,2px -2px 3px #0006 inset,0 -2px 8px #fff3 inset;cursor:pointer;z-index:3}.reject-dropdown-svg{display:block}.comparison__entity{font-family:Gilroy-Medium;display:flex;gap:.55rem;align-items:flex-start;margin-bottom:2.46px}.comparison__entity:nth-child(2){margin-bottom:.49px}.comparison__value{height:auto;width:2.5rem;display:flex;align-items:flex-start;justify-content:flex-end;padding-top:2px}.comparison__value>span{font-size:1.2rem;font-weight:400;line-height:1.2}.comparison__value>span.preferences{color:#fe3c72}.comparison__value>span.personality{color:#9c2b4b}.comparison__label{display:flex;flex-direction:column;justify-content:center;text-align:left;line-height:1.1}.comparison__label>span{font-size:.55rem;color:#fff;opacity:.9;padding-top:3px}.secondary-profile{display:flex;align-items:flex-start;gap:.55rem;margin-top:-2.5px;margin-left:-2px}.secondary-profile__name{margin-left:11px;font-size:.55rem;color:#fff;opacity:.9;font-family:Gilroy-Medium;white-space:nowrap;padding-top:6px}.menu-trigger{position:absolute;right:25px;bottom:0;z-index:100;line-height:0;width:1.5px;height:1.5px;display:flex;justify-content:center;align-items:center;cursor:pointer}.menu-trigger i{font-size:.7rem;color:#fff}.match-menu{position:fixed;margin-top:-4px;z-index:100000;background:linear-gradient(180deg,#403d46,#3e3b44);border-radius:12px;padding:0;box-shadow:0 8px 24px #00000080,0 2px 8px #0000004d,inset 6px 0 12px #c8c8d240,inset 3px 0 6px #c8c8d259,inset 0 -6px 12px #403d4680,inset 0 -3px 6px #403d46cc,inset 16px 0 10px -2px #3a3a44e6,inset 0 -16px 10px -2px #3a3a44e6;display:flex;flex-direction:column;overflow:hidden}.match-menu .menu-item{color:#ffffffe6;font-family:Gilroy,sans-serif;font-weight:700;font-size:14px;line-height:100%;letter-spacing:.07px;cursor:pointer;transition:background .2s;text-align:left;display:flex;align-items:center;justify-content:flex-start;padding:8px 0 8px 12px}.match-menu .menu-item:hover{background:#ffffff1a}.default-empty-profile{padding:1px;border-radius:50%;background:radial-gradient(circle,#acacac 79%,#fff);display:flex;justify-content:center;align-items:center;position:relative;margin:0 10px}.default-empty-profile .loading-skeleton{position:absolute;top:0}.default-empty-profile .p-skeleton:after{background:linear-gradient(90deg,#fff0,#fff6,#fff0)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: CircleProgressModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: ClientChatHeadComponent, selector: "lib-client-chat-head", inputs: ["data", "size", "model"] }, { kind: "component", type: ChatHeadSmallComponent, selector: "lib-chat-head-small", inputs: ["size", "imageUrl", "ringColor"] }, { kind: "component", type: StandardChatHeadComponent, selector: "lib-standard-chat-head", inputs: ["data", "size", "model"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4284
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: LibClientMatchOverviewComponent, isStandalone: true, selector: "lib-client-match-overview", inputs: { overview: "overview", meta: "meta", expand: "expand", loading: "loading", default: "default", hideProgressBar: "hideProgressBar", partialColors: "partialColors", showExternalPartialCircleProgress: "showExternalPartialCircleProgress", maxValue: "maxValue", enableChangeOverview: "enableChangeOverview", isGrouped: "isGrouped", showProgressUnderHead: "showProgressUnderHead", showRejectMenu: "showRejectMenu" }, outputs: { sendConversationFlag: "sendConversationFlag", repositionRequest: "repositionRequest", rejectRequest: "rejectRequest" }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }, { propertyName: "rejectMenuTemplate", first: true, predicate: ["rejectMenuTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (!default && imageLoader$ | async) {\n<div class=\"overview\" [ngClass]=\"{ overview__expand: expand, overview__collapse: !expand }\">\n <div class=\"overview__container\">\n @if (!expand) {\n <div class=\"overview__head-with-progress\">\n <lib-standard-chat-head [size]=\"54.487\" [model]=\"standardHeadModel\"></lib-standard-chat-head>\n @if (showProgressUnderHead && progressPercent !== null) {\n <p class=\"overview__progress\">{{ progressPercent }}%</p>\n }\n </div>\n } @else {\n <lib-client-chat-head [size]=\"78\" [model]=\"clientHeadModel\" [class.pulsating-head]=\"overview.allowRepositioning\"></lib-client-chat-head>\n\n @if (showRejectMenu) {\n <div class=\"reject-menu-trigger\" (click)=\"toggleRejectMenu($event)\">\n <i class=\"pi pi-ellipsis-h\"></i>\n </div>\n }\n\n @if (showRejectMenuState) {\n <button type=\"button\" class=\"reject-dropdown-btn\" (click)=\"reject(); $event.stopPropagation()\">\n <span class=\"reject-dropdown-inner\">\n <svg class=\"reject-dropdown-svg\" width=\"59\" height=\"16\" viewBox=\"0 0 59 16\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <text fill=\"#D9D9D9\" xml:space=\"preserve\" style=\"white-space: pre\" font-family=\"Gilroy\" font-size=\"8\"\n letter-spacing=\"0.0703846px\">\n <tspan x=\"34.52\" y=\"10.9501\">Reject</tspan>\n </text>\n <g filter=\"url(#filter0_f_2003_8336)\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M10.9353 4.11938C11.1384 4.3225 11.1384 4.65183 10.9353 4.85495L2.35324 13.437C2.15012 13.6401 1.82079 13.6401 1.61767 13.437C1.41455 13.2339 1.41455 12.9046 1.61767 12.7014L10.1997 4.11938C10.4028 3.91626 10.7322 3.91626 10.9353 4.11938Z\"\n fill=\"#FE3C72\" stroke=\"black\" stroke-width=\"6.44633\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <circle cx=\"6.14645\" cy=\"8.64816\" r=\"4.68112\" stroke=\"black\" stroke-width=\"6.44633\" />\n </g>\n <g filter=\"url(#filter1_f_2003_8336)\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M9.49917 5.55559C9.64784 5.70426 9.64784 5.9453 9.49917 6.09397L3.21775 12.3754C3.06908 12.5241 2.82804 12.5241 2.67937 12.3754C2.5307 12.2267 2.5307 11.9857 2.67937 11.837L8.96079 5.55559C9.10946 5.40692 9.3505 5.40692 9.49917 5.55559Z\"\n stroke=\"#FE3C72\" stroke-width=\"0.589779\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <circle cx=\"5.9941\" cy=\"8.87032\" r=\"3.42623\" stroke=\"#FE3C72\" stroke-width=\"0.589779\" />\n </g>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M9.36719 5.68917C9.50191 5.82389 9.50191 6.04231 9.36719 6.17702L3.67531 11.8689C3.5406 12.0036 3.32218 12.0036 3.18746 11.8689C3.05275 11.7342 3.05275 11.5158 3.18746 11.3811L8.87934 5.68917C9.01406 5.55446 9.23247 5.55446 9.36719 5.68917Z\"\n fill=\"#FFD2DF\" stroke=\"#FFD2DF\" stroke-width=\"0.322317\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <circle cx=\"6.19109\" cy=\"8.69279\" r=\"3.10466\" stroke=\"#FFD2DF\" stroke-width=\"0.634731\" />\n <defs>\n <filter id=\"filter0_f_2003_8336\" x=\"-12.0578\" y=\"-9.5561\" width=\"36.6688\" height=\"36.6686\"\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\" />\n <feGaussianBlur stdDeviation=\"5.15\" result=\"effect1_foregroundBlur_2003_8335\" />\n </filter>\n <filter id=\"filter1_f_2003_8336\" x=\"1.09339\" y=\"3.96961\" width=\"9.99193\" height=\"9.99168\"\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\" />\n <feGaussianBlur stdDeviation=\"0.589779\" result=\"effect1_foregroundBlur_2003_8335\" />\n </filter>\n </defs>\n </svg>\n </span>\n </button>\n }\n\n <div class=\"overview__info-wrapper\">\n <div class=\"overview__comparison comparison\">\n <div class=\"comparison__entity\">\n <div class=\"comparison__value\">\n <span class=\"personality\">{{ overview.personality }}%</span>\n </div>\n <div class=\"comparison__label\">\n <span>Personality</span>\n <span>Match</span>\n </div>\n </div>\n <div class=\"comparison__entity\">\n <div class=\"comparison__value\">\n <span class=\"preferences\">{{ overview.preferences }}%</span>\n </div>\n <div class=\"comparison__label\">\n <span>Preferences</span>\n <span>Match</span>\n </div>\n </div>\n </div>\n\n <div class=\"overview__secondary-profile secondary-profile\">\n <lib-chat-head-small [size]=\"28\" [imageUrl]=\"overview.secondary.src\"></lib-chat-head-small>\n <div class=\"secondary-profile__name\">{{ overview.secondary.name }}</div>\n </div>\n </div>\n }\n </div>\n\n @if (expand) {\n <div class=\"overview__back-shadow\"></div>\n }\n</div>\n@if (expand && !isGrouped) {\n<div class=\"menu-trigger\" (click)=\"toggleMenu($event)\">\n <i class=\"pi pi-ellipsis-h\"></i>\n</div>\n<ng-template #menuTemplate>\n <div class=\"menu-backdrop\" (click)=\"closeMenu()\" style=\"position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9998; background: transparent;\"></div>\n <div class=\"match-menu\" (click)=\"$event.stopPropagation()\" [style.top.px]=\"menuPosition.top\"\n [style.left.px]=\"menuPosition.left\" [style.width.px]=\"menuPosition.width\"\n style=\"position: fixed; z-index: 9999;\">\n <div class=\"menu-item\" (click)=\"reposition()\">{{ overview.allowRepositioning ? 'End Reposition' : 'Reposition' }}</div>\n </div>\n</ng-template>\n}\n} @else if (loading) {\n<div class=\"overview\" part=\"loading\">\n <div class=\"overview__container\">\n <div class=\"default-empty-profile\">\n <p-skeleton shape=\"circle\" size=\"3rem\" class=\"loading-skeleton\" />\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"34\" height=\"35\" viewBox=\"0 0 34 35\" fill=\"none\">\n <circle cx=\"17.0096\" cy=\"17.5439\" r=\"16.5945\" fill=\"#29252D\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M13.4843 18.2501C13.5008 18.2493 13.5174 18.2489 13.5339 18.2489H20.1384C20.1549 18.2489 20.1714 18.2493 20.188 18.2501C22.501 18.3649 24.5513 19.7726 25.4901 21.8878C26.1644 23.2368 25.7884 24.5724 24.9275 25.4921C24.0937 26.3827 22.802 26.9145 21.4595 26.9145H12.2127C10.8707 26.9145 9.57941 26.3825 8.74582 25.4921C7.88499 24.5726 7.50858 23.2372 8.182 21.888C9.12087 19.7726 11.1712 18.365 13.4843 18.2501ZM13.56 20.2486C12.0044 20.3346 10.6283 21.2884 10.0022 22.7165C9.99443 22.7342 9.98617 22.7517 9.97741 22.7689C9.72674 23.2609 9.82034 23.7138 10.2057 24.1253C10.6239 24.5721 11.367 24.9147 12.2127 24.9147H21.4595C22.3061 24.9147 23.0495 24.572 23.4675 24.1253C23.8527 23.7141 23.9461 23.2616 23.6951 22.7694C23.6863 22.7521 23.6779 22.7343 23.67 22.7165C23.044 21.2884 21.6679 20.3346 20.1122 20.2486H13.56Z\"\n fill=\"#5E5E5E\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M16.836 8.24993C15.1794 8.24993 13.8364 9.5929 13.8364 11.2495C13.8364 12.9062 15.1794 14.2492 16.836 14.2492C18.4927 14.2492 19.8356 12.9062 19.8356 11.2495C19.8356 10.454 19.5197 9.69103 18.9571 9.12849C18.3945 8.56595 17.6315 8.24993 16.836 8.24993ZM11.8367 11.2495C11.8367 8.48847 14.075 6.25018 16.836 6.25018C18.162 6.25018 19.4335 6.7769 20.3712 7.71446C21.3086 8.65202 21.8354 9.92363 21.8354 11.2495C21.8354 14.0107 19.5971 16.2489 16.836 16.2489C14.075 16.2489 11.8367 14.0107 11.8367 11.2495Z\"\n fill=\"#5E5E5E\" />\n </svg>\n </div>\n </div>\n</div>\n} @else if (default || !overview.primary) {\n<div class=\"overview\">\n <div class=\"overview__container\">\n <div class=\"default-empty-profile\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"34\" height=\"35\" viewBox=\"0 0 34 35\" fill=\"none\">\n <circle cx=\"17.0096\" cy=\"17.5439\" r=\"16.5945\" fill=\"#29252D\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M13.4843 18.2501C13.5008 18.2493 13.5174 18.2489 13.5339 18.2489H20.1384C20.1549 18.2489 20.1714 18.2493 20.188 18.2501C22.501 18.3649 24.5513 19.7726 25.4901 21.8878C26.1644 23.2368 25.7884 24.5724 24.9275 25.4921C24.0937 26.3827 22.802 26.9145 21.4595 26.9145H12.2127C10.8707 26.9145 9.57941 26.3825 8.74582 25.4921C7.88499 24.5726 7.50858 23.2372 8.182 21.888C9.12087 19.7726 11.1712 18.365 13.4843 18.2501ZM13.56 20.2486C12.0044 20.3346 10.6283 21.2884 10.0022 22.7165C9.99443 22.7342 9.98617 22.7517 9.97741 22.7689C9.72674 23.2609 9.82034 23.7138 10.2057 24.1253C10.6239 24.5721 11.367 24.9147 12.2127 24.9147H21.4595C22.3061 24.9147 23.0495 24.572 23.4675 24.1253C23.8527 23.7141 23.9461 23.2616 23.6951 22.7694C23.6863 22.7521 23.6779 22.7343 23.67 22.7165C23.044 21.2884 21.6679 20.3346 20.1122 20.2486H13.56Z\"\n fill=\"#5E5E5E\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M16.836 8.24993C15.1794 8.24993 13.8364 9.5929 13.8364 11.2495C13.8364 12.9062 15.1794 14.2492 16.836 14.2492C18.4927 14.2492 19.8356 12.9062 19.8356 11.2495C19.8356 10.454 19.5197 9.69103 18.9571 9.12849C18.3945 8.56595 17.6315 8.24993 16.836 8.24993ZM11.8367 11.2495C11.8367 8.48847 14.075 6.25018 16.836 6.25018C18.162 6.25018 19.4335 6.7769 20.3712 7.71446C21.3086 8.65202 21.8354 9.92363 21.8354 11.2495C21.8354 14.0107 19.5971 16.2489 16.836 16.2489C14.075 16.2489 11.8367 14.0107 11.8367 11.2495Z\"\n fill=\"#5E5E5E\" />\n </svg>\n </div>\n </div>\n</div>\n}\n", styles: [".zoom-in{animation:fadeZoomIn .5s ease-in-out}.zoom-out{animation:fadeZoomOut .5s ease-in-out}.zoom-out.collapse{display:none!important}@keyframes fadeZoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}@keyframes fadeZoomIn{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.hide{max-height:0;overflow:hidden;opacity:0;transition:max-height .8s ease-in-out,opacity .8s ease-in-out}.show{max-height:200px;opacity:1;transition:max-height .8s ease-in-out,opacity .8s ease-in-out}.f-calistoga{font-family:Calistoga,serif;font-style:normal}.f-gilroy-medium{font-family:Gilroy-Medium,serif}.f-gilroy-semibold{font-family:Gilroy-SemiBold,serif}.f-gilroy-regular{font-family:Gilroy-Regular,serif}.f-size-34{font-size:2.125rem}.f-3xl{font-size:28px}.f-2xl{font-size:24px}.f-xl{font-size:18px}.f-lg{font-size:16px}.f-md{font-size:14px}.f-sm{font-size:12px}.f-xs{font-size:10px}.f-white{color:var(--ion-text-color)}.f-dark{color:var(--ion-text-color-secondary)}.f-gray{color:var(--ion-text-color);opacity:.6}.f-light-gray{color:var(--ion-text-color);opacity:.7}.f-accent{color:var(--text-highlight-color)}.h-160{line-height:160%}.h-100{line-height:100%}.h-110{line-height:110%}.h-150{line-height:150%}.h-180{line-height:180%}.f-w-400{font-weight:400}.f-w-500{font-weight:500}.f-w-600{font-weight:600}.f-w-700{font-weight:700}h1,h2,h3,h5,h6,p{margin:0}:host{font-size:clamp(0px,var(--component-size, 1.5dvw),.75rem);position:relative;display:block}:host ::ng-deep lib-client-chat-head{position:absolute;top:0;left:0}:host ::ng-deep lib-client-chat-head.pulsating-head{border-radius:50%;animation:pulsate-border 1.5s infinite}@keyframes pulsate-border{0%{box-shadow:0 0 #ffffffb3}70%{box-shadow:0 0 0 10px #fff0}to{box-shadow:0 0 #fff0}}.overview{overflow:visible;width:auto;max-width:var(--card-width, 100%);display:block;position:relative}.overview__collapse{--card-width: 15em}.overview__expand{--card-width: 100%;margin:0 -15px}.overview__back-shadow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:160%;width:140%;z-index:0;background:radial-gradient(closest-side,black 30%,transparent 100%);opacity:.9}.overview__container{z-index:2;position:relative;display:flex;align-items:flex-start;padding:0;height:72px}.overview__collapse .overview__container{height:auto;align-items:flex-start;padding-right:15px}.overview__expand .overview__container{transform:none;transform-origin:center}.overview__info-wrapper{display:flex;flex-direction:column;justify-content:center;margin-left:78px;padding-top:4px}.overview__comparison{display:flex;flex-direction:column;justify-content:center;transform-origin:left center;margin-bottom:2px;position:relative;flex-shrink:0}.overview__head-with-progress{display:flex;flex-direction:column;align-items:center}.overview__progress{margin-top:7px;color:var(--dark-white-100, #fff);font-family:Gilroy,-apple-system,Roboto,Helvetica,sans-serif;font-size:8px;font-style:normal;font-weight:500;line-height:normal;letter-spacing:.07px}.overview .reject-menu-trigger{position:absolute;top:-5px;left:60px;z-index:5;color:#fff;padding:8px;cursor:pointer;font-size:1.2em}.reject-dropdown-btn{position:absolute;left:50%;bottom:75px;transform:translate(-50%);border:none;padding:0;background:transparent;z-index:3}.reject-dropdown-inner{position:relative;display:flex;justify-content:center;align-items:center;width:89px;height:29px;border-radius:8px;background:linear-gradient(180deg,#403d46,#3e3b44);box-shadow:0 2px 4px #00000040,0 4px 4px #00000040,2px -2px 3px #0006 inset,0 -2px 8px #fff3 inset;cursor:pointer;z-index:3}.reject-dropdown-svg{display:block}.comparison__entity{font-family:Gilroy-Medium;display:flex;gap:.55rem;align-items:flex-start;margin-bottom:2.46px}.comparison__entity:nth-child(2){margin-bottom:.49px}.comparison__value{height:auto;width:2.5rem;display:flex;align-items:flex-start;justify-content:flex-end;padding-top:2px}.comparison__value>span{font-size:1.2rem;font-weight:400;line-height:1.2}.comparison__value>span.preferences{color:#fe3c72}.comparison__value>span.personality{color:#9c2b4b}.comparison__label{display:flex;flex-direction:column;justify-content:center;text-align:left;line-height:1.1}.comparison__label>span{font-size:.55rem;color:#fff;opacity:.9;padding-top:3px}.secondary-profile{display:flex;align-items:flex-start;gap:.55rem;margin-top:-2.5px;margin-left:-2px}.secondary-profile__name{margin-left:11px;font-size:.55rem;color:#fff;opacity:.9;font-family:Gilroy-Medium;white-space:nowrap;padding-top:6px}.menu-trigger{position:absolute;right:25px;bottom:0;z-index:100;line-height:0;width:1.5px;height:1.5px;display:flex;justify-content:center;align-items:center;cursor:pointer}.menu-trigger i{font-size:.7rem;color:#fff}.match-menu{position:fixed;margin-top:-4px;z-index:100000;background:linear-gradient(180deg,#403d46,#3e3b44);border-radius:12px;padding:0;box-shadow:0 8px 24px #00000080,0 2px 8px #0000004d,inset 6px 0 12px #c8c8d240,inset 3px 0 6px #c8c8d259,inset 0 -6px 12px #403d4680,inset 0 -3px 6px #403d46cc,inset 16px 0 10px -2px #3a3a44e6,inset 0 -16px 10px -2px #3a3a44e6;display:flex;flex-direction:column;overflow:hidden}.match-menu .menu-item{color:#ffffffe6;font-family:Gilroy,sans-serif;font-weight:700;font-size:14px;line-height:100%;letter-spacing:.07px;cursor:pointer;transition:background .2s;text-align:left;display:flex;align-items:center;justify-content:flex-start;padding:8px 0 8px 12px}.match-menu .menu-item:hover{background:#ffffff1a}.default-empty-profile{padding:1px;border-radius:50%;background:radial-gradient(circle,#acacac 79%,#fff);display:flex;justify-content:center;align-items:center;position:relative;margin:0 10px}.default-empty-profile .loading-skeleton{position:absolute;top:0}.default-empty-profile .p-skeleton:after{background:linear-gradient(90deg,#fff0,#fff6,#fff0)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: CircleProgressModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: ClientChatHeadComponent, selector: "lib-client-chat-head", inputs: ["data", "size", "model"] }, { kind: "component", type: ChatHeadSmallComponent, selector: "lib-chat-head-small", inputs: ["size", "imageUrl", "ringColor"] }, { kind: "component", type: StandardChatHeadComponent, selector: "lib-standard-chat-head", inputs: ["data", "size", "model"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4285
4285
|
}
|
|
4286
4286
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LibClientMatchOverviewComponent, decorators: [{
|
|
4287
4287
|
type: Component,
|
|
4288
|
-
args: [{ selector: 'lib-client-match-overview', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, CircleProgressModule, TranslateModule, SkeletonModule, ClientChatHeadComponent, ChatHeadSmallComponent, StandardChatHeadComponent], template: "@if (!default && imageLoader$ | async) {\n<div class=\"overview\" [ngClass]=\"{ overview__expand: expand, overview__collapse: !expand }\">\n <div class=\"overview__container\">\n @if (!expand) {\n <div class=\"overview__head-with-progress\">\n <lib-standard-chat-head [size]=\"54.487\" [model]=\"standardHeadModel\"></lib-standard-chat-head>\n @if (showProgressUnderHead && progressPercent !== null) {\n <p class=\"overview__progress\">{{ progressPercent }}%</p>\n }\n </div>\n } @else {\n <lib-client-chat-head [size]=\"78\" [model]=\"clientHeadModel\" [class.pulsating-head]=\"overview.allowRepositioning\"></lib-client-chat-head>\n\n @if (showRejectMenu) {\n <div class=\"reject-menu-trigger\" (click)=\"toggleRejectMenu($event)\">\n <i class=\"pi pi-ellipsis-h\"></i>\n </div>\n }\n\n @if (showRejectMenuState) {\n <button type=\"button\" class=\"reject-dropdown-btn\" (click)=\"reject(); $event.stopPropagation()\">\n <span class=\"reject-dropdown-inner\">\n <svg class=\"reject-dropdown-svg\" width=\"59\" height=\"16\" viewBox=\"0 0 59 16\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <text fill=\"#D9D9D9\" xml:space=\"preserve\" style=\"white-space: pre\" font-family=\"Gilroy\" font-size=\"8\"\n letter-spacing=\"0.0703846px\">\n <tspan x=\"34.52\" y=\"10.9501\">Reject</tspan>\n </text>\n <g filter=\"url(#filter0_f_2003_8336)\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M10.9353 4.11938C11.1384 4.3225 11.1384 4.65183 10.9353 4.85495L2.35324 13.437C2.15012 13.6401 1.82079 13.6401 1.61767 13.437C1.41455 13.2339 1.41455 12.9046 1.61767 12.7014L10.1997 4.11938C10.4028 3.91626 10.7322 3.91626 10.9353 4.11938Z\"\n fill=\"#FE3C72\" stroke=\"black\" stroke-width=\"6.44633\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <circle cx=\"6.14645\" cy=\"8.64816\" r=\"4.68112\" stroke=\"black\" stroke-width=\"6.44633\" />\n </g>\n <g filter=\"url(#filter1_f_2003_8336)\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M9.49917 5.55559C9.64784 5.70426 9.64784 5.9453 9.49917 6.09397L3.21775 12.3754C3.06908 12.5241 2.82804 12.5241 2.67937 12.3754C2.5307 12.2267 2.5307 11.9857 2.67937 11.837L8.96079 5.55559C9.10946 5.40692 9.3505 5.40692 9.49917 5.55559Z\"\n stroke=\"#FE3C72\" stroke-width=\"0.589779\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <circle cx=\"5.9941\" cy=\"8.87032\" r=\"3.42623\" stroke=\"#FE3C72\" stroke-width=\"0.589779\" />\n </g>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M9.36719 5.68917C9.50191 5.82389 9.50191 6.04231 9.36719 6.17702L3.67531 11.8689C3.5406 12.0036 3.32218 12.0036 3.18746 11.8689C3.05275 11.7342 3.05275 11.5158 3.18746 11.3811L8.87934 5.68917C9.01406 5.55446 9.23247 5.55446 9.36719 5.68917Z\"\n fill=\"#FFD2DF\" stroke=\"#FFD2DF\" stroke-width=\"0.322317\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <circle cx=\"6.19109\" cy=\"8.69279\" r=\"3.10466\" stroke=\"#FFD2DF\" stroke-width=\"0.634731\" />\n <defs>\n <filter id=\"filter0_f_2003_8336\" x=\"-12.0578\" y=\"-9.5561\" width=\"36.6688\" height=\"36.6686\"\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\" />\n <feGaussianBlur stdDeviation=\"5.15\" result=\"effect1_foregroundBlur_2003_8335\" />\n </filter>\n <filter id=\"filter1_f_2003_8336\" x=\"1.09339\" y=\"3.96961\" width=\"9.99193\" height=\"9.99168\"\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\" />\n <feGaussianBlur stdDeviation=\"0.589779\" result=\"effect1_foregroundBlur_2003_8335\" />\n </filter>\n </defs>\n </svg>\n </span>\n </button>\n }\n\n <div class=\"overview__info-wrapper\">\n <div class=\"overview__comparison comparison\">\n <div class=\"comparison__entity\">\n <div class=\"comparison__value\">\n <span class=\"personality\">{{ overview.personality }}%</span>\n </div>\n <div class=\"comparison__label\">\n <span>Personality</span>\n <span>Match</span>\n </div>\n </div>\n <div class=\"comparison__entity\">\n <div class=\"comparison__value\">\n <span class=\"preferences\">{{ overview.preferences }}%</span>\n </div>\n <div class=\"comparison__label\">\n <span>Preferences</span>\n <span>Match</span>\n </div>\n </div>\n </div>\n\n <div class=\"overview__secondary-profile secondary-profile\">\n <lib-chat-head-small [size]=\"28\" [imageUrl]=\"overview.secondary.src\"></lib-chat-head-small>\n <div class=\"secondary-profile__name\">{{ overview.secondary.name }}</div>\n </div>\n </div>\n }\n </div>\n\n @if (expand) {\n <div class=\"overview__back-shadow\"></div>\n }\n</div>\n@if (expand && !isGrouped) {\n<div class=\"menu-trigger\" (click)=\"toggleMenu($event)\">\n <i class=\"pi pi-ellipsis-h\"></i>\n</div>\n<ng-template #menuTemplate>\n <div class=\"menu-backdrop\" (click)=\"closeMenu()\" style=\"position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9998; background: transparent;\"></div>\n <div class=\"match-menu\" (click)=\"$event.stopPropagation()\" [style.top.px]=\"menuPosition.top\"\n [style.left.px]=\"menuPosition.left\" [style.width.px]=\"menuPosition.width\"\n style=\"position: fixed; z-index: 9999;\">\n <div class=\"menu-item\" (click)=\"reposition()\">{{ overview.allowRepositioning ? 'End Reposition' : 'Reposition' }}</div>\n </div>\n</ng-template>\n}\n} @else if (loading) {\n<div class=\"overview\" part=\"loading\">\n <div class=\"overview__container\">\n <div class=\"default-empty-profile\">\n <p-skeleton shape=\"circle\" size=\"3rem\" class=\"loading-skeleton\" />\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"34\" height=\"35\" viewBox=\"0 0 34 35\" fill=\"none\">\n <circle cx=\"17.0096\" cy=\"17.5439\" r=\"16.5945\" fill=\"#29252D\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M13.4843 18.2501C13.5008 18.2493 13.5174 18.2489 13.5339 18.2489H20.1384C20.1549 18.2489 20.1714 18.2493 20.188 18.2501C22.501 18.3649 24.5513 19.7726 25.4901 21.8878C26.1644 23.2368 25.7884 24.5724 24.9275 25.4921C24.0937 26.3827 22.802 26.9145 21.4595 26.9145H12.2127C10.8707 26.9145 9.57941 26.3825 8.74582 25.4921C7.88499 24.5726 7.50858 23.2372 8.182 21.888C9.12087 19.7726 11.1712 18.365 13.4843 18.2501ZM13.56 20.2486C12.0044 20.3346 10.6283 21.2884 10.0022 22.7165C9.99443 22.7342 9.98617 22.7517 9.97741 22.7689C9.72674 23.2609 9.82034 23.7138 10.2057 24.1253C10.6239 24.5721 11.367 24.9147 12.2127 24.9147H21.4595C22.3061 24.9147 23.0495 24.572 23.4675 24.1253C23.8527 23.7141 23.9461 23.2616 23.6951 22.7694C23.6863 22.7521 23.6779 22.7343 23.67 22.7165C23.044 21.2884 21.6679 20.3346 20.1122 20.2486H13.56Z\"\n fill=\"#5E5E5E\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M16.836 8.24993C15.1794 8.24993 13.8364 9.5929 13.8364 11.2495C13.8364 12.9062 15.1794 14.2492 16.836 14.2492C18.4927 14.2492 19.8356 12.9062 19.8356 11.2495C19.8356 10.454 19.5197 9.69103 18.9571 9.12849C18.3945 8.56595 17.6315 8.24993 16.836 8.24993ZM11.8367 11.2495C11.8367 8.48847 14.075 6.25018 16.836 6.25018C18.162 6.25018 19.4335 6.7769 20.3712 7.71446C21.3086 8.65202 21.8354 9.92363 21.8354 11.2495C21.8354 14.0107 19.5971 16.2489 16.836 16.2489C14.075 16.2489 11.8367 14.0107 11.8367 11.2495Z\"\n fill=\"#5E5E5E\" />\n </svg>\n </div>\n </div>\n</div>\n} @else if (default || !overview.primary) {\n<div class=\"overview\">\n <div class=\"overview__container\">\n <div class=\"default-empty-profile\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"34\" height=\"35\" viewBox=\"0 0 34 35\" fill=\"none\">\n <circle cx=\"17.0096\" cy=\"17.5439\" r=\"16.5945\" fill=\"#29252D\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M13.4843 18.2501C13.5008 18.2493 13.5174 18.2489 13.5339 18.2489H20.1384C20.1549 18.2489 20.1714 18.2493 20.188 18.2501C22.501 18.3649 24.5513 19.7726 25.4901 21.8878C26.1644 23.2368 25.7884 24.5724 24.9275 25.4921C24.0937 26.3827 22.802 26.9145 21.4595 26.9145H12.2127C10.8707 26.9145 9.57941 26.3825 8.74582 25.4921C7.88499 24.5726 7.50858 23.2372 8.182 21.888C9.12087 19.7726 11.1712 18.365 13.4843 18.2501ZM13.56 20.2486C12.0044 20.3346 10.6283 21.2884 10.0022 22.7165C9.99443 22.7342 9.98617 22.7517 9.97741 22.7689C9.72674 23.2609 9.82034 23.7138 10.2057 24.1253C10.6239 24.5721 11.367 24.9147 12.2127 24.9147H21.4595C22.3061 24.9147 23.0495 24.572 23.4675 24.1253C23.8527 23.7141 23.9461 23.2616 23.6951 22.7694C23.6863 22.7521 23.6779 22.7343 23.67 22.7165C23.044 21.2884 21.6679 20.3346 20.1122 20.2486H13.56Z\"\n fill=\"#5E5E5E\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M16.836 8.24993C15.1794 8.24993 13.8364 9.5929 13.8364 11.2495C13.8364 12.9062 15.1794 14.2492 16.836 14.2492C18.4927 14.2492 19.8356 12.9062 19.8356 11.2495C19.8356 10.454 19.5197 9.69103 18.9571 9.12849C18.3945 8.56595 17.6315 8.24993 16.836 8.24993ZM11.8367 11.2495C11.8367 8.48847 14.075 6.25018 16.836 6.25018C18.162 6.25018 19.4335 6.7769 20.3712 7.71446C21.3086 8.65202 21.8354 9.92363 21.8354 11.2495C21.8354 14.0107 19.5971 16.2489 16.836 16.2489C14.075 16.2489 11.8367 14.0107 11.8367 11.2495Z\"\n fill=\"#5E5E5E\" />\n </svg>\n </div>\n </div>\n</div>\n}\n", styles: [".zoom-in{animation:fadeZoomIn .5s ease-in-out}.zoom-out{animation:fadeZoomOut .5s ease-in-out}.zoom-out.collapse{display:none!important}@keyframes fadeZoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}@keyframes fadeZoomIn{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.hide{max-height:0;overflow:hidden;opacity:0;transition:max-height .8s ease-in-out,opacity .8s ease-in-out}.show{max-height:200px;opacity:1;transition:max-height .8s ease-in-out,opacity .8s ease-in-out}.f-calistoga{font-family:Calistoga,serif;font-style:normal}.f-gilroy-medium{font-family:Gilroy-Medium,serif}.f-gilroy-semibold{font-family:Gilroy-SemiBold,serif}.f-gilroy-regular{font-family:Gilroy-Regular,serif}.f-size-34{font-size:2.125rem}.f-3xl{font-size:28px}.f-2xl{font-size:24px}.f-xl{font-size:18px}.f-lg{font-size:16px}.f-md{font-size:14px}.f-sm{font-size:12px}.f-xs{font-size:10px}.f-white{color:var(--ion-text-color)}.f-dark{color:var(--ion-text-color-secondary)}.f-gray{color:var(--ion-text-color);opacity:.6}.f-light-gray{color:var(--ion-text-color);opacity:.7}.f-accent{color:var(--text-highlight-color)}.h-160{line-height:160%}.h-100{line-height:100%}.h-110{line-height:110%}.h-150{line-height:150%}.h-180{line-height:180%}.f-w-400{font-weight:400}.f-w-500{font-weight:500}.f-w-600{font-weight:600}.f-w-700{font-weight:700}h1,h2,h3,h5,h6,p{margin:0}:host{font-size:clamp(0px,var(--component-size, 1.5dvw),.75rem);position:relative;display:block}:host ::ng-deep lib-client-chat-head{position:absolute;top:0;left:0}:host ::ng-deep lib-client-chat-head.pulsating-head{border-radius:50%;animation:pulsate-border 1.5s infinite}@keyframes pulsate-border{0%{box-shadow:0 0 #ffffffb3}70%{box-shadow:0 0 0 10px #fff0}to{box-shadow:0 0 #fff0}}.overview{overflow:visible;width:auto;max-width:var(--card-width, 100%);display:block;position:relative}.overview__collapse{--card-width: 15em}.overview__expand{--card-width: 100%;margin:0 -15px}.overview__back-shadow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:160%;width:140%;z-index:0;background:radial-gradient(closest-side,black 30%,transparent 100%);opacity:.9}.overview__container{z-index:2;position:relative;display:flex;align-items:flex-start;padding:0;height:72px}.overview__collapse .overview__container{height:auto;align-items:flex-start;padding-right:15px}.overview__expand .overview__container{transform:none;transform-origin:center}.overview__info-wrapper{display:flex;flex-direction:column;justify-content:center;margin-left:78px;padding-top:4px}.overview__comparison{display:flex;flex-direction:column;justify-content:center;transform-origin:left center;margin-bottom:2px;position:relative;flex-shrink:0}.overview__head-with-progress{display:flex;flex-direction:column;align-items:center}.overview__progress{margin-top:7px;color:var(--dark-white-100, #fff);font-family:Gilroy,-apple-system,Roboto,Helvetica,sans-serif;font-size:8px;font-style:normal;font-weight:500;line-height:normal;letter-spacing:.07px}.overview .reject-menu-trigger{position:absolute;top:-5px;left:55px;z-index:5;color:#fff;padding:8px;cursor:pointer;font-size:1.2em}.reject-dropdown-btn{position:absolute;left:50%;bottom:75px;transform:translate(-50%);border:none;padding:0;background:transparent;z-index:3}.reject-dropdown-inner{position:relative;display:flex;justify-content:center;align-items:center;width:89px;height:29px;border-radius:8px;background:linear-gradient(180deg,#403d46,#3e3b44);box-shadow:0 2px 4px #00000040,0 4px 4px #00000040,2px -2px 3px #0006 inset,0 -2px 8px #fff3 inset;cursor:pointer;z-index:3}.reject-dropdown-svg{display:block}.comparison__entity{font-family:Gilroy-Medium;display:flex;gap:.55rem;align-items:flex-start;margin-bottom:2.46px}.comparison__entity:nth-child(2){margin-bottom:.49px}.comparison__value{height:auto;width:2.5rem;display:flex;align-items:flex-start;justify-content:flex-end;padding-top:2px}.comparison__value>span{font-size:1.2rem;font-weight:400;line-height:1.2}.comparison__value>span.preferences{color:#fe3c72}.comparison__value>span.personality{color:#9c2b4b}.comparison__label{display:flex;flex-direction:column;justify-content:center;text-align:left;line-height:1.1}.comparison__label>span{font-size:.55rem;color:#fff;opacity:.9;padding-top:3px}.secondary-profile{display:flex;align-items:flex-start;gap:.55rem;margin-top:-2.5px;margin-left:-2px}.secondary-profile__name{margin-left:11px;font-size:.55rem;color:#fff;opacity:.9;font-family:Gilroy-Medium;white-space:nowrap;padding-top:6px}.menu-trigger{position:absolute;right:25px;bottom:0;z-index:100;line-height:0;width:1.5px;height:1.5px;display:flex;justify-content:center;align-items:center;cursor:pointer}.menu-trigger i{font-size:.7rem;color:#fff}.match-menu{position:fixed;margin-top:-4px;z-index:100000;background:linear-gradient(180deg,#403d46,#3e3b44);border-radius:12px;padding:0;box-shadow:0 8px 24px #00000080,0 2px 8px #0000004d,inset 6px 0 12px #c8c8d240,inset 3px 0 6px #c8c8d259,inset 0 -6px 12px #403d4680,inset 0 -3px 6px #403d46cc,inset 16px 0 10px -2px #3a3a44e6,inset 0 -16px 10px -2px #3a3a44e6;display:flex;flex-direction:column;overflow:hidden}.match-menu .menu-item{color:#ffffffe6;font-family:Gilroy,sans-serif;font-weight:700;font-size:14px;line-height:100%;letter-spacing:.07px;cursor:pointer;transition:background .2s;text-align:left;display:flex;align-items:center;justify-content:flex-start;padding:8px 0 8px 12px}.match-menu .menu-item:hover{background:#ffffff1a}.default-empty-profile{padding:1px;border-radius:50%;background:radial-gradient(circle,#acacac 79%,#fff);display:flex;justify-content:center;align-items:center;position:relative;margin:0 10px}.default-empty-profile .loading-skeleton{position:absolute;top:0}.default-empty-profile .p-skeleton:after{background:linear-gradient(90deg,#fff0,#fff6,#fff0)}\n"] }]
|
|
4288
|
+
args: [{ selector: 'lib-client-match-overview', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, CircleProgressModule, TranslateModule, SkeletonModule, ClientChatHeadComponent, ChatHeadSmallComponent, StandardChatHeadComponent], template: "@if (!default && imageLoader$ | async) {\n<div class=\"overview\" [ngClass]=\"{ overview__expand: expand, overview__collapse: !expand }\">\n <div class=\"overview__container\">\n @if (!expand) {\n <div class=\"overview__head-with-progress\">\n <lib-standard-chat-head [size]=\"54.487\" [model]=\"standardHeadModel\"></lib-standard-chat-head>\n @if (showProgressUnderHead && progressPercent !== null) {\n <p class=\"overview__progress\">{{ progressPercent }}%</p>\n }\n </div>\n } @else {\n <lib-client-chat-head [size]=\"78\" [model]=\"clientHeadModel\" [class.pulsating-head]=\"overview.allowRepositioning\"></lib-client-chat-head>\n\n @if (showRejectMenu) {\n <div class=\"reject-menu-trigger\" (click)=\"toggleRejectMenu($event)\">\n <i class=\"pi pi-ellipsis-h\"></i>\n </div>\n }\n\n @if (showRejectMenuState) {\n <button type=\"button\" class=\"reject-dropdown-btn\" (click)=\"reject(); $event.stopPropagation()\">\n <span class=\"reject-dropdown-inner\">\n <svg class=\"reject-dropdown-svg\" width=\"59\" height=\"16\" viewBox=\"0 0 59 16\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <text fill=\"#D9D9D9\" xml:space=\"preserve\" style=\"white-space: pre\" font-family=\"Gilroy\" font-size=\"8\"\n letter-spacing=\"0.0703846px\">\n <tspan x=\"34.52\" y=\"10.9501\">Reject</tspan>\n </text>\n <g filter=\"url(#filter0_f_2003_8336)\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M10.9353 4.11938C11.1384 4.3225 11.1384 4.65183 10.9353 4.85495L2.35324 13.437C2.15012 13.6401 1.82079 13.6401 1.61767 13.437C1.41455 13.2339 1.41455 12.9046 1.61767 12.7014L10.1997 4.11938C10.4028 3.91626 10.7322 3.91626 10.9353 4.11938Z\"\n fill=\"#FE3C72\" stroke=\"black\" stroke-width=\"6.44633\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <circle cx=\"6.14645\" cy=\"8.64816\" r=\"4.68112\" stroke=\"black\" stroke-width=\"6.44633\" />\n </g>\n <g filter=\"url(#filter1_f_2003_8336)\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M9.49917 5.55559C9.64784 5.70426 9.64784 5.9453 9.49917 6.09397L3.21775 12.3754C3.06908 12.5241 2.82804 12.5241 2.67937 12.3754C2.5307 12.2267 2.5307 11.9857 2.67937 11.837L8.96079 5.55559C9.10946 5.40692 9.3505 5.40692 9.49917 5.55559Z\"\n stroke=\"#FE3C72\" stroke-width=\"0.589779\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <circle cx=\"5.9941\" cy=\"8.87032\" r=\"3.42623\" stroke=\"#FE3C72\" stroke-width=\"0.589779\" />\n </g>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M9.36719 5.68917C9.50191 5.82389 9.50191 6.04231 9.36719 6.17702L3.67531 11.8689C3.5406 12.0036 3.32218 12.0036 3.18746 11.8689C3.05275 11.7342 3.05275 11.5158 3.18746 11.3811L8.87934 5.68917C9.01406 5.55446 9.23247 5.55446 9.36719 5.68917Z\"\n fill=\"#FFD2DF\" stroke=\"#FFD2DF\" stroke-width=\"0.322317\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <circle cx=\"6.19109\" cy=\"8.69279\" r=\"3.10466\" stroke=\"#FFD2DF\" stroke-width=\"0.634731\" />\n <defs>\n <filter id=\"filter0_f_2003_8336\" x=\"-12.0578\" y=\"-9.5561\" width=\"36.6688\" height=\"36.6686\"\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\" />\n <feGaussianBlur stdDeviation=\"5.15\" result=\"effect1_foregroundBlur_2003_8335\" />\n </filter>\n <filter id=\"filter1_f_2003_8336\" x=\"1.09339\" y=\"3.96961\" width=\"9.99193\" height=\"9.99168\"\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\" />\n <feGaussianBlur stdDeviation=\"0.589779\" result=\"effect1_foregroundBlur_2003_8335\" />\n </filter>\n </defs>\n </svg>\n </span>\n </button>\n }\n\n <div class=\"overview__info-wrapper\">\n <div class=\"overview__comparison comparison\">\n <div class=\"comparison__entity\">\n <div class=\"comparison__value\">\n <span class=\"personality\">{{ overview.personality }}%</span>\n </div>\n <div class=\"comparison__label\">\n <span>Personality</span>\n <span>Match</span>\n </div>\n </div>\n <div class=\"comparison__entity\">\n <div class=\"comparison__value\">\n <span class=\"preferences\">{{ overview.preferences }}%</span>\n </div>\n <div class=\"comparison__label\">\n <span>Preferences</span>\n <span>Match</span>\n </div>\n </div>\n </div>\n\n <div class=\"overview__secondary-profile secondary-profile\">\n <lib-chat-head-small [size]=\"28\" [imageUrl]=\"overview.secondary.src\"></lib-chat-head-small>\n <div class=\"secondary-profile__name\">{{ overview.secondary.name }}</div>\n </div>\n </div>\n }\n </div>\n\n @if (expand) {\n <div class=\"overview__back-shadow\"></div>\n }\n</div>\n@if (expand && !isGrouped) {\n<div class=\"menu-trigger\" (click)=\"toggleMenu($event)\">\n <i class=\"pi pi-ellipsis-h\"></i>\n</div>\n<ng-template #menuTemplate>\n <div class=\"menu-backdrop\" (click)=\"closeMenu()\" style=\"position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9998; background: transparent;\"></div>\n <div class=\"match-menu\" (click)=\"$event.stopPropagation()\" [style.top.px]=\"menuPosition.top\"\n [style.left.px]=\"menuPosition.left\" [style.width.px]=\"menuPosition.width\"\n style=\"position: fixed; z-index: 9999;\">\n <div class=\"menu-item\" (click)=\"reposition()\">{{ overview.allowRepositioning ? 'End Reposition' : 'Reposition' }}</div>\n </div>\n</ng-template>\n}\n} @else if (loading) {\n<div class=\"overview\" part=\"loading\">\n <div class=\"overview__container\">\n <div class=\"default-empty-profile\">\n <p-skeleton shape=\"circle\" size=\"3rem\" class=\"loading-skeleton\" />\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"34\" height=\"35\" viewBox=\"0 0 34 35\" fill=\"none\">\n <circle cx=\"17.0096\" cy=\"17.5439\" r=\"16.5945\" fill=\"#29252D\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M13.4843 18.2501C13.5008 18.2493 13.5174 18.2489 13.5339 18.2489H20.1384C20.1549 18.2489 20.1714 18.2493 20.188 18.2501C22.501 18.3649 24.5513 19.7726 25.4901 21.8878C26.1644 23.2368 25.7884 24.5724 24.9275 25.4921C24.0937 26.3827 22.802 26.9145 21.4595 26.9145H12.2127C10.8707 26.9145 9.57941 26.3825 8.74582 25.4921C7.88499 24.5726 7.50858 23.2372 8.182 21.888C9.12087 19.7726 11.1712 18.365 13.4843 18.2501ZM13.56 20.2486C12.0044 20.3346 10.6283 21.2884 10.0022 22.7165C9.99443 22.7342 9.98617 22.7517 9.97741 22.7689C9.72674 23.2609 9.82034 23.7138 10.2057 24.1253C10.6239 24.5721 11.367 24.9147 12.2127 24.9147H21.4595C22.3061 24.9147 23.0495 24.572 23.4675 24.1253C23.8527 23.7141 23.9461 23.2616 23.6951 22.7694C23.6863 22.7521 23.6779 22.7343 23.67 22.7165C23.044 21.2884 21.6679 20.3346 20.1122 20.2486H13.56Z\"\n fill=\"#5E5E5E\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M16.836 8.24993C15.1794 8.24993 13.8364 9.5929 13.8364 11.2495C13.8364 12.9062 15.1794 14.2492 16.836 14.2492C18.4927 14.2492 19.8356 12.9062 19.8356 11.2495C19.8356 10.454 19.5197 9.69103 18.9571 9.12849C18.3945 8.56595 17.6315 8.24993 16.836 8.24993ZM11.8367 11.2495C11.8367 8.48847 14.075 6.25018 16.836 6.25018C18.162 6.25018 19.4335 6.7769 20.3712 7.71446C21.3086 8.65202 21.8354 9.92363 21.8354 11.2495C21.8354 14.0107 19.5971 16.2489 16.836 16.2489C14.075 16.2489 11.8367 14.0107 11.8367 11.2495Z\"\n fill=\"#5E5E5E\" />\n </svg>\n </div>\n </div>\n</div>\n} @else if (default || !overview.primary) {\n<div class=\"overview\">\n <div class=\"overview__container\">\n <div class=\"default-empty-profile\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"34\" height=\"35\" viewBox=\"0 0 34 35\" fill=\"none\">\n <circle cx=\"17.0096\" cy=\"17.5439\" r=\"16.5945\" fill=\"#29252D\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M13.4843 18.2501C13.5008 18.2493 13.5174 18.2489 13.5339 18.2489H20.1384C20.1549 18.2489 20.1714 18.2493 20.188 18.2501C22.501 18.3649 24.5513 19.7726 25.4901 21.8878C26.1644 23.2368 25.7884 24.5724 24.9275 25.4921C24.0937 26.3827 22.802 26.9145 21.4595 26.9145H12.2127C10.8707 26.9145 9.57941 26.3825 8.74582 25.4921C7.88499 24.5726 7.50858 23.2372 8.182 21.888C9.12087 19.7726 11.1712 18.365 13.4843 18.2501ZM13.56 20.2486C12.0044 20.3346 10.6283 21.2884 10.0022 22.7165C9.99443 22.7342 9.98617 22.7517 9.97741 22.7689C9.72674 23.2609 9.82034 23.7138 10.2057 24.1253C10.6239 24.5721 11.367 24.9147 12.2127 24.9147H21.4595C22.3061 24.9147 23.0495 24.572 23.4675 24.1253C23.8527 23.7141 23.9461 23.2616 23.6951 22.7694C23.6863 22.7521 23.6779 22.7343 23.67 22.7165C23.044 21.2884 21.6679 20.3346 20.1122 20.2486H13.56Z\"\n fill=\"#5E5E5E\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M16.836 8.24993C15.1794 8.24993 13.8364 9.5929 13.8364 11.2495C13.8364 12.9062 15.1794 14.2492 16.836 14.2492C18.4927 14.2492 19.8356 12.9062 19.8356 11.2495C19.8356 10.454 19.5197 9.69103 18.9571 9.12849C18.3945 8.56595 17.6315 8.24993 16.836 8.24993ZM11.8367 11.2495C11.8367 8.48847 14.075 6.25018 16.836 6.25018C18.162 6.25018 19.4335 6.7769 20.3712 7.71446C21.3086 8.65202 21.8354 9.92363 21.8354 11.2495C21.8354 14.0107 19.5971 16.2489 16.836 16.2489C14.075 16.2489 11.8367 14.0107 11.8367 11.2495Z\"\n fill=\"#5E5E5E\" />\n </svg>\n </div>\n </div>\n</div>\n}\n", styles: [".zoom-in{animation:fadeZoomIn .5s ease-in-out}.zoom-out{animation:fadeZoomOut .5s ease-in-out}.zoom-out.collapse{display:none!important}@keyframes fadeZoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}@keyframes fadeZoomIn{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.hide{max-height:0;overflow:hidden;opacity:0;transition:max-height .8s ease-in-out,opacity .8s ease-in-out}.show{max-height:200px;opacity:1;transition:max-height .8s ease-in-out,opacity .8s ease-in-out}.f-calistoga{font-family:Calistoga,serif;font-style:normal}.f-gilroy-medium{font-family:Gilroy-Medium,serif}.f-gilroy-semibold{font-family:Gilroy-SemiBold,serif}.f-gilroy-regular{font-family:Gilroy-Regular,serif}.f-size-34{font-size:2.125rem}.f-3xl{font-size:28px}.f-2xl{font-size:24px}.f-xl{font-size:18px}.f-lg{font-size:16px}.f-md{font-size:14px}.f-sm{font-size:12px}.f-xs{font-size:10px}.f-white{color:var(--ion-text-color)}.f-dark{color:var(--ion-text-color-secondary)}.f-gray{color:var(--ion-text-color);opacity:.6}.f-light-gray{color:var(--ion-text-color);opacity:.7}.f-accent{color:var(--text-highlight-color)}.h-160{line-height:160%}.h-100{line-height:100%}.h-110{line-height:110%}.h-150{line-height:150%}.h-180{line-height:180%}.f-w-400{font-weight:400}.f-w-500{font-weight:500}.f-w-600{font-weight:600}.f-w-700{font-weight:700}h1,h2,h3,h5,h6,p{margin:0}:host{font-size:clamp(0px,var(--component-size, 1.5dvw),.75rem);position:relative;display:block}:host ::ng-deep lib-client-chat-head{position:absolute;top:0;left:0}:host ::ng-deep lib-client-chat-head.pulsating-head{border-radius:50%;animation:pulsate-border 1.5s infinite}@keyframes pulsate-border{0%{box-shadow:0 0 #ffffffb3}70%{box-shadow:0 0 0 10px #fff0}to{box-shadow:0 0 #fff0}}.overview{overflow:visible;width:auto;max-width:var(--card-width, 100%);display:block;position:relative}.overview__collapse{--card-width: 15em}.overview__expand{--card-width: 100%;margin:0 -15px}.overview__back-shadow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:160%;width:140%;z-index:0;background:radial-gradient(closest-side,black 30%,transparent 100%);opacity:.9}.overview__container{z-index:2;position:relative;display:flex;align-items:flex-start;padding:0;height:72px}.overview__collapse .overview__container{height:auto;align-items:flex-start;padding-right:15px}.overview__expand .overview__container{transform:none;transform-origin:center}.overview__info-wrapper{display:flex;flex-direction:column;justify-content:center;margin-left:78px;padding-top:4px}.overview__comparison{display:flex;flex-direction:column;justify-content:center;transform-origin:left center;margin-bottom:2px;position:relative;flex-shrink:0}.overview__head-with-progress{display:flex;flex-direction:column;align-items:center}.overview__progress{margin-top:7px;color:var(--dark-white-100, #fff);font-family:Gilroy,-apple-system,Roboto,Helvetica,sans-serif;font-size:8px;font-style:normal;font-weight:500;line-height:normal;letter-spacing:.07px}.overview .reject-menu-trigger{position:absolute;top:-5px;left:60px;z-index:5;color:#fff;padding:8px;cursor:pointer;font-size:1.2em}.reject-dropdown-btn{position:absolute;left:50%;bottom:75px;transform:translate(-50%);border:none;padding:0;background:transparent;z-index:3}.reject-dropdown-inner{position:relative;display:flex;justify-content:center;align-items:center;width:89px;height:29px;border-radius:8px;background:linear-gradient(180deg,#403d46,#3e3b44);box-shadow:0 2px 4px #00000040,0 4px 4px #00000040,2px -2px 3px #0006 inset,0 -2px 8px #fff3 inset;cursor:pointer;z-index:3}.reject-dropdown-svg{display:block}.comparison__entity{font-family:Gilroy-Medium;display:flex;gap:.55rem;align-items:flex-start;margin-bottom:2.46px}.comparison__entity:nth-child(2){margin-bottom:.49px}.comparison__value{height:auto;width:2.5rem;display:flex;align-items:flex-start;justify-content:flex-end;padding-top:2px}.comparison__value>span{font-size:1.2rem;font-weight:400;line-height:1.2}.comparison__value>span.preferences{color:#fe3c72}.comparison__value>span.personality{color:#9c2b4b}.comparison__label{display:flex;flex-direction:column;justify-content:center;text-align:left;line-height:1.1}.comparison__label>span{font-size:.55rem;color:#fff;opacity:.9;padding-top:3px}.secondary-profile{display:flex;align-items:flex-start;gap:.55rem;margin-top:-2.5px;margin-left:-2px}.secondary-profile__name{margin-left:11px;font-size:.55rem;color:#fff;opacity:.9;font-family:Gilroy-Medium;white-space:nowrap;padding-top:6px}.menu-trigger{position:absolute;right:25px;bottom:0;z-index:100;line-height:0;width:1.5px;height:1.5px;display:flex;justify-content:center;align-items:center;cursor:pointer}.menu-trigger i{font-size:.7rem;color:#fff}.match-menu{position:fixed;margin-top:-4px;z-index:100000;background:linear-gradient(180deg,#403d46,#3e3b44);border-radius:12px;padding:0;box-shadow:0 8px 24px #00000080,0 2px 8px #0000004d,inset 6px 0 12px #c8c8d240,inset 3px 0 6px #c8c8d259,inset 0 -6px 12px #403d4680,inset 0 -3px 6px #403d46cc,inset 16px 0 10px -2px #3a3a44e6,inset 0 -16px 10px -2px #3a3a44e6;display:flex;flex-direction:column;overflow:hidden}.match-menu .menu-item{color:#ffffffe6;font-family:Gilroy,sans-serif;font-weight:700;font-size:14px;line-height:100%;letter-spacing:.07px;cursor:pointer;transition:background .2s;text-align:left;display:flex;align-items:center;justify-content:flex-start;padding:8px 0 8px 12px}.match-menu .menu-item:hover{background:#ffffff1a}.default-empty-profile{padding:1px;border-radius:50%;background:radial-gradient(circle,#acacac 79%,#fff);display:flex;justify-content:center;align-items:center;position:relative;margin:0 10px}.default-empty-profile .loading-skeleton{position:absolute;top:0}.default-empty-profile .p-skeleton:after{background:linear-gradient(90deg,#fff0,#fff6,#fff0)}\n"] }]
|
|
4289
4289
|
}], propDecorators: { overview: [{
|
|
4290
4290
|
type: Input,
|
|
4291
4291
|
args: [{ required: true }]
|
|
@@ -4914,6 +4914,18 @@ class SpiderChartComponent {
|
|
|
4914
4914
|
this.cdr.detectChanges();
|
|
4915
4915
|
// Position logic handled in CSS for center alignment
|
|
4916
4916
|
toolTip.style('display', 'block');
|
|
4917
|
+
const chartEl = this.d3Chart?.nativeElement;
|
|
4918
|
+
if (chartEl) {
|
|
4919
|
+
const rect = chartEl.getBoundingClientRect();
|
|
4920
|
+
const x = rect.right + 12;
|
|
4921
|
+
const y = rect.top + rect.height / 2;
|
|
4922
|
+
toolTip
|
|
4923
|
+
.style('position', 'fixed')
|
|
4924
|
+
.style('left', `${x}px`)
|
|
4925
|
+
.style('top', `${y}px`)
|
|
4926
|
+
.style('transform', 'translateY(-50%) scale(0.6)')
|
|
4927
|
+
.style('z-index', '1000');
|
|
4928
|
+
}
|
|
4917
4929
|
}
|
|
4918
4930
|
createPolygons(group, datasets, rScale, angleSlice) {
|
|
4919
4931
|
group.selectAll('polygon').remove();
|
|
@@ -5045,11 +5057,11 @@ class SpiderChartComponent {
|
|
|
5045
5057
|
this.createPolygons(this.svg, datasets, rScale, angleSlice);
|
|
5046
5058
|
}
|
|
5047
5059
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SpiderChartComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5048
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SpiderChartComponent, isStandalone: true, selector: "lib-spider-chart", inputs: { datasets: "datasets", config: "config", polygon_colors: "polygon_colors", showChartInfo: "showChartInfo" }, outputs: { tooltipActiveChange: "tooltipActiveChange" }, providers: [InitialsPipe], viewQueries: [{ propertyName: "d3Chart", first: true, predicate: ["D3Chart"], descendants: true }, { propertyName: "tooltipRef", first: true, predicate: ["tooltipContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"container\" [class.active]=\"isTooltipActive\">\n <div class=\"d3-container\">\n <div class=\"d3-chart\" #D3Chart>\n <div #tooltipContainer class=\"chart-tooltip\">\n <lib-alert-popup [title]=\"titleAlertPopup\" [description]=\"descriptionAlertPopup\" [timeState]=\"timeStateAlertPopup\" [number]=\"numberAlertPopup\" (closed)=\"onClosedAlert($event)\"></lib-alert-popup>\n </div>\n </div>\n @if (showChartInfo && !isTooltipActive) {\n <div class=\"chartInfo\">\n @if (datasets.length > 0) {\n <div class=\"datachart\">\n @for (dataset of datasets; let j = $index; track dataset) {\n <div class=\"legend-item\">\n <div [style.border]=\"'5px solid ' + polygon_colors?.[j]?.value\" [style.boxShadow]=\"'0px 0px 12px ' + polygon_colors?.[j]?.value\" class=\"legend-color\"></div>\n {{ dataset.title }}\n </div>\n }\n </div>\n }\n </div>\n }\n\n @if (isTooltipActive && datasets.length > 0) {\n <div class=\"prospect-selector-container\">\n <div class=\"prospect-group\" (click)=\"selectNextProspect()\">\n <div class=\"prospect-content\">\n <div class=\"prospect-head\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" class=\"head-bg\">\n <ellipse cx=\"20\" cy=\"19.8031\" rx=\"20\" ry=\"19.8031\" fill=\"url(#paint0_linear_524_5213)\"/>\n <defs>\n <linearGradient id=\"paint0_linear_524_5213\" x1=\"35.9487\" y1=\"1.83015\" x2=\"27.3749\" y2=\"45.6436\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.581821\" stop-color=\"#27242C\"/>\n <stop offset=\"1\" stop-color=\"#0C0B0E\"/>\n </linearGradient>\n </defs>\n </svg>\n \n @if (datasets[selectedDatasetIndex].image) {\n <img [src]=\"datasets[selectedDatasetIndex].image\" class=\"prospect-image\" />\n } @else {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"21\" viewBox=\"0 0 18 21\" fill=\"none\" class=\"user-icon\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.64788 11.9999C5.6644 11.9991 5.68093 11.9987 5.69746 11.9987H12.3019C12.3185 11.9987 12.335 11.9991 12.3515 11.9999C14.6646 12.1147 16.7148 13.5224 17.6536 15.6376C18.328 16.9866 17.952 18.3222 17.0911 19.2419C16.2573 20.1325 14.9656 20.6643 13.6231 20.6643H4.3763C3.03431 20.6643 1.74298 20.1323 0.909396 19.2419C0.0485599 18.3224 -0.327845 16.987 0.345575 15.6379C1.28444 13.5224 3.33479 12.1148 5.64788 11.9999ZM5.7236 13.9985C4.16794 14.0845 2.79187 15.0382 2.16577 16.4663C2.15801 16.484 2.14974 16.5015 2.14098 16.5187C1.89031 17.0107 1.98391 17.4636 2.36924 17.8752C2.78748 18.3219 3.53057 18.6645 4.3763 18.6645H13.6231C14.4697 18.6645 15.213 18.3218 15.6311 17.8752C16.0163 17.4639 16.1097 17.0114 15.8587 16.5192C15.8499 16.5019 15.8415 16.4841 15.8336 16.4663C15.2076 15.0382 13.8315 14.0845 12.2758 13.9985H5.7236Z\" fill=\"#5E5E5E\"/>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.99971 1.99974C7.34312 1.99974 6.00011 3.34272 6.00011 4.99936C6.00011 6.656 7.34312 7.99897 8.99971 7.99897C10.6564 7.99897 11.9993 6.656 11.9993 4.99936C11.9993 4.20381 11.6834 3.44085 11.1208 2.87831C10.5582 2.31577 9.79521 1.99974 8.99971 1.99974ZM4.00037 4.99936C4.00037 2.23829 6.23865 0 8.99971 0C10.3257 0 11.5972 0.526719 12.5349 1.46428C13.4723 2.40184 13.9991 3.67345 13.9991 4.99936C13.9991 7.76047 11.7608 9.99872 8.99971 9.99872C6.23865 9.99872 4.00037 7.76047 4.00037 4.99936Z\" fill=\"#5E5E5E\"/>\n </svg>\n }\n </div>\n \n <div class=\"compatibility-score\">\n {{ datasets[selectedDatasetIndex].score || 0 }}%\n </div>\n </div>\n \n <div class=\"selector-tooltip-container\">\n @if (isSelectorTooltipVisible) {\n <lib-alert-popup title=\"
|
|
5060
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SpiderChartComponent, isStandalone: true, selector: "lib-spider-chart", inputs: { datasets: "datasets", config: "config", polygon_colors: "polygon_colors", showChartInfo: "showChartInfo" }, outputs: { tooltipActiveChange: "tooltipActiveChange" }, providers: [InitialsPipe], viewQueries: [{ propertyName: "d3Chart", first: true, predicate: ["D3Chart"], descendants: true }, { propertyName: "tooltipRef", first: true, predicate: ["tooltipContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"container\" [class.active]=\"isTooltipActive\">\n <div class=\"d3-container\">\n <div class=\"d3-chart\" #D3Chart>\n <div #tooltipContainer class=\"chart-tooltip\">\n <lib-alert-popup [title]=\"titleAlertPopup\" [description]=\"descriptionAlertPopup\" [timeState]=\"timeStateAlertPopup\" [number]=\"numberAlertPopup\" (closed)=\"onClosedAlert($event)\"></lib-alert-popup>\n </div>\n </div>\n @if (showChartInfo && !isTooltipActive) {\n <div class=\"chartInfo\">\n @if (datasets.length > 0) {\n <div class=\"datachart\">\n @for (dataset of datasets; let j = $index; track dataset) {\n <div class=\"legend-item\">\n <div [style.border]=\"'5px solid ' + polygon_colors?.[j]?.value\" [style.boxShadow]=\"'0px 0px 12px ' + polygon_colors?.[j]?.value\" class=\"legend-color\"></div>\n {{ dataset.title }}\n </div>\n }\n </div>\n }\n </div>\n }\n\n @if (isTooltipActive && datasets.length > 0) {\n <div class=\"prospect-selector-container\">\n <div class=\"prospect-group\" (click)=\"selectNextProspect()\">\n <div class=\"prospect-content\">\n <div class=\"prospect-head\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" class=\"head-bg\">\n <ellipse cx=\"20\" cy=\"19.8031\" rx=\"20\" ry=\"19.8031\" fill=\"url(#paint0_linear_524_5213)\"/>\n <defs>\n <linearGradient id=\"paint0_linear_524_5213\" x1=\"35.9487\" y1=\"1.83015\" x2=\"27.3749\" y2=\"45.6436\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.581821\" stop-color=\"#27242C\"/>\n <stop offset=\"1\" stop-color=\"#0C0B0E\"/>\n </linearGradient>\n </defs>\n </svg>\n \n @if (datasets[selectedDatasetIndex].image) {\n <img [src]=\"datasets[selectedDatasetIndex].image\" class=\"prospect-image\" alt=\"Prospect image\" />\n } @else {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"21\" viewBox=\"0 0 18 21\" fill=\"none\" class=\"user-icon\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.64788 11.9999C5.6644 11.9991 5.68093 11.9987 5.69746 11.9987H12.3019C12.3185 11.9987 12.335 11.9991 12.3515 11.9999C14.6646 12.1147 16.7148 13.5224 17.6536 15.6376C18.328 16.9866 17.952 18.3222 17.0911 19.2419C16.2573 20.1325 14.9656 20.6643 13.6231 20.6643H4.3763C3.03431 20.6643 1.74298 20.1323 0.909396 19.2419C0.0485599 18.3224 -0.327845 16.987 0.345575 15.6379C1.28444 13.5224 3.33479 12.1148 5.64788 11.9999ZM5.7236 13.9985C4.16794 14.0845 2.79187 15.0382 2.16577 16.4663C2.15801 16.484 2.14974 16.5015 2.14098 16.5187C1.89031 17.0107 1.98391 17.4636 2.36924 17.8752C2.78748 18.3219 3.53057 18.6645 4.3763 18.6645H13.6231C14.4697 18.6645 15.213 18.3218 15.6311 17.8752C16.0163 17.4639 16.1097 17.0114 15.8587 16.5192C15.8499 16.5019 15.8415 16.4841 15.8336 16.4663C15.2076 15.0382 13.8315 14.0845 12.2758 13.9985H5.7236Z\" fill=\"#5E5E5E\"/>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.99971 1.99974C7.34312 1.99974 6.00011 3.34272 6.00011 4.99936C6.00011 6.656 7.34312 7.99897 8.99971 7.99897C10.6564 7.99897 11.9993 6.656 11.9993 4.99936C11.9993 4.20381 11.6834 3.44085 11.1208 2.87831C10.5582 2.31577 9.79521 1.99974 8.99971 1.99974ZM4.00037 4.99936C4.00037 2.23829 6.23865 0 8.99971 0C10.3257 0 11.5972 0.526719 12.5349 1.46428C13.4723 2.40184 13.9991 3.67345 13.9991 4.99936C13.9991 7.76047 11.7608 9.99872 8.99971 9.99872C6.23865 9.99872 4.00037 7.76047 4.00037 4.99936Z\" fill=\"#5E5E5E\"/>\n </svg>\n }\n </div>\n \n <div class=\"compatibility-score\">\n {{ datasets[selectedDatasetIndex].score || 0 }}%\n </div>\n </div>\n \n <div class=\"selector-tooltip-container\">\n @if (isSelectorTooltipVisible) {\n <lib-alert-popup title=\"CLIENT_DASHBOARD.ALERT_POPUP.PROSPECT_SELECTOR.TITLE\" description=\"CLIENT_DASHBOARD.ALERT_POPUP.PROSPECT_SELECTOR.DESCRIPTION\" (closed)=\"onClosedSelectorTooltip($event)\"></lib-alert-popup>\n }\n </div>\n </div>\n </div>\n }\n </div>\n</div>\n", styles: [".align-chart{display:flex;justify-content:center;align-items:center}.d3-container{width:100%;position:relative;min-height:350px;display:flex;flex-direction:column;align-items:center;transition:all .5s ease;padding:20px;box-sizing:border-box}.d3-chart{width:121px;height:121px;min-width:121px;min-height:121px;max-width:121px;max-height:121px;position:relative;display:flex;justify-content:center;align-items:center;transition:all .5s ease;border-radius:127.93px;border:.5px solid #FE3C72;background:linear-gradient(180deg,#27242c,#0c0b0e);box-shadow:inset -.84px -.84px 3.34px #cbc7d180,inset 7.1px 9.19px 8.35px 1.04px #111014b3;padding:0;overflow:visible;aspect-ratio:1/1}.d3-chart ::ng-deep svg{width:121px;height:121px;position:absolute;top:0;left:0;overflow:visible}.chartInfo{margin-top:24px;width:100%;display:flex;justify-content:center}.datachart{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}.legend-item{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500;padding:8px 12px;background-color:#464a4c4d;border-radius:8px;color:#666;transition:all .2s ease}.legend-item:hover{background-color:#464a4c80;transform:translateY(-1px)}.legend-color{width:18px;height:18px;border-radius:50%;background-color:#fff;flex-shrink:0}.chart-tooltip{z-index:1000;display:none;position:fixed;top:0;right:60px;pointer-events:auto}::ng-deep .line-label{font-family:Gilroy,sans-serif!important;font-weight:400!important;font-style:normal!important;font-size:9.6px!important;line-height:normal!important;letter-spacing:-.106px!important;fill:#fe3c72!important;text-shadow:0 2.56px 1.6px #000!important}.prospect-selector-container{width:100%;margin-top:4px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px;padding-left:calc(50% - 60px)}.prospect-head{position:relative;width:40px;height:40px}.prospect-head .head-bg{position:absolute;top:0;left:0}.prospect-head .prospect-image{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:35px;height:35px;border-radius:50%;object-fit:cover}.prospect-head .user-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.compatibility-score{color:var(--dark-white-100, #FFF);font-family:Gilroy;font-size:8px;font-style:normal;font-weight:500;line-height:normal;letter-spacing:.07px}.prospect-group{width:100%;display:flex;flex-direction:row;align-items:center;gap:8px;cursor:pointer}.prospect-group .prospect-content{display:flex;flex-direction:column;align-items:center;gap:4px}.prospect-group .selector-tooltip-container{width:max-content;transform:scale(.6);pointer-events:auto;margin-left:-30px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AlertPopupComponent, selector: "lib-alert-popup", inputs: ["title", "description", "timeState", "number"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5049
5061
|
}
|
|
5050
5062
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SpiderChartComponent, decorators: [{
|
|
5051
5063
|
type: Component,
|
|
5052
|
-
args: [{ selector: 'lib-spider-chart', standalone: true, imports: [CommonModule, AlertPopupComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [InitialsPipe], template: "<div class=\"container\" [class.active]=\"isTooltipActive\">\n <div class=\"d3-container\">\n <div class=\"d3-chart\" #D3Chart>\n <div #tooltipContainer class=\"chart-tooltip\">\n <lib-alert-popup [title]=\"titleAlertPopup\" [description]=\"descriptionAlertPopup\" [timeState]=\"timeStateAlertPopup\" [number]=\"numberAlertPopup\" (closed)=\"onClosedAlert($event)\"></lib-alert-popup>\n </div>\n </div>\n @if (showChartInfo && !isTooltipActive) {\n <div class=\"chartInfo\">\n @if (datasets.length > 0) {\n <div class=\"datachart\">\n @for (dataset of datasets; let j = $index; track dataset) {\n <div class=\"legend-item\">\n <div [style.border]=\"'5px solid ' + polygon_colors?.[j]?.value\" [style.boxShadow]=\"'0px 0px 12px ' + polygon_colors?.[j]?.value\" class=\"legend-color\"></div>\n {{ dataset.title }}\n </div>\n }\n </div>\n }\n </div>\n }\n\n @if (isTooltipActive && datasets.length > 0) {\n <div class=\"prospect-selector-container\">\n <div class=\"prospect-group\" (click)=\"selectNextProspect()\">\n <div class=\"prospect-content\">\n <div class=\"prospect-head\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" class=\"head-bg\">\n <ellipse cx=\"20\" cy=\"19.8031\" rx=\"20\" ry=\"19.8031\" fill=\"url(#paint0_linear_524_5213)\"/>\n <defs>\n <linearGradient id=\"paint0_linear_524_5213\" x1=\"35.9487\" y1=\"1.83015\" x2=\"27.3749\" y2=\"45.6436\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.581821\" stop-color=\"#27242C\"/>\n <stop offset=\"1\" stop-color=\"#0C0B0E\"/>\n </linearGradient>\n </defs>\n </svg>\n \n @if (datasets[selectedDatasetIndex].image) {\n <img [src]=\"datasets[selectedDatasetIndex].image\" class=\"prospect-image\" />\n } @else {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"21\" viewBox=\"0 0 18 21\" fill=\"none\" class=\"user-icon\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.64788 11.9999C5.6644 11.9991 5.68093 11.9987 5.69746 11.9987H12.3019C12.3185 11.9987 12.335 11.9991 12.3515 11.9999C14.6646 12.1147 16.7148 13.5224 17.6536 15.6376C18.328 16.9866 17.952 18.3222 17.0911 19.2419C16.2573 20.1325 14.9656 20.6643 13.6231 20.6643H4.3763C3.03431 20.6643 1.74298 20.1323 0.909396 19.2419C0.0485599 18.3224 -0.327845 16.987 0.345575 15.6379C1.28444 13.5224 3.33479 12.1148 5.64788 11.9999ZM5.7236 13.9985C4.16794 14.0845 2.79187 15.0382 2.16577 16.4663C2.15801 16.484 2.14974 16.5015 2.14098 16.5187C1.89031 17.0107 1.98391 17.4636 2.36924 17.8752C2.78748 18.3219 3.53057 18.6645 4.3763 18.6645H13.6231C14.4697 18.6645 15.213 18.3218 15.6311 17.8752C16.0163 17.4639 16.1097 17.0114 15.8587 16.5192C15.8499 16.5019 15.8415 16.4841 15.8336 16.4663C15.2076 15.0382 13.8315 14.0845 12.2758 13.9985H5.7236Z\" fill=\"#5E5E5E\"/>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.99971 1.99974C7.34312 1.99974 6.00011 3.34272 6.00011 4.99936C6.00011 6.656 7.34312 7.99897 8.99971 7.99897C10.6564 7.99897 11.9993 6.656 11.9993 4.99936C11.9993 4.20381 11.6834 3.44085 11.1208 2.87831C10.5582 2.31577 9.79521 1.99974 8.99971 1.99974ZM4.00037 4.99936C4.00037 2.23829 6.23865 0 8.99971 0C10.3257 0 11.5972 0.526719 12.5349 1.46428C13.4723 2.40184 13.9991 3.67345 13.9991 4.99936C13.9991 7.76047 11.7608 9.99872 8.99971 9.99872C6.23865 9.99872 4.00037 7.76047 4.00037 4.99936Z\" fill=\"#5E5E5E\"/>\n </svg>\n }\n </div>\n \n <div class=\"compatibility-score\">\n {{ datasets[selectedDatasetIndex].score || 0 }}%\n </div>\n </div>\n \n <div class=\"selector-tooltip-container\">\n @if (isSelectorTooltipVisible) {\n <lib-alert-popup title=\"
|
|
5064
|
+
args: [{ selector: 'lib-spider-chart', standalone: true, imports: [CommonModule, AlertPopupComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [InitialsPipe], template: "<div class=\"container\" [class.active]=\"isTooltipActive\">\n <div class=\"d3-container\">\n <div class=\"d3-chart\" #D3Chart>\n <div #tooltipContainer class=\"chart-tooltip\">\n <lib-alert-popup [title]=\"titleAlertPopup\" [description]=\"descriptionAlertPopup\" [timeState]=\"timeStateAlertPopup\" [number]=\"numberAlertPopup\" (closed)=\"onClosedAlert($event)\"></lib-alert-popup>\n </div>\n </div>\n @if (showChartInfo && !isTooltipActive) {\n <div class=\"chartInfo\">\n @if (datasets.length > 0) {\n <div class=\"datachart\">\n @for (dataset of datasets; let j = $index; track dataset) {\n <div class=\"legend-item\">\n <div [style.border]=\"'5px solid ' + polygon_colors?.[j]?.value\" [style.boxShadow]=\"'0px 0px 12px ' + polygon_colors?.[j]?.value\" class=\"legend-color\"></div>\n {{ dataset.title }}\n </div>\n }\n </div>\n }\n </div>\n }\n\n @if (isTooltipActive && datasets.length > 0) {\n <div class=\"prospect-selector-container\">\n <div class=\"prospect-group\" (click)=\"selectNextProspect()\">\n <div class=\"prospect-content\">\n <div class=\"prospect-head\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" class=\"head-bg\">\n <ellipse cx=\"20\" cy=\"19.8031\" rx=\"20\" ry=\"19.8031\" fill=\"url(#paint0_linear_524_5213)\"/>\n <defs>\n <linearGradient id=\"paint0_linear_524_5213\" x1=\"35.9487\" y1=\"1.83015\" x2=\"27.3749\" y2=\"45.6436\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.581821\" stop-color=\"#27242C\"/>\n <stop offset=\"1\" stop-color=\"#0C0B0E\"/>\n </linearGradient>\n </defs>\n </svg>\n \n @if (datasets[selectedDatasetIndex].image) {\n <img [src]=\"datasets[selectedDatasetIndex].image\" class=\"prospect-image\" alt=\"Prospect image\" />\n } @else {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"21\" viewBox=\"0 0 18 21\" fill=\"none\" class=\"user-icon\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.64788 11.9999C5.6644 11.9991 5.68093 11.9987 5.69746 11.9987H12.3019C12.3185 11.9987 12.335 11.9991 12.3515 11.9999C14.6646 12.1147 16.7148 13.5224 17.6536 15.6376C18.328 16.9866 17.952 18.3222 17.0911 19.2419C16.2573 20.1325 14.9656 20.6643 13.6231 20.6643H4.3763C3.03431 20.6643 1.74298 20.1323 0.909396 19.2419C0.0485599 18.3224 -0.327845 16.987 0.345575 15.6379C1.28444 13.5224 3.33479 12.1148 5.64788 11.9999ZM5.7236 13.9985C4.16794 14.0845 2.79187 15.0382 2.16577 16.4663C2.15801 16.484 2.14974 16.5015 2.14098 16.5187C1.89031 17.0107 1.98391 17.4636 2.36924 17.8752C2.78748 18.3219 3.53057 18.6645 4.3763 18.6645H13.6231C14.4697 18.6645 15.213 18.3218 15.6311 17.8752C16.0163 17.4639 16.1097 17.0114 15.8587 16.5192C15.8499 16.5019 15.8415 16.4841 15.8336 16.4663C15.2076 15.0382 13.8315 14.0845 12.2758 13.9985H5.7236Z\" fill=\"#5E5E5E\"/>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.99971 1.99974C7.34312 1.99974 6.00011 3.34272 6.00011 4.99936C6.00011 6.656 7.34312 7.99897 8.99971 7.99897C10.6564 7.99897 11.9993 6.656 11.9993 4.99936C11.9993 4.20381 11.6834 3.44085 11.1208 2.87831C10.5582 2.31577 9.79521 1.99974 8.99971 1.99974ZM4.00037 4.99936C4.00037 2.23829 6.23865 0 8.99971 0C10.3257 0 11.5972 0.526719 12.5349 1.46428C13.4723 2.40184 13.9991 3.67345 13.9991 4.99936C13.9991 7.76047 11.7608 9.99872 8.99971 9.99872C6.23865 9.99872 4.00037 7.76047 4.00037 4.99936Z\" fill=\"#5E5E5E\"/>\n </svg>\n }\n </div>\n \n <div class=\"compatibility-score\">\n {{ datasets[selectedDatasetIndex].score || 0 }}%\n </div>\n </div>\n \n <div class=\"selector-tooltip-container\">\n @if (isSelectorTooltipVisible) {\n <lib-alert-popup title=\"CLIENT_DASHBOARD.ALERT_POPUP.PROSPECT_SELECTOR.TITLE\" description=\"CLIENT_DASHBOARD.ALERT_POPUP.PROSPECT_SELECTOR.DESCRIPTION\" (closed)=\"onClosedSelectorTooltip($event)\"></lib-alert-popup>\n }\n </div>\n </div>\n </div>\n }\n </div>\n</div>\n", styles: [".align-chart{display:flex;justify-content:center;align-items:center}.d3-container{width:100%;position:relative;min-height:350px;display:flex;flex-direction:column;align-items:center;transition:all .5s ease;padding:20px;box-sizing:border-box}.d3-chart{width:121px;height:121px;min-width:121px;min-height:121px;max-width:121px;max-height:121px;position:relative;display:flex;justify-content:center;align-items:center;transition:all .5s ease;border-radius:127.93px;border:.5px solid #FE3C72;background:linear-gradient(180deg,#27242c,#0c0b0e);box-shadow:inset -.84px -.84px 3.34px #cbc7d180,inset 7.1px 9.19px 8.35px 1.04px #111014b3;padding:0;overflow:visible;aspect-ratio:1/1}.d3-chart ::ng-deep svg{width:121px;height:121px;position:absolute;top:0;left:0;overflow:visible}.chartInfo{margin-top:24px;width:100%;display:flex;justify-content:center}.datachart{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}.legend-item{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500;padding:8px 12px;background-color:#464a4c4d;border-radius:8px;color:#666;transition:all .2s ease}.legend-item:hover{background-color:#464a4c80;transform:translateY(-1px)}.legend-color{width:18px;height:18px;border-radius:50%;background-color:#fff;flex-shrink:0}.chart-tooltip{z-index:1000;display:none;position:fixed;top:0;right:60px;pointer-events:auto}::ng-deep .line-label{font-family:Gilroy,sans-serif!important;font-weight:400!important;font-style:normal!important;font-size:9.6px!important;line-height:normal!important;letter-spacing:-.106px!important;fill:#fe3c72!important;text-shadow:0 2.56px 1.6px #000!important}.prospect-selector-container{width:100%;margin-top:4px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px;padding-left:calc(50% - 60px)}.prospect-head{position:relative;width:40px;height:40px}.prospect-head .head-bg{position:absolute;top:0;left:0}.prospect-head .prospect-image{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:35px;height:35px;border-radius:50%;object-fit:cover}.prospect-head .user-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.compatibility-score{color:var(--dark-white-100, #FFF);font-family:Gilroy;font-size:8px;font-style:normal;font-weight:500;line-height:normal;letter-spacing:.07px}.prospect-group{width:100%;display:flex;flex-direction:row;align-items:center;gap:8px;cursor:pointer}.prospect-group .prospect-content{display:flex;flex-direction:column;align-items:center;gap:4px}.prospect-group .selector-tooltip-container{width:max-content;transform:scale(.6);pointer-events:auto;margin-left:-30px}\n"] }]
|
|
5053
5065
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { d3Chart: [{
|
|
5054
5066
|
type: ViewChild,
|
|
5055
5067
|
args: ['D3Chart']
|