@umbraco-engage/backoffice 17.0.0-rc1

package/dist/ab-testing/test/components/ab-testing-test-card.element.js

@@ -0,0 +1,310 @@
+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, when, } from "@umbraco-cms/backoffice/external/lit";
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+import { UeTimeFormatOptions } from "../../../core/index.js";
+const elementName = "ue-ab-testing-test-card";
+let UeAbTestingTestCardElement = class UeAbTestingTestCardElement extends UmbLitElement {
+    #onTestOpen() {
+        history.pushState(null, "", `${this.modalPath}edit/${this.test?.unique}`);
+    }
+    #calculateStyles() {
+        if (!this.test)
+            return "";
+        // gray
+        let color = "#68676b";
+        switch (this.test.status) {
+            case "Completed":
+                color = "#11bc9b"; // green
+                break;
+            case "Running":
+                color = "#3444b2"; // blue
+                break;
+        }
+        return `--color: ${color}`;
+    }
+    #renderIcon() {
+        let icon = "";
+        switch (this.test?.status) {
+            case "Scheduled":
+                icon = "icon-calendar-alt";
+                break;
+            case "Running":
+                icon = "icon-timer";
+                break;
+            case "Stopped":
+                icon = "icon-block";
+                break;
+            case "Completed":
+                icon = "icon-circle-dotted-active";
+                break;
+            case "Draft":
+                icon = "icon-edit";
+                break;
+        }
+        return html `<uui-icon name=${icon}></uui-icon>`;
+    }
+    #renderSummary() {
+        let text = "stoppedOn";
+        let date = this.test?.endTime;
+        switch (this.test?.status) {
+            case "Scheduled":
+            case "Running": {
+                text = "startedOn";
+                date = this.test.startTime;
+                break;
+            }
+            case "Draft": {
+                text = "createdOn";
+                date = this.test.created;
+                break;
+            }
+        }
+        if (!date)
+            return;
+        return html `<small>${this.localize.term(`engage_abTesting_${text}`)}</small
+      ><span>${this.localize.date(date, UeTimeFormatOptions)}</span>`;
+    }
+    #renderWinner() {
+        if (this.test?.status !== "Completed")
+            return html `<div id="winner"></div>`;
+        return html `<div
+      id="winner"
+      style="--badge-color: ${this.test.winner
+            ? "var(--uui-color-warning)"
+            : "#0fa588"}"
+    >
+      ${when(this.test.winner, () => html ` <div id="iconWrapper">
+            <uui-icon name="icon-trophy"></uui-icon
+            ><span>${this.test.winner}</span>
+          </div>
+          <span id="winnerText"
+            >${this.localize.term("engage_abTesting_winner")}</span
+          >`, () => html ` <uui-icon name="icon-trophy"></uui-icon>
+          <span id="winnerText"
+            >${this.localize.term("engage_abTesting_noWinner")}</span
+          >`)}
+
+      <svg
+        id="winnerSvg"
+        x="0px"
+        y="0px"
+        viewBox="0 0 132.599 127.747"
+        style="enable-background:new 0 0 400 400;"
+        xml:space="preserve"
+      >
+        <path
+          d="M69.5,0A12,12,0,0,1,79.9,6.02L98.485,38.353a12,12,0,0,1,0,11.96L79.9,82.644a12,12,0,0,1-10.4,6.02H32.424a12,12,0,0,1-10.4-6.02L3.437,50.312a12,12,0,0,1,0-11.96L22.02,6.02A12,12,0,0,1,32.424,0Z"
+          transform="translate(44.332) rotate(30)"
+        />
+      </svg>
+    </div>`;
+    }
+    render() {
+        if (!this.test)
+            return;
+        return html `<uui-card
+      style=${this.#calculateStyles()}
+      @click=${this.#onTestOpen}
+    >
+      <div id="background">
+        <svg
+          id="backgroundSvg"
+          x="0px"
+          y="0px"
+          viewBox="0 0 400 400"
+          style="enable-background:new 0 0 400 400;"
+          xml:space="preserve"
+        >
+          <path
+            d="M274.6,0H125.4c-5.3,0-10.4,2.1-14.1,5.9L5.9,111.3c-3.8,3.8-5.9,8.8-5.9,14.1v149.1c0,5.3,2.1,10.4,5.9,14.1 l105.4,105.4c3.8,3.8,8.8,5.9,14.1,5.9h149.1c5.3,0,10.4-2.1,14.1-5.9l105.4-105.4c3.8-3.8,5.9-8.8,5.9-14.1V125.4 c0-5.3-2.1-10.4-5.9-14.1L288.7,5.9C284.9,2.1,279.9,0,274.6,0z"
+          />
+        </svg>
+      </div>
+      <div id="wrapper">
+        <div id="summary">
+          <h2>${this.#renderIcon()} ${this.test.status}</h2>
+
+          ${this.#renderSummary()}
+        </div>
+        ${this.#renderWinner()}
+        <div id="detail">
+          <h3>${this.test.name}</h3>
+          <small>${this.test.description}</small>
+          <ul>
+            <li>
+              <uui-icon name="icon-document-settings"></uui-icon
+              >${this.localize.term(`engage_abTesting_testType${this.test.testType}`)}
+            </li>
+            <li>
+              <uui-icon name="icon-ordered-list"></uui-icon
+              >${this.localize.number(this.test.totalVariants)}
+            </li>
+            <li>
+              <uui-icon name="icon-users"></uui-icon>${this.localize.number(this.test.totalVisitors)}
+            </li>
+            <li>
+              <uui-icon name="icon-edit"></uui-icon>${this.test
+            .createdByUmbracoUserName ?? "??"}
+            </li>
+          </ul>
+        </div>
+      </div>
+    </uui-card>`;
+    }
+    static { this.styles = css `
+    uui-card {
+      position: relative;
+      overflow: hidden;
+      cursor: pointer;
+    }
+
+    uui-card:hover #backgroundSvg {
+      transform: translateX(10px) rotate(22.5deg);
+      transition: all 0.2s ease-in-out;
+    }
+
+    #background {
+      position: absolute;
+      top: -9999px;
+      bottom: -9999px;
+      margin: auto 0;
+      left: -20%;
+      width: 60%;
+      height: 0;
+      padding-bottom: 60%;
+      z-index: 1;
+      transform: translateY(-11%);
+    }
+
+    #wrapper {
+      overflow: hidden;
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      gap: var(--uui-size-1);
+    }
+
+    #backgroundSvg {
+      position: absolute;
+      top: 0;
+      left: 0;
+      fill: var(--color);
+      width: 100%;
+      height: 100%;
+      transform: translateX(0) rotate(22.5deg);
+      transition: all 0.2s ease-in-out;
+    }
+
+    #iconWrapper {
+      display: flex;
+      font-size: 32px;
+
+      span {
+        margin-top: 2px;
+      }
+    }
+
+    #winner {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      text-align: center;
+      margin: auto -20px;
+      height: 120px;
+      flex: 1 0 120px;
+      z-index: 2;
+      color: #fff;
+
+      uui-icon {
+        display: inline-block;
+        width: 25px;
+        height: 25px;
+      }
+
+      #winnerText {
+        display: block;
+        width: 100%;
+        line-height: 1.2;
+        font-size: 11px !important;
+        font-weight: 900;
+        margin-top: var(--uui-size-1);
+      }
+
+      #winnerSvg {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: -1;
+        fill: var(--badge-color);
+      }
+    }
+
+    ul {
+      margin: var(--uui-size-5) 0 0;
+      padding: 0;
+      list-style-type: none;
+      display: flex;
+      gap: var(--uui-size-6);
+    }
+
+    li {
+      display: flex;
+      align-items: center;
+      gap: var(--uui-size-3);
+    }
+
+    #summary {
+      padding: var(--uui-size-5);
+      z-index: 2;
+      color: white;
+      flex: 1 0 30%;
+
+      h2 {
+        margin-top: 0;
+      }
+
+      uui-icon {
+        margin-right: var(--uui-size-2);
+      }
+
+      small {
+        display: block;
+      }
+    }
+
+    #detail {
+      padding: var(--uui-size-5);
+      z-index: 2;
+      flex: 1 1 100%;
+
+      h3 {
+        margin-top: 0;
+        color: var(--color);
+      }
+
+      small {
+        line-height: 1.4;
+        display: block;
+      }
+    }
+  `; }
+};
+__decorate([
+    property({ type: Object })
+], UeAbTestingTestCardElement.prototype, "test", void 0);
+__decorate([
+    property()
+], UeAbTestingTestCardElement.prototype, "modalPath", void 0);
+UeAbTestingTestCardElement = __decorate([
+    customElement(elementName)
+], UeAbTestingTestCardElement);
+export { UeAbTestingTestCardElement };

package/dist/ab-testing/test/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./test-list/index.js";
+export * from "./ab-testing-test-card.element.js";
+export * from "./test-advice/index.js";
+export * from "./variant-picker/index.js";

package/dist/ab-testing/test/components/index.js

@@ -0,0 +1,4 @@
+export * from "./test-list/index.js";
+export * from "./ab-testing-test-card.element.js";
+export * from "./test-advice/index.js";
+export * from "./variant-picker/index.js";

package/dist/ab-testing/test/components/manifests.d.ts

@@ -0,0 +1 @@
+export declare const manifests: Array<UmbExtensionManifest>;

package/dist/ab-testing/test/components/manifests.js

@@ -0,0 +1,24 @@
+export const manifests = [
+    {
+        type: "propertyEditorUi",
+        alias: "Engage.PropertyEditorUi.VariantPicker",
+        name: "Engage Variant Picker Property Editor UI",
+        js: () => import("./variant-picker/ab-testing-test-variant-picker.element.js"),
+        meta: {
+            label: "Suggestions",
+            icon: "icon-list",
+            group: "this editor is not available for selection",
+        },
+    },
+    {
+        type: "propertyEditorUi",
+        alias: "Engage.PropertyEditorUi.SplitUrlPicker",
+        name: "Engage Split Url Picker Property Editor UI",
+        js: () => import("./split-url-picker/ab-testing-test-split-url-picker.element.js"),
+        meta: {
+            label: "Suggestions",
+            icon: "icon-list",
+            group: "this editor is not available for selection",
+        },
+    },
+];

package/dist/ab-testing/test/components/split-url-picker/ab-testing-test-split-url-picker.element.d.ts

@@ -0,0 +1,21 @@
+import { type UmbInputDocumentElement } from "@umbraco-cms/backoffice/document";
+import { type UmbPropertyEditorUiElement } from "@umbraco-cms/backoffice/property-editor";
+import { UeVariantDocumentPickerModel, UeVariantPickerBaseElement } from "../../../../core/index.js";
+declare const elementName = "ue-split-url-picker";
+export declare class UeSplitUrlContentPickerElement extends UeVariantPickerBaseElement<UeVariantDocumentPickerModel> implements UmbPropertyEditorUiElement {
+    #private;
+    private _selection?;
+    constructor();
+    onValueUpdated(): void;
+    onSelectionChange(event: CustomEvent & {
+        target: UmbInputDocumentElement;
+    }): Promise<void>;
+    renderPicker(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+export default UeSplitUrlContentPickerElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UeSplitUrlContentPickerElement;
+    }
+}

package/dist/ab-testing/test/components/split-url-picker/ab-testing-test-split-url-picker.element.js

@@ -0,0 +1,88 @@
+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 { UMB_DOCUMENT_ITEM_STORE_CONTEXT, } from "@umbraco-cms/backoffice/document";
+import { css, customElement, html, state, } from "@umbraco-cms/backoffice/external/lit";
+import { UmbChangeEvent } from "@umbraco-cms/backoffice/event";
+import { UeVariantPickerBaseElement, } from "../../../../core/index.js";
+import { ENGAGE_AB_TESTING_TEST_WORKSPACE_CONTEXT } from "../../workspace/index.js";
+const elementName = "ue-split-url-picker";
+let UeSplitUrlContentPickerElement = class UeSplitUrlContentPickerElement extends UeVariantPickerBaseElement {
+    #workspaceContext;
+    #documentItemStore;
+    constructor() {
+        super();
+        this.consumeContext(ENGAGE_AB_TESTING_TEST_WORKSPACE_CONTEXT, (context) => {
+            this.#workspaceContext = context;
+        });
+        this.consumeContext(UMB_DOCUMENT_ITEM_STORE_CONTEXT, (context) => {
+            this.#documentItemStore = context;
+        });
+    }
+    onValueUpdated() {
+        this._selection = this.value?.map((x) => x.unique).join(",");
+    }
+    async onSelectionChange(event) {
+        this._selection = event.target.value ?? "";
+        const inputUniques = this._selection
+            .split(",")
+            .map((s) => s.trim())
+            .filter(Boolean);
+        // Build a map of existing values by unique
+        const existing = new Map((this.value ?? []).map((v) => [v.unique, v]));
+        // Add newly selected uniques
+        inputUniques.forEach((unique) => {
+            if (!existing.has(unique)) {
+                existing.set(unique, { unique, culture: this.culture, id: 0 });
+            }
+        });
+        // Remove uniques that were deselected
+        for (const key of Array.from(existing.keys())) {
+            if (!inputUniques.includes(key)) {
+                existing.delete(key);
+            }
+        }
+        const newValue = Array.from(existing.values());
+        this.value = newValue;
+        const documents = this.#documentItemStore?.getItems(Array.from(existing.keys()));
+        const variants = newValue.map((v) => {
+            const documentName = documents?.find((x) => x.unique === v.unique)?.["name"];
+            return {
+                name: `Split URL: ${documentName ?? v.unique}`,
+                redirectNodeKey: v.unique,
+                description: documentName ?? v.unique,
+                id: 0,
+            };
+        });
+        await this.#workspaceContext?.updateTest({
+            variants: variants,
+        });
+        this.dispatchEvent(new UmbChangeEvent());
+    }
+    renderPicker() {
+        return html `
+      <umb-input-document
+        min="2"
+        .value=${this._selection}
+        @change=${this.onSelectionChange}
+      ></umb-input-document>
+    `;
+    }
+    static { this.styles = css `
+    umb-input-document {
+      margin-top: var(--uui-size-3);
+      display: block;
+    }
+  `; }
+};
+__decorate([
+    state()
+], UeSplitUrlContentPickerElement.prototype, "_selection", void 0);
+UeSplitUrlContentPickerElement = __decorate([
+    customElement(elementName)
+], UeSplitUrlContentPickerElement);
+export { UeSplitUrlContentPickerElement };
+export default UeSplitUrlContentPickerElement;

package/dist/ab-testing/test/components/split-url-picker/index.js

@@ -0,0 +1 @@
+"use strict";

package/dist/ab-testing/test/components/test-advice/ab-testing-test-advice.element.d.ts

@@ -0,0 +1,14 @@
+import { UeAdviceBaseElement } from "../../../../core/index.js";
+declare const elementName = "ue-ab-testing-test-advice";
+export declare class UeAbTestingTestAdviceElement extends UeAdviceBaseElement {
+    #private;
+    private _test?;
+    constructor();
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UeAbTestingTestAdviceElement;
+    }
+}
+export {};

package/dist/ab-testing/test/components/test-advice/ab-testing-test-advice.element.js

@@ -0,0 +1,56 @@
+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, state, } from "@umbraco-cms/backoffice/external/lit";
+import { UeAdviceBaseElement } from "../../../../core/index.js";
+import { ENGAGE_AB_TESTING_TEST_WORKSPACE_CONTEXT } from "../../workspace/index.js";
+const elementName = "ue-ab-testing-test-advice";
+let UeAbTestingTestAdviceElement = class UeAbTestingTestAdviceElement extends UeAdviceBaseElement {
+    constructor() {
+        super();
+        this.consumeContext(ENGAGE_AB_TESTING_TEST_WORKSPACE_CONTEXT, (context) => {
+            if (!context)
+                return;
+            this.observe(context.data, (data) => {
+                this._test = data?.test;
+                this.#generateAdvice();
+            });
+        });
+    }
+    #percentage(v) {
+        return `${((v ?? 0) * 100).toFixed()}%`;
+    }
+    #generateAdvice() {
+        if (!this._test)
+            return;
+        const conversionRate = (this._test.baselineConversionRate ?? 0) *
+            (1 +
+                (this._test.goal?.isInverted ? -1 : 1) *
+                    (this._test.minimumDetectableEffect ?? 0));
+        this.content = html `
+      You expect a conversion change of
+      <span>${this.#percentage(this._test.minimumDetectableEffect)}</span>
+      resulting in a conversion rate of
+      <span>${this.#percentage(conversionRate)}</span>
+    `;
+    }
+    static { this.styles = [
+        ...UeAdviceBaseElement.styles,
+        css `
+      span {
+        color: var(--uui-color-current);
+        font-weight: bold;
+      }
+    `,
+    ]; }
+};
+__decorate([
+    state()
+], UeAbTestingTestAdviceElement.prototype, "_test", void 0);
+UeAbTestingTestAdviceElement = __decorate([
+    customElement(elementName)
+], UeAbTestingTestAdviceElement);
+export { UeAbTestingTestAdviceElement };

package/dist/ab-testing/test/components/test-advice/ab-testing-test-indication.element.d.ts

@@ -0,0 +1,13 @@
+import { UeAdviceBaseElement } from "../../../../core/index.js";
+declare const elementName = "ue-ab-testing-test-indication";
+export declare class UeAbTestingTestIndicationElement extends UeAdviceBaseElement {
+    #private;
+    private _indication?;
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UeAbTestingTestIndicationElement;
+    }
+}
+export {};

package/dist/ab-testing/test/components/test-advice/ab-testing-test-indication.element.js

@@ -0,0 +1,106 @@
+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 { ENGAGE_AB_TESTING_TEST_WORKSPACE_CONTEXT } from "../../workspace/index.js";
+import { UeViableTestAdviceGeneratorController } from "./viable-test-advice-generator.controller.js";
+import { customElement, html, state, when, } from "@umbraco-cms/backoffice/external/lit";
+import { Advice02Image } from "../../../../images/index.js";
+import { UeAdviceBaseElement } from "../../../../core/index.js";
+const elementName = "ue-ab-testing-test-indication";
+let UeAbTestingTestIndicationElement = class UeAbTestingTestIndicationElement extends UeAdviceBaseElement {
+    constructor() {
+        super();
+        this.consumeContext(ENGAGE_AB_TESTING_TEST_WORKSPACE_CONTEXT, (context) => {
+            if (!context)
+                return;
+            this.observe(context.indication, (indication) => {
+                this._indication = indication;
+                this.#getAdvice();
+            });
+        });
+    }
+    #getAdvice() {
+        if (!this._indication)
+            return;
+        if (this._indication.hasSurpassedViableVisitorThreshold &&
+            this._indication.status === "Running" &&
+            this._indication.hurtingVariants?.length) {
+            this.#generateWarningAdvice();
+        }
+        else if ((!this._indication.hasSurpassedViableVisitorThreshold ||
+            this._indication.estimatedRuntimeInDays == null) &&
+            ["Scheduled", "Running", "Draft"].includes(this._indication.status)) {
+            this.#generateNonViableAdvice();
+        }
+        else if (this._indication.hasSurpassedViableVisitorThreshold &&
+            (this._indication.estimatedRuntimeInDays != null ||
+                ["Stopped", "Completed"].includes(this._indication.status))) {
+            this.#generateViableAdvice();
+        }
+    }
+    #generateWarningAdvice() {
+        this.content = html ` <h3>Your attention is required!</h3>
+      <p>
+        One or more variants are affecting the macro conversion(s). You should
+        consider excluding these variants.
+      </p>`;
+    }
+    #generateNonViableAdvice() {
+        this.image = Advice02Image;
+        this.content = html `${when(this._indication?.status === "Scheduled" ||
+            this._indication?.status === "Draft", () => html `<h3>Estimated test duration unknown</h3>
+        <p>
+          It is not possible to calculate the expected duration of your test. If
+          the tested pages are relatively new then this can be caused by the
+          lack of sufficient analytics data. In any other case; change the MDE
+          value within the 'Advanced settings' section and try again. Please be
+          aware that it is ok to start testing anyway!
+        </p>`)}
+    ${when(this._indication?.status === "Running", () => html `<h3>Waiting for more data...</h3>
+        <!--Running and no estimated runtime-->
+        ${when(this._indication?.estimatedRequiredRuntimeRemainingInDays == null, () => html `<p>
+            At this moment we have insufficient data on this running test to
+            support you with advice. Don't worry, when there is enough data the
+            advice will be shown right away!
+          </p>`)}
+        <!--Running and estimated runtime-->
+        ${when((this._indication?.estimatedRequiredRuntimeRemainingInDays ?? 0) > 0, () => html ` <p>
+            This test needs
+            ${(this._indication?.requiredVisitorsTotal ?? 0) -
+            (this._indication?.currentVisitors ?? 0)}
+            more visitors
+            ${(this._indication?.estimatedRequiredRuntimeRemainingInDays ?? 0) >
+            365
+            ? "(expected to take more than a year)"
+            : `(in about ${this._indication?.estimatedRequiredRuntimeRemainingInDays} days)`}
+            to be able to calculate when the result will become reliable. You
+            will find that here.
+          </p>`)}
+
+        <!--Running and estimated runtime is negative-->
+        ${when((this._indication?.estimatedRequiredRuntimeRemainingInDays ?? 1) <= 0, () => html ` <p>
+            This test was estimated to be reliable
+            ${this._indication.estimatedRequiredRuntimeRemainingInDays * -1}
+            days ago, but it did not collect enough data. Don't worry, when
+            there is enough data the advice will be shown right away!
+          </p>`)}`)} `;
+    }
+    #generateViableAdvice() {
+        if (!this._indication)
+            return;
+        const generator = new UeViableTestAdviceGeneratorController(this, this._indication);
+        const { value, image } = generator.getAdvice();
+        this.content = value;
+        this.image = image;
+    }
+};
+__decorate([
+    state()
+], UeAbTestingTestIndicationElement.prototype, "_indication", void 0);
+UeAbTestingTestIndicationElement = __decorate([
+    customElement(elementName)
+], UeAbTestingTestIndicationElement);
+export { UeAbTestingTestIndicationElement };

package/dist/ab-testing/test/components/test-advice/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./ab-testing-test-indication.element.js";
+export * from "./ab-testing-test-advice.element.js";
+export * from "./viable-test-advice-generator.controller.js";

package/dist/ab-testing/test/components/test-advice/index.js

@@ -0,0 +1,3 @@
+export * from "./ab-testing-test-indication.element.js";
+export * from "./ab-testing-test-advice.element.js";
+export * from "./viable-test-advice-generator.controller.js";

package/dist/ab-testing/test/components/test-advice/viable-test-advice-generator.controller.d.ts

@@ -0,0 +1,12 @@
+import { type TemplateResult } from "@umbraco-cms/backoffice/external/lit";
+import { UmbControllerBase } from "@umbraco-cms/backoffice/class-api";
+import type { UmbControllerHost } from "@umbraco-cms/backoffice/controller-api";
+import { type AbTestIndicationModel } from "../../../../generated/index.js";
+export declare class UeViableTestAdviceGeneratorController extends UmbControllerBase {
+    #private;
+    constructor(host: UmbControllerHost, indication: AbTestIndicationModel);
+    getAdvice(): {
+        value: TemplateResult;
+        image?: string;
+    };
+}