@umbraco-engage/backoffice 17.0.0-rc1

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

@@ -0,0 +1,336 @@
+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 { 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 { partialUpdateFrozenArray } from "@umbraco-cms/backoffice/observable-api";
+const elementName = "ue-profile-detail-activity-pageviews";
+let UeProfileDetailsActivityPageviewsElement = class UeProfileDetailsActivityPageviewsElement extends UeProfileActivityBaseElement {
+    constructor() {
+        super(...arguments);
+        this.pageviews = [];
+        this._wasPersonalizedOrAbTested = false;
+        this.eventsByPageviewId = {};
+    }
+    #session;
+    set session(value) {
+        if (!value)
+            return;
+        this.#session = value;
+        this._wasPersonalizedOrAbTested =
+            value.wasPersonalized || value.wasAbTested;
+    }
+    get session() {
+        return this.#session;
+    }
+    async #getEventsByPageviewId(pageviewId) {
+        const { data } = await tryExecute(this, ProfileService.getProfilePageEvents({
+            query: { pageviewId },
+        }));
+        if (data) {
+            // Create a new object reference to trigger reactivity
+            this.eventsByPageviewId = {
+                ...this.eventsByPageviewId,
+                [pageviewId]: data.map((d) => ({
+                    ...d,
+                    eventInfoVisible: false,
+                })),
+            };
+        }
+    }
+    hasPageviews() {
+        return this.pageviews.length > 0;
+    }
+    async openEventRow(pageview) {
+        // Toggle the visibility
+        pageview = { ...pageview, eventInfoVisible: !pageview.eventInfoVisible };
+        const toggle = () => (this.pageviews = partialUpdateFrozenArray(this.pageviews, pageview, (p) => p.id === pageview.id));
+        // Closing row, do not fetch events
+        // Reassigning pageviewId to trigger reactivity
+        if (!pageview.eventInfoVisible) {
+            toggle();
+            return;
+        }
+        // Fetch events if not already loaded
+        if (!this.eventsByPageviewId[pageview.id]) {
+            await this.#getEventsByPageviewId(pageview.id);
+        }
+        // Force re-render by creating a new array reference so Lit detects the change
+        toggle();
+    }
+    personalizedClass(className) {
+        return this._wasPersonalizedOrAbTested ? className : "";
+    }
+    renderIcon(pageview) {
+        return html `
+      ${when(pageview.abTests.length > 0, () => html ` <uui-icon name="icon-ab-testing"></uui-icon> `)}
+      ${when(pageview.appliedPersonalizationName, () => html ` <uui-icon name="icon-personalization"></uui-icon> `)}
+    `;
+    }
+    #renderNoPageviews() {
+        return html `<tbody>
+      <tr>
+        <td class=" profile-table-type-holder">
+          <ue-profile-line-item
+            active
+            ?activeBefore=${this._wasPersonalizedOrAbTested}
+            ?activeAfter=${this._wasPersonalizedOrAbTested}
+          >
+          </ue-profile-line-item>
+
+          <span class="profile-type-holder">
+            <ue-profile-type-indicator
+              ?active=${this._wasPersonalizedOrAbTested}
+            ></ue-profile-type-indicator>
+          </span>
+        </td>
+        <td colspan="12">Loading ...</td>
+      </tr>
+    </tbody>`;
+    }
+    #renderPageviews() {
+        return html `
+      ${this.pageviews.map((pageview) => html `
+          <tbody>
+            <tr
+              class="toggle"
+              @click=${async () => await this.openEventRow(pageview)}
+            >
+              <td class=" profile-table-type-holder">
+                <ue-profile-line-item
+                  active
+                  ?activeBefore=${this._wasPersonalizedOrAbTested}
+                  ?activeAfter=${this._wasPersonalizedOrAbTested}
+                >
+                </ue-profile-line-item>
+
+                <span class="profile-type-holder">
+                  ${when(this._wasPersonalizedOrAbTested, () => html `<ue-profile-type-indicator active
+                        >${this.renderIcon(pageview)}</ue-profile-type-indicator
+                      >`, () => html `<ue-profile-type-indicator
+                        ?icon=${pageview.abTests.length > 0 ||
+            !!pageview.appliedPersonalizationName}
+                        >${this.renderIcon(pageview)}</ue-profile-type-indicator
+                      >`)}
+                </span>
+              </td>
+              <td>
+                ${this.localize.date(pageview.date, {
+            timeStyle: "short",
+        })}
+              </td>
+              <td colspan="3">
+                <span popovertarget="pageurlTooltip">
+                  ${this.renderSlicedUrl(pageview.url)}
+                  ${this.renderUrlToolipAndButton("pageurlTooltip", "engage_analytics_pageUrl", "icon-out", pageview.url)}
+                </span>
+              </td>
+              <td>${this.toDateTime(pageview.timeOnPageInSeconds)}</td>
+              <td>${this.toDateTime(pageview.engagedTimeInSeconds)}</td>
+              <td colspan="2">
+                ${pageview?.scrollDepth
+            ? `${(pageview.scrollDepth * 100).toFixed(2)}%`
+            : "-"}
+              </td>
+              <td>${pageview.goalCompletions}</td>
+              <td>${pageview.events}</td>
+              <td colspan="2">
+                ${when(pageview.abTests.length === 0 &&
+            !pageview.appliedPersonalizationName, () => html ` - `)}
+                <div>
+                  ${pageview.abTests?.map((abTest) => html `
+                      <span class="flex align-center">
+                        <uui-icon name="icon-ab-testing"></uui-icon>
+                        ${when(pageview.abTests.length > 1, () => html ` <span style="opacity: 0.5"> & </span> `)}
+                        ${abTest.name}
+                      </span>
+                    `)}
+                  ${when(pageview.appliedPersonalizationName, () => html `
+                      <span
+                        popovertarget="controlGroupPartTooltip"
+                        style="'text-decoration': ${pageview.isInControlGroup
+            ? "line-through"
+            : "inherit"}"
+                      >
+                        <uui-icon
+                          name="icon-personalization"
+                          style="margin-right:var(--uui-size-2)"
+                        ></uui-icon>
+                        ${pageview.appliedPersonalizationName}
+                        ${when(pageview.isInControlGroup, () => html `
+                            <uui-popover-container id="controlGroupPartTooltip">
+                              <ue-tooltip hint
+                                >${this.localize.term("engage_profile_details_controlGroupPart")}</ue-tooltip
+                              >
+                            </uui-popover-container>
+                          `)}
+                      </span>
+                    `)}
+                </div>
+              </td>
+              <td>
+                <uui-icon
+                  class="expand"
+                  name=${`icon-circle-arrow-${pageview.eventInfoVisible ? "up" : "down"}`}
+                ></uui-icon>
+              </td>
+            </tr>
+            ${when(pageview.eventInfoVisible, () => html `
+                <tr>
+                  <td colspan="14" class="nested-parent">
+                    <ue-profile-activity-table-events
+                      .session=${this.session}
+                      .pageview=${pageview}
+                      .events=${this.eventsByPageviewId[pageview.id]}
+                    ></ue-profile-activity-table-events>
+                  </td>
+                </tr>
+              `)}
+          </tbody>
+        `)}
+    `;
+    }
+    render() {
+        return html `
+      <table>
+        <thead>
+          <tr>
+            <th class="profile-table-type-holder">
+              <ue-profile-line-item
+                active
+                ?activeAfter=${this._wasPersonalizedOrAbTested}
+                ?activeBefore=${this._wasPersonalizedOrAbTested}
+              ></ue-profile-line-item>
+            </th>
+            <th>
+              <ue-label labelKey="engage_profile_details_time"> </ue-label>
+            </th>
+            <th colspan="3">
+              <ue-label labelKey="engage_profile_details_page"> </ue-label>
+            </th>
+            <th>
+              <ue-label labelKey="engage_profile_details_timeOnPage">
+              </ue-label>
+            </th>
+            <th>
+              <ue-label labelKey="engage_profile_details_engagedTime">
+              </ue-label>
+            </th>
+            <th colspan="2">
+              <ue-label labelKey="engage_profile_details_scrollDepth">
+              </ue-label>
+            </th>
+            <th>
+              <ue-label labelKey="engage_profile_details_goals"> </ue-label>
+            </th>
+            <th>
+              <ue-label labelKey="engage_profile_details_events"> </ue-label>
+            </th>
+            <th colspan="3">
+              <ue-label labelKey="engage_profile_details_variant"> </ue-label>
+            </th>
+          </tr>
+        </thead>
+
+        ${when(!this.hasPageviews(), () => this.#renderNoPageviews(), () => this.#renderPageviews())}
+
+        <tfoot>
+          ${when(this.session?.operatingSystemName ||
+            this.session?.browserName ||
+            this.session?.browserVersion, () => html `
+              <tr class="specs">
+                <td class="profile-table-type-holder">
+                  <ue-profile-line-item
+                    active
+                    corner
+                    ?activeBefore=${this._wasPersonalizedOrAbTested}
+                    ?activeAfter=${this._wasPersonalizedOrAbTested}
+                  >
+                  </ue-profile-line-item>
+                </td>
+                <td colspan="14">
+                  <ue-profile-session-specs
+                    .session=${this.session}
+                    .ipAddress=${this.pageviews.at(0)?.ipAddress ?? undefined}
+                  ></ue-profile-session-specs>
+                </td>
+              </tr>
+            `)}
+        </tfoot>
+      </table>
+    `;
+    }
+    static { this.styles = [
+        UeTableStyles,
+        css `
+      th {
+        padding-top: var(--uui-size-2);
+        padding-bottom: 0;
+      }
+
+      td {
+        background: #eeeef080;
+        border-top: 3px solid white;
+      }
+
+      tbody:first-child tr:first-child td {
+        border-top-width: 0;
+      }
+
+      td:first-child::before,
+      td:last-child::before {
+        content: "";
+        background: white;
+        position: absolute;
+        top: 0;
+        width: 18px;
+        bottom: 0;
+      }
+
+      td:first-child::before {
+        left: 0;
+      }
+
+      td:last-child::before {
+        right: 0;
+      }
+
+      .specs > td {
+        border: none;
+        background: white;
+      }
+
+      .toggle {
+        cursor: pointer;
+      }
+
+      [popovertarget] {
+        display: flex;
+        align-items: center;
+      }
+    `,
+    ]; }
+};
+__decorate([
+    property({ type: Array })
+], UeProfileDetailsActivityPageviewsElement.prototype, "pageviews", void 0);
+__decorate([
+    property({ type: Object })
+], UeProfileDetailsActivityPageviewsElement.prototype, "session", null);
+__decorate([
+    state()
+], UeProfileDetailsActivityPageviewsElement.prototype, "_wasPersonalizedOrAbTested", void 0);
+__decorate([
+    state()
+], UeProfileDetailsActivityPageviewsElement.prototype, "eventsByPageviewId", void 0);
+UeProfileDetailsActivityPageviewsElement = __decorate([
+    customElement(elementName)
+], UeProfileDetailsActivityPageviewsElement);
+export { UeProfileDetailsActivityPageviewsElement };
+export default UeProfileDetailsActivityPageviewsElement;

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

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

package/dist/profiles/activity-tracker/components/entities.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,5 @@
+export * from './activity-pageviews/activity-pageviews.element.js';
+export * from "./profile-type-indicator/profile-type-indicator.element.js";
+export * from "./profile-line-item/profile-line-item.element.js";
+export * from "./activity-events/activity-events.element.js";
+export * from "./session-specs/profile-session-specs.element.js";

package/dist/profiles/activity-tracker/components/index.js

@@ -0,0 +1,5 @@
+export * from './activity-pageviews/activity-pageviews.element.js';
+export * from "./profile-type-indicator/profile-type-indicator.element.js";
+export * from "./profile-line-item/profile-line-item.element.js";
+export * from "./activity-events/activity-events.element.js";
+export * from "./session-specs/profile-session-specs.element.js";

package/dist/profiles/activity-tracker/components/profile-line-item/profile-line-item.element.d.ts

@@ -0,0 +1,23 @@
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+declare const elementName = "ue-profile-line-item";
+export declare class UeProfileDetailsLineItemElement extends UmbLitElement {
+    activeBefore: boolean;
+    activeAfter: boolean;
+    active: boolean;
+    last: boolean;
+    inside: boolean;
+    dashedBefore: boolean;
+    dashedAfter: boolean;
+    rotated: boolean;
+    sessionActive: boolean;
+    bottom: boolean;
+    corner: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UeProfileDetailsLineItemElement;
+    }
+}
+export {};

package/dist/profiles/activity-tracker/components/profile-line-item/profile-line-item.element.js

@@ -0,0 +1,173 @@
+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 { customElement, property, html, css, } from "@umbraco-cms/backoffice/external/lit";
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+const elementName = "ue-profile-line-item";
+let UeProfileDetailsLineItemElement = class UeProfileDetailsLineItemElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        this.activeBefore = false;
+        this.activeAfter = false;
+        this.active = false;
+        this.last = false;
+        this.inside = false;
+        this.dashedBefore = false;
+        this.dashedAfter = false;
+        this.rotated = false;
+        this.sessionActive = false;
+        this.bottom = false;
+        this.corner = false;
+    }
+    render() {
+        return html ``;
+    }
+    static { this.styles = [
+        css `
+      :host {
+        --line-color: #d9d9da;
+
+        position: absolute !important;
+        top: auto;
+        bottom: 0;
+        height: 150%;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 1;
+        display: flex;
+        flex-direction: column;
+      }
+
+      :host([active])::after,
+      :host([active])::before {
+        content: "";
+        border-left: 4px solid var(--line-color);
+        flex: 1;
+      }
+
+      :host([last])::after,
+      :host([bottom])::before {
+        border-color: transparent;
+      }
+
+      :host([corner])::after {
+        transform: rotate(270deg);
+        transform-origin: top left;
+      }
+
+      :host([corner]) {
+        height: 200%;
+        top: -50%;
+      }
+
+      :host([inside]) {
+        left: auto;
+        right: 0;
+        top: -20px;
+      }
+
+      :host([rotated]) {
+        transform: rotate(-45deg);
+        transform-origin: bottom right;
+        height: 56px;
+        top: -45px;
+        right: 2px;
+      }
+
+      :host([rotated][sessionactive]):not([activebefore])::before {
+        border: 0;
+        background: linear-gradient(var(--engage-color-default) 30%, #d9d9da);
+      }
+
+      :host([activebefore])::before,
+      :host([activeafter])::after {
+        --line-color: var(--engage-color-default);
+      }
+
+      :host([dashedafter])::after,
+      :host([dashedbefore])::before {
+        border: 0;
+        width: 4px;
+        background-image: repeating-linear-gradient(
+            0deg,
+            #d9d9da,
+            #d9d9da 4px,
+            transparent 4px,
+            transparent 8px,
+            #d9d9da 8px
+          ),
+          repeating-linear-gradient(
+            90deg,
+            #d9d9da,
+            #d9d9da 4px,
+            transparent 4px,
+            transparent 8px,
+            #d9d9da 8px
+          ),
+          repeating-linear-gradient(
+            180deg,
+            #d9d9da,
+            #d9d9da 4px,
+            transparent 4px,
+            transparent 8px,
+            #d9d9da 8px
+          ),
+          repeating-linear-gradient(
+            270deg,
+            #d9d9da,
+            #d9d9da 4px,
+            transparent 4px,
+            transparent 8px,
+            #d9d9da 8px
+          );
+        background-size: 3px 100%, 100% 0, 0 100%, 100% 0;
+        background-position: 0 5px, 0 0, 100% 0, 0 100%;
+        background-repeat: no-repeat;
+      }
+
+      :host([dashedafter])::after {
+        background-position: 0 0, 0 0, 100% 0, 0 100%;
+      }
+    `,
+    ]; }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UeProfileDetailsLineItemElement.prototype, "activeBefore", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UeProfileDetailsLineItemElement.prototype, "activeAfter", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UeProfileDetailsLineItemElement.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UeProfileDetailsLineItemElement.prototype, "last", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UeProfileDetailsLineItemElement.prototype, "inside", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UeProfileDetailsLineItemElement.prototype, "dashedBefore", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UeProfileDetailsLineItemElement.prototype, "dashedAfter", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UeProfileDetailsLineItemElement.prototype, "rotated", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UeProfileDetailsLineItemElement.prototype, "sessionActive", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UeProfileDetailsLineItemElement.prototype, "bottom", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UeProfileDetailsLineItemElement.prototype, "corner", void 0);
+UeProfileDetailsLineItemElement = __decorate([
+    customElement(elementName)
+], UeProfileDetailsLineItemElement);
+export { UeProfileDetailsLineItemElement };

package/dist/profiles/activity-tracker/components/profile-type-indicator/profile-type-indicator.element.d.ts

@@ -0,0 +1,18 @@
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+declare const elementName = "ue-profile-type-indicator";
+export declare class UeProfileTypeIndicatorElement extends UmbLitElement {
+    active: boolean;
+    second: boolean;
+    small: boolean;
+    large: boolean;
+    icon: boolean;
+    light: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UeProfileTypeIndicatorElement;
+    }
+}
+export {};

package/dist/profiles/activity-tracker/components/profile-type-indicator/profile-type-indicator.element.js

@@ -0,0 +1,103 @@
+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 { css, customElement, html, property, } from "@umbraco-cms/backoffice/external/lit";
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+const elementName = "ue-profile-type-indicator";
+let UeProfileTypeIndicatorElement = class UeProfileTypeIndicatorElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        this.active = false;
+        this.second = false;
+        this.small = false;
+        this.large = false;
+        this.icon = false;
+        this.light = false;
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+    static { this.styles = css `
+    :host {
+      width: 18px;
+      height: 18px;
+      display: flex;
+      border-radius: 50%;
+      justify-content: center;
+      align-items: center;
+      background: rgba(104, 103, 107, 0.15);
+      border: 3px solid #fff;
+      color: #68676b;
+      position: relative;
+      margin: 0 auto;
+    }
+
+    :host::after {
+      content: "";
+      z-index: -1;
+      background: #fff;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      border-radius: 50%;
+    }
+
+    :host([active]) {
+      --uui-icon-color: #fff;
+      background: var(--engage-color-default);
+    }
+
+    :host([light]) {
+      --uui-icon-color: var(--engage-color-default);
+      background: rgba(52, 68, 178, 0.2);
+    }
+
+    :host([large]) {
+      width: 34px;
+      height: 34px;
+      border: 0;
+    }
+
+    :host([icon]) {
+      width: 26px;
+      height: 26px;
+    }
+
+    :host([small]) {
+      width: 14px;
+      height: 14px;
+    }
+
+    :host([second]) {
+      left: 3px;
+      top: 7px;
+    }
+  `; }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UeProfileTypeIndicatorElement.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UeProfileTypeIndicatorElement.prototype, "second", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UeProfileTypeIndicatorElement.prototype, "small", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UeProfileTypeIndicatorElement.prototype, "large", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UeProfileTypeIndicatorElement.prototype, "icon", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UeProfileTypeIndicatorElement.prototype, "light", void 0);
+UeProfileTypeIndicatorElement = __decorate([
+    customElement(elementName)
+], UeProfileTypeIndicatorElement);
+export { UeProfileTypeIndicatorElement };