@umbraco-engage/backoffice 17.0.3 → 17.1.0

package/dist/profiles/activity-tracker/components/activity-events/activity-events.element.js

@@ -4,12 +4,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+import { UeTableStyles } from "../../ue-table.styles.js";
 import { css, customElement, html, property, when, } from "@umbraco-cms/backoffice/external/lit";
 import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
 import { UMB_WORKSPACE_MODAL } from "@umbraco-cms/backoffice/workspace";
 import { UmbModalRouteRegistrationController } from "@umbraco-cms/backoffice/router";
 import { ENGAGE_AB_TESTING_TEST_ENTITY_TYPE } from "../../../../ab-testing/index.js";
-import { UeTableStyles } from "../../ue-table.styles.js";
 const elementName = "ue-profile-activity-table-events";
 let UeProfileDetailsActivityEventsElement = class UeProfileDetailsActivityEventsElement extends UmbLitElement {
     #pageview;

package/dist/profiles/activity-tracker/components/activity-pageviews/activity-pageviews.element.js

@@ -4,12 +4,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { css, customElement, html, property, state, when, } from "@umbraco-cms/backoffice/external/lit";
-import { tryExecute } from "@umbraco-cms/backoffice/resources";
 import { UeTableStyles } from "../../ue-table.styles.js";
 import { UeProfileActivityBaseElement } from "../../../activity-tracker/profile-activity-base.element.js";
-import { ProfileService } from "../../../../generated/index.js";
+import { tryExecute } from "@umbraco-cms/backoffice/resources";
+import { css, customElement, html, property, state, when, } from "@umbraco-cms/backoffice/external/lit";
 import { partialUpdateFrozenArray } from "@umbraco-cms/backoffice/observable-api";
+import { ProfileService } from "../../../../generated/index.js";
 const elementName = "ue-profile-detail-activity-pageviews";
 let UeProfileDetailsActivityPageviewsElement = class UeProfileDetailsActivityPageviewsElement extends UeProfileActivityBaseElement {
     constructor() {

package/dist/profiles/activity-tracker/components/entities.d.ts

@@ -1,3 +1,3 @@
-import { UeProfileDetailsPageviewEventModel, UeProfileDetailsPageviewModel } from "../../entities.js";
+import type { UeProfileDetailsPageviewEventModel, UeProfileDetailsPageviewModel } from '../../entities.js';
 export type EventsByPageView = Record<number, Array<UeProfileDetailsPageviewEventModel>>;
 export type PageviewsById = Record<number, Array<UeProfileDetailsPageviewModel>>;

package/dist/profiles/collection/modal/profiles-collection-filter-modal.element.d.ts

@@ -1,6 +1,6 @@
-import { UmbModalBaseElement } from "@umbraco-cms/backoffice/modal";
-import type { UmbPropertyValueData } from "@umbraco-cms/backoffice/property";
 import type { UeProfilesCollectionFilterModalData, UeProfilesCollectionFilterModalResult } from "./profiles-collection-filter-modal.token.js";
+import type { UmbPropertyValueData } from "@umbraco-cms/backoffice/property";
+import { UmbModalBaseElement } from "@umbraco-cms/backoffice/modal";
 declare const elementName = "ue-profiles-collection-filter-modal";
 export declare class UeProfilesCollectionFilterModalElement extends UmbModalBaseElement<UeProfilesCollectionFilterModalData, UeProfilesCollectionFilterModalResult> {
     #private;

package/dist/profiles/collection/modal/profiles-collection-filter-modal.element.js

@@ -4,10 +4,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, html, state, } from "@umbraco-cms/backoffice/external/lit";
-import { UmbModalBaseElement } from "@umbraco-cms/backoffice/modal";
 import { ENGAGE_PROFILES_COLLECTION_CONTEXT } from "../profiles-collection.context-token.js";
 import { ProfilesCollectionModalFilterProperties } from "./entities.js";
+import { UmbModalBaseElement } from "@umbraco-cms/backoffice/modal";
+import { customElement, html, state, } from "@umbraco-cms/backoffice/external/lit";
 import { UePropertyDataSetRendererController } from "../../../core/index.js";
 const elementName = "ue-profiles-collection-filter-modal";
 let UeProfilesCollectionFilterModalElement = class UeProfilesCollectionFilterModalElement extends UmbModalBaseElement {

package/dist/profiles/collection/modal/profiles-collection-filter-modal.token.d.ts

@@ -1,5 +1,5 @@
-import { UmbModalToken } from "@umbraco-cms/backoffice/modal";
 import type { UeProfilesCollectionFilterModel } from "../entities.js";
+import { UmbModalToken } from "@umbraco-cms/backoffice/modal";
 export declare const ENGAGE_PROFILES_COLLECTION_FILTER_MODAL_ALIAS = "Engage.Modal.ProfilesCollectionFilter";
 export interface UeProfilesCollectionFilterModalData {
 }

package/dist/profiles/collection/profiles-collection-header.element.d.ts

@@ -1,5 +1,5 @@
-import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
 import { ENGAGE_PROFILES_COLLECTION_CONTEXT } from "./profiles-collection.context-token.js";
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
 declare const elementName = "ue-profiles-collection-header";
 export declare class UeProfilesCollectionHeaderElement extends UmbLitElement {
     #private;

package/dist/profiles/collection/profiles-collection-header.element.js

@@ -4,11 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+import { ENGAGE_PROFILES_COLLECTION_CONTEXT } from "./profiles-collection.context-token.js";
+import { ENGAGE_PROFILES_COLLECTION_FILTER_MODAL } from "./modal/index.js";
 import { css, customElement, html, state, } from "@umbraco-cms/backoffice/external/lit";
 import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
 import { umbOpenModal } from "@umbraco-cms/backoffice/modal";
-import { ENGAGE_PROFILES_COLLECTION_CONTEXT } from "./profiles-collection.context-token.js";
-import { ENGAGE_PROFILES_COLLECTION_FILTER_MODAL } from "./modal/index.js";
 const elementName = "ue-profiles-collection-header";
 let UeProfilesCollectionHeaderElement = class UeProfilesCollectionHeaderElement extends UmbLitElement {
     constructor() {

package/dist/profiles/collection/profiles-collection.context-token.d.ts

@@ -1,3 +1,3 @@
-import { UmbContextToken } from "@umbraco-cms/backoffice/context-api";
 import type { UeProfilesCollectionContext } from "./profiles-collection.context.js";
+import { UmbContextToken } from "@umbraco-cms/backoffice/context-api";
 export declare const ENGAGE_PROFILES_COLLECTION_CONTEXT: UmbContextToken<UeProfilesCollectionContext, UeProfilesCollectionContext>;

package/dist/profiles/collection/views/manifests.js

@@ -1,5 +1,5 @@
-import { UMB_COLLECTION_ALIAS_CONDITION, } from "@umbraco-cms/backoffice/collection";
 import { ENGAGE_PROFILES_COLLECTION_ALIAS } from "../constants.js";
+import { UMB_COLLECTION_ALIAS_CONDITION, } from "@umbraco-cms/backoffice/collection";
 export const manifests = [
     {
         type: "collectionView",

package/dist/profiles/collection/views/table/elements/profiles-table-type-column-layout.element.d.ts

@@ -1,5 +1,5 @@
-import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
 import type { UeProfilesCollectionModel } from "../../../entities.js";
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
 declare const elementName = "ue-profiles-table-type-column-layout";
 export declare class UeProfilesTableNameColumnLayoutElement extends UmbLitElement {
     #private;

package/dist/profiles/collection/views/table/profiles-table-collection-view.element.js

@@ -4,9 +4,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+import { ENGAGE_PROFILES_COLLECTION_CONTEXT } from "../../profiles-collection.context-token.js";
 import { css, customElement, html, state, when, } from "@umbraco-cms/backoffice/external/lit";
 import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
-import { ENGAGE_PROFILES_COLLECTION_CONTEXT } from "../../profiles-collection.context-token.js";
 import { UeTimeFormatOptionsMedium } from "../../../../core/index.js";
 import "./elements/profiles-table-type-column-layout.element.js";
 const elementName = "ue-profiles-table";
@@ -133,6 +133,7 @@ let UeProfilesTableElement = class UeProfilesTableElement extends UmbLitElement
                   style="display:flex; justify-self: flex-end;"
                   compact
                   .label=${this.localize.term("engage_showProfile")}
+                  data-mark="show-profile-button:${profile.visitorId}"
                 ></uui-button>
               </div>
             `,
@@ -155,8 +156,8 @@ let UeProfilesTableElement = class UeProfilesTableElement extends UmbLitElement
           @deselected=${this.#onDeselect}
         ></umb-table>
       `, () => html `<div class="flex">
-        ${this.localize.term("content_noItemsToShow")}
-      </div>`);
+          ${this.localize.term("content_noItemsToShow")}
+        </div>`);
     }
     render() {
         return when(this._loading, () => html `<uui-loader-bar></uui-loader-bar>`, () => this.#renderTable());

package/dist/profiles/details/components/member-profile/member-and-profile.element.js

@@ -4,6 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+import { ENGAGE_PROFILE_DETAILS_WORKSPACE_CONTEXT } from "../../workspace/profile-details-workspace-context-token.js";
 import { css, customElement, html, property, state, when, } from "@umbraco-cms/backoffice/external/lit";
 import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
 import { UMB_MEMBER_ENTITY_TYPE } from "@umbraco-cms/backoffice/member";
@@ -12,7 +13,6 @@ import { UmbModalRouteRegistrationController } from "@umbraco-cms/backoffice/rou
 import { UMB_WORKSPACE_MODAL } from "@umbraco-cms/backoffice/workspace";
 import { UeTimeFormatOptionsShort } from "../../../../core/index.js";
 import { ProfileService, } from "../../../../generated/index.js";
-import { ENGAGE_PROFILE_DETAILS_WORKSPACE_CONTEXT } from "../../workspace/profile-details-workspace-context-token.js";
 const elementName = "ue-profile-detail-member-and-profile";
 let UeProfileDetailsMemberAndProfileElement = class UeProfileDetailsMemberAndProfileElement extends UmbLitElement {
     /**
@@ -52,8 +52,6 @@ let UeProfileDetailsMemberAndProfileElement = class UeProfileDetailsMemberAndPro
             if (!context)
                 return;
             this.observe(context.profileDetail, (profileDetail) => {
-                if (!profileDetail)
-                    return;
                 this._profileDetail = profileDetail;
                 this._loading = false;
             });
@@ -119,13 +117,12 @@ let UeProfileDetailsMemberAndProfileElement = class UeProfileDetailsMemberAndPro
     }
     toDateTime(secs) {
         if (!secs)
-            return "0:00:00";
+            return "00:00:00";
         const hours = Math.floor(secs / 3600);
         const minutes = Math.floor((secs % 3600) / 60);
         const seconds = Math.floor(secs % 60);
-        return `${hours}:${minutes.toString().padStart(2, "0")}:${seconds
-            .toString()
-            .padStart(2, "0")}`;
+        const asString = (v) => v.toString().padStart(2, "0");
+        return `${asString(hours)}:${asString(minutes)}:${asString(seconds)}`;
     }
     #openMember(unique) {
         if (!unique) {
@@ -158,12 +155,12 @@ let UeProfileDetailsMemberAndProfileElement = class UeProfileDetailsMemberAndPro
     ${this._profileDetail?.members
             ?.filter((x) => x.name && x.unique)
             .map((member) => html `<uui-ref-list>
-          <uui-ref-node-member
-            @open=${() => this.#openMember(member.unique)}
-            .name=${member.name}
-            .detail=${this.localize.term("engage_lastLogin", member.lastLoginDate ?? this.localize.term("engage_never"))}
-          ></uui-ref-node-member>
-        </uui-ref-list> `)}
+            <uui-ref-node-member
+              @open=${() => this.#openMember(member.unique)}
+              .name=${member.name}
+              .detail=${this.localize.term("engage_lastLogin", member.lastLoginDate ?? this.localize.term("engage_never"))}
+            ></uui-ref-node-member>
+          </uui-ref-list> `)}
     ${this._relatedProfiles?.map((relatedProfile) => html `
         <ue-profile-detail-related-profile
           .profile=${relatedProfile}

package/dist/profiles/details/components/related-profile/related-profile.element.js

@@ -4,11 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+import { PROFILE_ENTITY_TYPE } from "../../../constants.js";
 import { css, customElement, html, property, state, } from "@umbraco-cms/backoffice/external/lit";
 import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
 import { UmbModalRouteRegistrationController } from "@umbraco-cms/backoffice/router";
 import { UMB_WORKSPACE_MODAL } from "@umbraco-cms/backoffice/workspace";
-import { PROFILE_ENTITY_TYPE } from "../../../constants.js";
 import { UeTimeFormatOptionsShort } from "../../../../core/index.js";
 const elementName = "ue-profile-detail-related-profile";
 let UeProfileDetailsRelatedProfileElement = class UeProfileDetailsRelatedProfileElement extends UmbLitElement {

package/dist/profiles/details/workspace/conditions/external-package-installed.condition.js

@@ -1,5 +1,5 @@
-import { UmbConditionBase, umbExtensionsRegistry, } from "@umbraco-cms/backoffice/extension-registry";
 import { ENGAGE_EXTERNAL_DATA_EXTENSION_TYPE } from "../../components/index.js";
+import { UmbConditionBase, umbExtensionsRegistry, } from "@umbraco-cms/backoffice/extension-registry";
 export class UeIsExternalDataPackageInstalledCondition extends UmbConditionBase {
     constructor(host, args) {
         super(host, args);

package/dist/profiles/details/workspace/profile-details-workspace-context-token.d.ts

@@ -1,3 +1,3 @@
-import { UmbContextToken } from "@umbraco-cms/backoffice/context-api";
 import type { UeProfileDetailsWorkspaceContext } from "./profile-details-workspace.context.js";
+import { UmbContextToken } from "@umbraco-cms/backoffice/context-api";
 export declare const ENGAGE_PROFILE_DETAILS_WORKSPACE_CONTEXT: UmbContextToken<UeProfileDetailsWorkspaceContext, UeProfileDetailsWorkspaceContext>;

package/dist/profiles/details/workspace/views/activity/profile-details-activity.workspace-view.element.js

@@ -4,9 +4,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+import { ENGAGE_PROFILE_DETAILS_WORKSPACE_CONTEXT } from "../../profile-details-workspace-context-token.js";
 import { customElement, html, state, } from "@umbraco-cms/backoffice/external/lit";
 import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
-import { ENGAGE_PROFILE_DETAILS_WORKSPACE_CONTEXT } from "../../profile-details-workspace-context-token.js";
 const element = "ue-profile-details-activity";
 let UeProfileDetailsActivityWorkspaceElement = class UeProfileDetailsActivityWorkspaceElement extends UmbLitElement {
     constructor() {

package/dist/profiles/details/workspace/views/external-data/external-data.workspace-view.element.js

@@ -4,11 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+import { ENGAGE_EXTERNAL_DATA_EXTENSION_TYPE } from "../../../components/index.js";
 import { css, customElement, html, state, } from "@umbraco-cms/backoffice/external/lit";
 import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
 import { umbExtensionsRegistry } from "@umbraco-cms/backoffice/extension-registry";
 import { createExtensionElement } from "@umbraco-cms/backoffice/extension-api";
-import { ENGAGE_EXTERNAL_DATA_EXTENSION_TYPE } from "../../../components/index.js";
 const element = "ue-profile-details-external-data";
 let UeProfileDetailsExternalDataWorkspaceElement = class UeProfileDetailsExternalDataWorkspaceElement extends UmbLitElement {
     constructor() {

package/dist/profiles/details/workspace/views/insights/profile-details-insight.workspace-view.element.js

@@ -4,12 +4,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+import { ENGAGE_PROFILE_INSIGHT_EXTENSION_TYPE, } from "../../../../insights/index.js";
+import { ENGAGE_PROFILE_DETAILS_WORKSPACE_CONTEXT } from "../../profile-details-workspace-context-token.js";
 import { createExtensionElement } from "@umbraco-cms/backoffice/extension-api";
 import { umbExtensionsRegistry } from "@umbraco-cms/backoffice/extension-registry";
 import { css, customElement, html, state, styleMap, } from "@umbraco-cms/backoffice/external/lit";
 import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
-import { ENGAGE_PROFILE_INSIGHT_EXTENSION_TYPE, } from "../../../../insights/index.js";
-import { ENGAGE_PROFILE_DETAILS_WORKSPACE_CONTEXT } from "../../profile-details-workspace-context-token.js";
 const element = "ue-profile-details-insights";
 let UeProfileDetailsInsightsWorkspaceElement = class UeProfileDetailsInsightsWorkspaceElement extends UmbLitElement {
     constructor() {

package/dist/profiles/insights/campaigns/campaigns-list.element.js

@@ -4,11 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+import { UeProfileInsightElement } from "../engage-profile-insight.interface.js";
 import { customElement, html, state, when, } from "@umbraco-cms/backoffice/external/lit";
 import { tryExecute } from "@umbraco-cms/backoffice/resources";
-import { UeProfileInsightElement } from "../engage-profile-insight.interface.js";
-import { CampaignsService, } from "../../../generated/index.js";
 import { UmbId } from "@umbraco-cms/backoffice/id";
+import { CampaignsService, } from "../../../generated/index.js";
 const elementName = "ue-profile-detail-campaigns";
 let UeProfileDetailsCampaignsElement = class UeProfileDetailsCampaignsElement extends UeProfileInsightElement {
     constructor() {

package/dist/profiles/insights/customer-journeys/customer-journeys.element.d.ts

@@ -1,11 +1,12 @@
-import { UeProfileInsightElement } from "../engage-profile-insight.interface.js";
+import { UeProfileDetailsInsightExplicitScoringBaseElement } from "../profile-insight-explicit-scoring-base.element.js";
+import { UeCustomerJourneyDetailModel } from "../../../personalization/entities.js";
 declare const elementName = "ue-profile-detail-customer-journeys";
-export declare class UeProfileDetailsCustomerJourneysElement extends UeProfileInsightElement {
+export declare class UeProfileDetailsCustomerJourneysElement extends UeProfileDetailsInsightExplicitScoringBaseElement<UeCustomerJourneyDetailModel> {
     #private;
     private customerJourneyScore;
+    constructor();
     connectedCallback(): Promise<void>;
     renderInsight(): import("lit-html").TemplateResult<1>;
-    static styles: import("lit").CSSResult;
 }
 export default UeProfileDetailsCustomerJourneysElement;
 declare global {

package/dist/profiles/insights/customer-journeys/customer-journeys.element.js

@@ -4,14 +4,19 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { UeProfileInsightElement } from "../engage-profile-insight.interface.js";
-import { css, customElement, html, state, } from "@umbraco-cms/backoffice/external/lit";
+import { customElement, html, state, } from "@umbraco-cms/backoffice/external/lit";
 import { tryExecute } from "@umbraco-cms/backoffice/resources";
-import { ProfileService, } from "../../../generated/index.js";
+import { CustomerJourneyService, ProfileService, } from "../../../generated/index.js";
+import { UeProfileDetailsInsightExplicitScoringBaseElement } from "../profile-insight-explicit-scoring-base.element.js";
+import { UeCustomerJourneyDetailRepository } from "../../../personalization/index.js";
 const elementName = "ue-profile-detail-customer-journeys";
-let UeProfileDetailsCustomerJourneysElement = class UeProfileDetailsCustomerJourneysElement extends UeProfileInsightElement {
+let UeProfileDetailsCustomerJourneysElement = class UeProfileDetailsCustomerJourneysElement extends UeProfileDetailsInsightExplicitScoringBaseElement {
     constructor() {
-        super(...arguments);
+        super({
+            lockFn: CustomerJourneyService.postCustomerJourneyLock,
+            unlockFn: CustomerJourneyService.postCustomerJourneyUnlock,
+            repositoryCtor: UeCustomerJourneyDetailRepository,
+        });
         this.customerJourneyScore = [];
     }
     async connectedCallback() {
@@ -23,22 +28,14 @@ let UeProfileDetailsCustomerJourneysElement = class UeProfileDetailsCustomerJour
         const { data } = await tryExecute(this, ProfileService.getProfileCustomerJourneyStepScores({
             query: { visitorId: this.profileId },
         }));
-        if (data) {
-            this.customerJourneyScore = data;
-        }
+        this.customerJourneyScore = data;
     }
     #renderCustomerJourneyGroups() {
         return html `
       <ue-customer-journey-scoring
         readonly
-        .config=${{ hideDivider: true }}
-        .value=${this.customerJourneyScore?.map((p) => ({
-            entityId: p.customerJourneyStepId,
-            score: p.score,
-            unique: "",
-            id: 0,
-            isActive: p.isActive,
-        })) ?? []}
+        @lock-change=${this.onLockChange}
+        .value=${this.customerJourneyScore}
       >
       </ue-customer-journey-scoring>
     `;
@@ -46,15 +43,6 @@ let UeProfileDetailsCustomerJourneysElement = class UeProfileDetailsCustomerJour
     renderInsight() {
         return this.#renderCustomerJourneyGroups();
     }
-    static { this.styles = css `
-    ue-customer-journey-scoring {
-      --group-gap: 0;
-
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr;
-      gap: var(--uui-size-space-6);
-    }
-  `; }
 };
 __decorate([
     state()

package/dist/profiles/insights/engage-profile-insight.interface.d.ts

@@ -1,7 +1,7 @@
+import type { ENGAGE_PROFILE_INSIGHT_EXTENSION_TYPE } from "./constants.js";
 import type { ManifestElement } from "@umbraco-cms/backoffice/extension-api";
-import { TemplateResult } from "@umbraco-cms/backoffice/external/lit";
+import { type TemplateResult } from "@umbraco-cms/backoffice/external/lit";
 import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
-import { ENGAGE_PROFILE_INSIGHT_EXTENSION_TYPE } from "./constants.js";
 export declare abstract class UeProfileInsightElement extends UmbLitElement {
     protected _profileId?: number;
     set profileId(value: number | undefined);

package/dist/profiles/insights/goals/goals-table-collection-view.element.d.ts

@@ -7,6 +7,7 @@ export declare class UeProfileDetailGoalsTableElement extends UeProfileInsightEl
     private _tableItems;
     connectedCallback(): Promise<void>;
     renderInsight(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
 }
 export default UeProfileDetailGoalsTableElement;
 declare global {

package/dist/profiles/insights/goals/goals-table-collection-view.element.js

@@ -4,9 +4,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, html, state, when, } from "@umbraco-cms/backoffice/external/lit";
-import { tryExecute } from "@umbraco-cms/backoffice/resources";
 import { UeProfileInsightElement } from "../engage-profile-insight.interface.js";
+import { css, customElement, html, state, when, } from "@umbraco-cms/backoffice/external/lit";
+import { tryExecute } from "@umbraco-cms/backoffice/resources";
 import { GoalService, ProfileService, } from "../../../generated/index.js";
 const elementName = "ue-profile-detail-goals-table";
 let UeProfileDetailGoalsTableElement = class UeProfileDetailGoalsTableElement extends UeProfileInsightElement {
@@ -105,6 +105,13 @@ let UeProfileDetailGoalsTableElement = class UeProfileDetailGoalsTableElement ex
     renderInsight() {
         return this.#renderTable();
     }
+    static { this.styles = [
+        css `
+      :host {
+        --uui-shadow-depth-1: 0;
+      }
+    `,
+    ]; }
 };
 __decorate([
     state()

package/dist/profiles/insights/persona-groups/persona-groups.element.d.ts

@@ -1,11 +1,12 @@
-import { UeProfileInsightElement } from "../engage-profile-insight.interface.js";
+import { UeProfileDetailsInsightExplicitScoringBaseElement } from "../profile-insight-explicit-scoring-base.element.js";
+import { UePersonaGroupDetailModel } from "../../../personalization/entities.js";
 declare const elementName = "ue-profile-detail-persona-groups";
-export declare class UeProfileDetailsPersonaGroupsElement extends UeProfileInsightElement {
+export declare class UeProfileDetailsPersonaGroupsElement extends UeProfileDetailsInsightExplicitScoringBaseElement<UePersonaGroupDetailModel> {
     #private;
     private personaScores;
+    constructor();
     connectedCallback(): Promise<void>;
     renderInsight(): import("lit-html").TemplateResult<1>;
-    static styles: import("lit").CSSResult;
 }
 export default UeProfileDetailsPersonaGroupsElement;
 declare global {

package/dist/profiles/insights/persona-groups/persona-groups.element.js

@@ -4,14 +4,19 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { UeProfileInsightElement } from "../engage-profile-insight.interface.js";
-import { css, customElement, html, state, } from "@umbraco-cms/backoffice/external/lit";
+import { customElement, html, state, } from "@umbraco-cms/backoffice/external/lit";
 import { tryExecute } from "@umbraco-cms/backoffice/resources";
-import { ProfileService, } from "../../../generated/index.js";
+import { PersonaService, ProfileService, } from "../../../generated/index.js";
+import { UeProfileDetailsInsightExplicitScoringBaseElement } from "../profile-insight-explicit-scoring-base.element.js";
+import { UePersonaGroupDetailRepository } from "../../../personalization/personas/index.js";
 const elementName = "ue-profile-detail-persona-groups";
-let UeProfileDetailsPersonaGroupsElement = class UeProfileDetailsPersonaGroupsElement extends UeProfileInsightElement {
+let UeProfileDetailsPersonaGroupsElement = class UeProfileDetailsPersonaGroupsElement extends UeProfileDetailsInsightExplicitScoringBaseElement {
     constructor() {
-        super(...arguments);
+        super({
+            lockFn: PersonaService.postPersonaLock,
+            unlockFn: PersonaService.postPersonaUnlock,
+            repositoryCtor: UePersonaGroupDetailRepository,
+        });
         this.personaScores = [];
     }
     async connectedCallback() {
@@ -23,22 +28,14 @@ let UeProfileDetailsPersonaGroupsElement = class UeProfileDetailsPersonaGroupsEl
         const { data } = await tryExecute(this, ProfileService.getProfilePersonaScores({
             query: { visitorId: this.profileId },
         }));
-        if (data) {
-            this.personaScores = data;
-        }
+        this.personaScores = data;
     }
     #renderPersonaGroups() {
         return html `
       <ue-persona-group-scoring
         readonly
-        .config=${{ hideDivider: true }}
-        .value=${this.personaScores?.map((p) => ({
-            entityId: p.personaId,
-            score: p.score,
-            unique: "",
-            id: 0,
-            isActive: p.isActive,
-        })) ?? []}
+        @lock-change=${this.onLockChange}
+        .value=${this.personaScores}
       >
       </ue-persona-group-scoring>
     `;
@@ -46,15 +43,6 @@ let UeProfileDetailsPersonaGroupsElement = class UeProfileDetailsPersonaGroupsEl
     renderInsight() {
         return this.#renderPersonaGroups();
     }
-    static { this.styles = css `
-    ue-persona-group-scoring {
-      --group-gap: 0;
-
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr;
-      gap: var(--uui-size-space-6);
-    }
-  `; }
 };
 __decorate([
     state()

package/dist/profiles/insights/potential/potential.css.js

@@ -46,6 +46,11 @@ export const ProfilePotientialStyles = css `
     transform: rotate(90deg);
   }
 
+  #item::before {
+    transform: translateX(-50%);
+    left: 50%;
+  }
+
   #ring-holder {
     display: flex;
     align-items: center;

package/dist/profiles/insights/profile-insight-explicit-scoring-base.element.d.ts

@@ -0,0 +1,17 @@
+import { UeProfileInsightElement } from "./engage-profile-insight.interface.js";
+import { UeDetailRepository, UeDetailRepositoryConstructor, UeEntityScoreModel } from "../../core/index.js";
+export declare abstract class UeProfileDetailsInsightExplicitScoringBaseElement<GroupModel> extends UeProfileInsightElement {
+    #private;
+    protected repository: UeDetailRepository<GroupModel>;
+    protected items: GroupModel[];
+    constructor(args: {
+        lockFn: Function;
+        unlockFn: Function;
+        repositoryCtor: UeDetailRepositoryConstructor<GroupModel>;
+    });
+    connectedCallback(): Promise<void>;
+    protected onLockChange(e: CustomEvent & {
+        detail: UeEntityScoreModel;
+    }): Promise<void>;
+    static styles: import("lit").CSSResult;
+}

package/dist/profiles/insights/profile-insight-explicit-scoring-base.element.js

@@ -0,0 +1,76 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { tryExecute } from "@umbraco-cms/backoffice/resources";
+import { UeProfileInsightElement } from "./engage-profile-insight.interface.js";
+import { css, state } from "@umbraco-cms/backoffice/external/lit";
+export class UeProfileDetailsInsightExplicitScoringBaseElement extends UeProfileInsightElement {
+    #unlockFn;
+    #lockFn;
+    constructor(args) {
+        super();
+        this.items = [];
+        this.#lockFn = args.lockFn;
+        this.#unlockFn = args.unlockFn;
+        this.repository = new args.repositoryCtor(this);
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        const { data } = await this.repository.requestAll();
+        this.items = data ?? [];
+    }
+    async onLockChange(e) {
+        if (!this.profileId)
+            return;
+        const body = {
+            entityId: e.detail.entityId,
+            visitorId: this.profileId,
+        };
+        if (e.detail.isLocked) {
+            await tryExecute(this, this.#lockFn({
+                body,
+            }));
+            return;
+        }
+        await tryExecute(this, this.#unlockFn({
+            body,
+        }));
+    }
+    static { this.styles = css `
+    :host {
+      --group-gap: 0;
+
+      container-type: inline-size;
+      display: block;
+    }
+
+    ue-customer-journey-scoring,
+    ue-persona-group-scoring {
+      --column-count: 1;
+
+      display: grid;
+      grid-template-columns: repeat(var(--column-count), minmax(0, 1fr));
+      gap: var(--uui-size-space-6);
+    }
+
+    @container (width > 600px) {
+      ue-customer-journey-scoring,
+      ue-persona-group-scoring {
+        --column-count: 2;
+      }
+    }
+
+    @container (width > 900px) {
+      ue-customer-journey-scoring,
+      ue-persona-group-scoring {
+        --column-count: 3;
+      }
+    }
+  `; }
+}
+__decorate([
+    state()
+], UeProfileDetailsInsightExplicitScoringBaseElement.prototype, "items", void 0);