@umbraco-engage/backoffice 17.0.0-rc1

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

@@ -0,0 +1,191 @@
+import { html, when, } from "@umbraco-cms/backoffice/external/lit";
+import { UmbControllerBase } from "@umbraco-cms/backoffice/class-api";
+import { UmbLocalizationController } from "@umbraco-cms/backoffice/localization-api";
+import { Advice01Image, Advice03Image, Advice04Image, } from "../../../../images/index.js";
+import { UeTimeFormatOptions } from "../../../../core/index.js";
+export class UeViableTestAdviceGeneratorController extends UmbControllerBase {
+    #localize = new UmbLocalizationController(this);
+    #indication;
+    constructor(host, indication) {
+        super(host);
+        this.#indication = indication;
+    }
+    get #bestPrognosis() {
+        return this.#indication.bestPrognosis;
+    }
+    #percentage(v) {
+        return `${((v ?? 0) * 100).toFixed(2)}%`;
+    }
+    #pluralize(value, plural, singular, prefix) {
+        `${value}${prefix ? ` ${prefix} ` : ""} ${value === 1 ? singular : plural}`;
+    }
+    #getWinningVariantStatus() {
+        if (!this.#indication.variantStatus)
+            return;
+        const winningVariantId = this.#indication.winningVariant?.abTestVariant?.id;
+        if (!winningVariantId)
+            return;
+        return this.#indication.variantStatus[winningVariantId];
+    }
+    #getScheduledAdvice() {
+        return {
+            image: Advice01Image,
+            value: html ` <h3>
+          This test should run
+          ${this.#pluralize(this.#indication.estimatedRuntimeInDays, "days", "day")}
+        </h3>
+        <p>
+          You have set the MDE value to
+          ${this.#percentage(this.#indication.mde)} which leads to an expected
+          conversion
+          ${this.#indication.isInvertedGoal ? "decrease" : "increase"} from
+          ${this.#percentage(this.#indication.benchmarkConversionRate)} to
+          ${this.#percentage(this.#indication.targetConversionRate)}. For this
+          result to become reliable each variant will need
+          ${this.#indication.requiredVisitorsPerVariant} unique visitors.
+        </p>
+        <p>
+          With ${this.#indication.variantCount}
+          ${this.#indication.variantCount === 1 ? "variant" : "variants"} this
+          test needs
+          ${this.#pluralize(this.#indication.requiredVisitorsTotal, "visitors", "visitor", "unique")}
+          in total. Based on the current statistics of
+          ${this.#pluralize(this.#indication.expectedDailyVisitors, "visitors", "visitor", "daily unique")}
+          your test should run for approximately
+          ${this.#pluralize(this.#indication.estimatedRuntimeInDays, "days", "day")}.
+        </p>`,
+        };
+    }
+    #getWinningUnreliableAdvice() {
+        return {
+            image: this.#indication.reliableVariants === 0 ? Advice01Image : undefined,
+            value: html `
+        <h3>
+          Your test should run for
+          ${when((this.#indication.estimatedRuntimeInDays ?? 1000) <= 365, () => html `another
+              ${this.#pluralize(this.#indication.estimatedRuntimeInDays, "days", "day")}`, () => html `more than a year`)}
+        </h3>
+        ${when(this.#indication.originalVariantIsWinning, () => html ` <p>
+            It seems like no variant can outperform the original variant! With a
+            conversion
+            ${this.#indication.bestNonWinningVariantConversionChange < 0
+                ? "decrease"
+                : "increase"}
+            of
+            ${this.#percentage(this.#indication.bestNonWinningVariantConversionChange)}
+            variant
+            ${this.#indication.bestNonBenchmarkVariant?.abTestVariant?.name}
+            seems to be the best losing variant.
+          </p>`, () => html `<p ng-show="!this.#indication.originalVariantIsWinning">
+        With a conversion ${this.#indication.winningVariantConversionChange < 0
+                ? "decrease"
+                : "increase"} of
+        ${this.#percentage(this.#indication.winningVariantConversionChange)}</span
+        >
+        variant
+        <span>${this.#indication.winningVariant?.abTestVariant?.name}</span>
+        seems to be in the lead.
+      </p>`)}
+
+        <p>
+          For this result to become reliable variant
+          ${this.#indication.earliestReliableVariant?.abTestVariant?.name} needs
+          a total of
+          ${this.#pluralize(this.#bestPrognosis?.requiredVisitorsTotal, "visitors", "visitor", "unique")}
+          which results in an additional
+          ${this.#pluralize(this.#bestPrognosis?.remainingVisitors, "visitors", "visitor")}.
+          Based upon the current statistics of
+          ${this.#pluralize(this.#indication?.requiredVisitorsTotal, "visitors", "visitor", "daily unique")}
+          this test should run for another approximately
+          ${this.#pluralize(this.#indication?.estimatedRuntimeInDays, "days", "day")}.
+        </p>
+      `,
+        };
+    }
+    #getWinningReliableAdvice() {
+        return {
+            image: Advice04Image,
+            value: html ` <h3>
+          Variant ${this.#indication.winningVariant?.abTestVariant?.name} seems
+          to be a reliable winner!
+        </h3>
+        <p>
+          After
+          ${this.#pluralize(this.#indication.currentRuntimeInDays, "days", "day")}
+          of testing the minimum amount of
+          ${this.#pluralize(this.#indication.winningVariant?.visitors, "visitors", "visitor")}
+          was reached which made the conversion
+          ${this.#indication.winningVariantConversionChange < 0
+                ? "decrease"
+                : "increase"}
+          of
+          ${this.#percentage(this.#indication.winningVariantConversionChange)} a
+          reliable result.
+        </p>
+        <p>
+          You may continue this test so other variants may become reliable but
+          most likely (given the same conditions) they will never outscore the
+          current winner.
+        </p>`,
+        };
+    }
+    #getStoppedAdvice() {
+        if (!this.#indication.stoppedOn)
+            return { value: html `` };
+        return {
+            image: Advice03Image,
+            value: html `
+        <h3>This test is stopped</h3>
+        <p>
+          This test was stopped on
+          ${this.#localize.date(this.#indication.stoppedOn, UeTimeFormatOptions)}.
+        </p>
+        <p>
+          This test contains
+          ${this.#pluralize(this.#indication.reliableVariants, "variants", "variant", "reliable")}.
+        </p>
+        <p>
+          Please complete the test after analyzing the results (the results will
+          always remain visible). Did your test result in a winner? Then please
+          pick this winner before completing the test.
+        </p>
+      `,
+        };
+    }
+    #getCompletedAdvice() {
+        return {
+            image: Advice04Image,
+            value: html ` <h3>This test is completed</h3>
+        <p>
+          ${when(this.#indication.winner, () => html `Variant ${this.#indication.winner?.abTestVariant?.name}
+            was picked as the winner of this test! It outperformed all other
+            variants.`, () => html `No winner has been picked for this test.`)}
+        </p>
+
+        <p>
+          User ${this.#indication.completedByUsername} completed the test on
+          ${this.#localize.date(this.#indication.completedOn, UeTimeFormatOptions)}.
+        </p>
+        <p>
+          This test has run for
+          ${this.#pluralize(this.#indication.currentRuntimeInDays, "days", "day")}
+          and started on
+          ${this.#localize.date(this.#indication.startTime, UeTimeFormatOptions)}.
+        </p>`,
+        };
+    }
+    getAdvice() {
+        if (this.#indication.status === "Scheduled" ||
+            this.#indication.status === "Draft")
+            return this.#getScheduledAdvice();
+        if (this.#indication.status === "Running")
+            return this.#getWinningVariantStatus() !== "Reliable"
+                ? this.#getWinningUnreliableAdvice()
+                : this.#getWinningReliableAdvice();
+        if (this.#indication.status === "Stopped")
+            return this.#getStoppedAdvice();
+        if (this.#indication.status === "Completed")
+            return this.#getCompletedAdvice();
+        return { value: html `` };
+    }
+}

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

@@ -0,0 +1,11 @@
+import { UeAbTestingTestListBaseElement } from "./ab-testing-test-list-base.element.js";
+declare const elementName = "ue-ab-testing-document-test-list";
+export declare class UeAbTestingDocumentTestListElement extends UeAbTestingTestListBaseElement {
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UeAbTestingDocumentTestListElement;
+    }
+}
+export {};

package/dist/ab-testing/test/components/test-list/ab-testing-document-test-list.element.js

@@ -0,0 +1,26 @@
+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 } from "@umbraco-cms/backoffice/external/lit";
+import { ENGAGE_AB_TESTING_DOCUMENT_WORKSPACE_CONTEXT } from "../../../workspace-view/abtesting-document-workspace-context.token.js";
+import { UeAbTestingTestListBaseElement } from "./ab-testing-test-list-base.element.js";
+const elementName = "ue-ab-testing-document-test-list";
+let UeAbTestingDocumentTestListElement = class UeAbTestingDocumentTestListElement extends UeAbTestingTestListBaseElement {
+    constructor() {
+        super();
+        this.consumeContext(ENGAGE_AB_TESTING_DOCUMENT_WORKSPACE_CONTEXT, (context) => {
+            if (!context)
+                return;
+            this.observe(context.data, (tests) => {
+                this.tests = (tests ?? []);
+            });
+        });
+    }
+};
+UeAbTestingDocumentTestListElement = __decorate([
+    customElement(elementName)
+], UeAbTestingDocumentTestListElement);
+export { UeAbTestingDocumentTestListElement };

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

@@ -0,0 +1,20 @@
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+import type { ProjectAbTestModel } from "../../../../generated/index.js";
+interface AbTestFilterModel {
+    new: boolean;
+    running: boolean;
+    completed: boolean;
+    userKey: string;
+}
+export declare abstract class UeAbTestingTestListBaseElement extends UmbLitElement {
+    #private;
+    protected _tests: Array<ProjectAbTestModel>;
+    set tests(value: Array<ProjectAbTestModel>);
+    protected filters: AbTestFilterModel;
+    protected modalPath?: string;
+    private _createdByOptions;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+export {};

package/dist/ab-testing/test/components/test-list/ab-testing-test-list-base.element.js

@@ -0,0 +1,170 @@
+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_ENTITY_TYPE } from "../../constants.js";
+import { css, html, 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";
+export class UeAbTestingTestListBaseElement extends UmbLitElement {
+    #testGroups;
+    set tests(value) {
+        this._tests = value;
+        this._createdByOptions = [
+            { name: "All", value: "0", selected: true },
+            ...new Set(value
+                .filter((t, i, arr) => t.createdByUmbracoUserKey &&
+                t.createdByUmbracoUserName &&
+                arr.findIndex((o) => o.createdByUmbracoUserKey === t.createdByUmbracoUserKey) === i)
+                .map((t) => ({
+                name: t.createdByUmbracoUserName,
+                value: t.createdByUmbracoUserKey,
+            }))),
+        ];
+    }
+    constructor() {
+        super();
+        this.#testGroups = [
+            {
+                status: ["Running"],
+                visibilityFn: () => this.filters.running,
+            },
+            {
+                status: ["Stopped"],
+                visibilityFn: () => this.filters.completed,
+            },
+            {
+                status: ["Draft", "Scheduled"],
+                header: "New",
+                visibilityFn: () => this.filters.new,
+            },
+            {
+                status: ["Completed"],
+                visibilityFn: () => this.filters.completed,
+            },
+        ];
+        this._tests = [];
+        this.filters = {
+            new: true,
+            running: true,
+            completed: true,
+            userKey: "0",
+        };
+        this._createdByOptions = [];
+        new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
+            .addAdditionalPath(ENGAGE_AB_TESTING_TEST_ENTITY_TYPE)
+            .onSetup(() => ({
+            data: {
+                entityType: ENGAGE_AB_TESTING_TEST_ENTITY_TYPE,
+            },
+            modal: {
+                size: "large",
+            },
+        }))
+            .observeRouteBuilder((routeBuilder) => {
+            this.modalPath = routeBuilder({});
+        });
+    }
+    #onCheckboxFilterChange(e) {
+        const { value, checked } = e.target;
+        this.filters = { ...this.filters, [value]: checked };
+    }
+    #onSelectFilterChange(e) {
+        const value = e.target.value.toString();
+        this.filters = {
+            ...this.filters,
+            userKey: value,
+        };
+    }
+    #renderTestList(group) {
+        if (!group.visibilityFn())
+            return;
+        const tests = this._tests.filter((t) => group.status.includes(t.status) &&
+            (this.filters.userKey === "0" ||
+                t.createdByUmbracoUserKey === this.filters.userKey));
+        if (!tests.length)
+            return;
+        return html `<ue-divider
+        text=${group.header ?? group.status[0]}
+      ></ue-divider>
+      ${tests.map((test) => html `<ue-ab-testing-test-card
+            .test=${test}
+            .modalPath=${this.modalPath}
+          ></ue-ab-testing-test-card>`)}`;
+    }
+    #renderFilters() {
+        return html ` <div id="filters">
+      <uui-form-layout-item>
+        <uui-label slot="label" for="status"
+          >${this.localize.term("engage_status")}</uui-label
+        >
+        <ue-grid id="status"
+          >${["new", "running", "completed"].map((key) => html `<ue-checkbox
+                ?checked=${this.filters[key]}
+                .value=${key}
+                .label=${this.localize.term(`engage_abTesting_${key}`)}
+                @change=${this.#onCheckboxFilterChange}
+              ></ue-checkbox>`)}</ue-grid
+        >
+      </uui-form-layout-item>
+      <uui-form-layout-item>
+        <uui-label slot="label" for="createdBy"
+          >${this.localize.term("engage_createdBy")}</uui-label
+        >
+        <uui-select
+          id="createdBy"
+          .options=${this._createdByOptions}
+          .value=${this.filters.userKey}
+          @change=${this.#onSelectFilterChange}
+        >
+        </uui-select>
+      </uui-form-layout-item>
+    </div>`;
+    }
+    render() {
+        if (this._tests.length) {
+            return html `${this.#renderFilters()}
+      ${this.#testGroups.map((group) => this.#renderTestList(group))}`;
+        }
+        return html `<h3>
+      ${this.localize.term("engage_abTesting_noTestsAvailable")}
+    </h3>`;
+    }
+    static { this.styles = [
+        css `
+      ue-ab-testing-test-card + ue-ab-testing-test-card {
+        margin-top: var(--uui-size-5);
+        display: block;
+      }
+
+      uui-form-layout-item {
+        margin: 0;
+      }
+
+      h3 {
+        text-align: center;
+        color: var(--uui-color-default);
+      }
+
+      #filters {
+        display: flex;
+        justify-content: space-between;
+      }
+    `,
+    ]; }
+}
+__decorate([
+    state()
+], UeAbTestingTestListBaseElement.prototype, "_tests", void 0);
+__decorate([
+    state()
+], UeAbTestingTestListBaseElement.prototype, "filters", void 0);
+__decorate([
+    state()
+], UeAbTestingTestListBaseElement.prototype, "modalPath", void 0);
+__decorate([
+    state()
+], UeAbTestingTestListBaseElement.prototype, "_createdByOptions", void 0);

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

@@ -0,0 +1,11 @@
+import { UeAbTestingTestListBaseElement } from "./ab-testing-test-list-base.element.js";
+declare const elementName = "ue-ab-testing-test-list";
+export declare class UeAbTestingTestListElement extends UeAbTestingTestListBaseElement {
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UeAbTestingTestListElement;
+    }
+}
+export {};

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

@@ -0,0 +1,26 @@
+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 } from "@umbraco-cms/backoffice/external/lit";
+import { ENGAGE_AB_TESTING_PROJECT_WORKSPACE_CONTEXT } from "../../../project/index.js";
+import { UeAbTestingTestListBaseElement } from "./ab-testing-test-list-base.element.js";
+const elementName = "ue-ab-testing-test-list";
+let UeAbTestingTestListElement = class UeAbTestingTestListElement extends UeAbTestingTestListBaseElement {
+    constructor() {
+        super();
+        this.consumeContext(ENGAGE_AB_TESTING_PROJECT_WORKSPACE_CONTEXT, (context) => {
+            if (!context)
+                return;
+            this.observe(context.tests, (tests) => {
+                this.tests = (tests ?? []);
+            });
+        });
+    }
+};
+UeAbTestingTestListElement = __decorate([
+    customElement(elementName)
+], UeAbTestingTestListElement);
+export { UeAbTestingTestListElement };

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

@@ -0,0 +1,2 @@
+export * from "./ab-testing-test-list.element.js";
+export * from "./ab-testing-document-test-list.element.js";

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

@@ -0,0 +1,2 @@
+export * from "./ab-testing-test-list.element.js";
+export * from "./ab-testing-document-test-list.element.js";

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

@@ -0,0 +1,16 @@
+import { type UmbPropertyEditorUiElement } from "@umbraco-cms/backoffice/property-editor";
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+declare const elementName = "ue-ab-test-variant-picker";
+export declare class UeAbTestVariantPickerElement extends UmbLitElement implements UmbPropertyEditorUiElement {
+    #private;
+    private _test?;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+export default UeAbTestVariantPickerElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UeAbTestVariantPickerElement;
+    }
+}

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

@@ -0,0 +1,189 @@
+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 { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+import { appendToFrozenArray, partialUpdateFrozenArray, } from "@umbraco-cms/backoffice/observable-api";
+import { ENGAGE_AB_TESTING_TEST_WORKSPACE_CONTEXT } from "../../workspace/index.js";
+import { ENGAGE_EDIT_VARIANT_PATH_PATTERN } from "../../../../core/index.js";
+import { ENGAGE_AB_TESTING_EDIT_VARIANT_MODAL_ALIAS, } from "../../modal/index.js";
+import { umbOpenModal } from "@umbraco-cms/backoffice/modal";
+import { UmbModalRouteRegistrationController } from "@umbraco-cms/backoffice/router";
+import { UMB_DOCUMENT_ENTITY_TYPE } from "@umbraco-cms/backoffice/document";
+import { UMB_WORKSPACE_MODAL } from "@umbraco-cms/backoffice/workspace";
+const elementName = "ue-ab-test-variant-picker";
+let UeAbTestVariantPickerElement = class UeAbTestVariantPickerElement extends UmbLitElement {
+    #workspaceContext;
+    #modalPath;
+    constructor() {
+        super();
+        this.consumeContext(ENGAGE_AB_TESTING_TEST_WORKSPACE_CONTEXT, (context) => {
+            if (!context)
+                return;
+            this.#workspaceContext = context;
+            this.observe(context.test, (test) => (this._test = test));
+        });
+        new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
+            .addAdditionalPath(UMB_DOCUMENT_ENTITY_TYPE)
+            .onSetup(() => ({
+            data: {
+                entityType: UMB_DOCUMENT_ENTITY_TYPE,
+            },
+            modal: {
+                size: "full",
+            },
+        }))
+            .observeRouteBuilder((routeBuilder) => {
+            this.#modalPath = routeBuilder({});
+        });
+    }
+    async #addVariant() {
+        if (!this._test)
+            return;
+        this.#workspaceContext?.updateTest({
+            variants: appendToFrozenArray(this._test.variants ?? [], {}),
+        });
+    }
+    async #deleteVariant(i) {
+        if (!this._test?.variants)
+            return;
+        this.#workspaceContext?.updateTest({
+            variants: [
+                ...this._test.variants.slice(0, i),
+                ...this._test.variants.slice(i + 1),
+            ],
+        });
+    }
+    async #editSinglePageVariant(variant) {
+        if (!this._test || !this.#workspaceContext)
+            return;
+        // if variant is new, it will not have segment. Unfortunately that means we need to save the test,
+        // then fetch it again, to populate the segment. The only thing we know about a new variant
+        // is the name, so we use that to find the updated value.
+        // This should be improved to allow creating variant segments independently of the test.
+        if (!variant.segment) {
+            await this.#workspaceContext.requestSave();
+            const updated = this.#workspaceContext
+                .getTestVariants()
+                .find((v) => v.name === variant.name);
+            if (!updated)
+                return;
+            variant = { ...variant, segment: updated.segment };
+        }
+        const url = ENGAGE_EDIT_VARIANT_PATH_PATTERN.generateLocal({
+            unique: this._test.umbracoPageVariants[0].unique,
+            culture: this._test.umbracoPageVariants[0].culture,
+            segment: variant.segment,
+        });
+        window.history.pushState(null, "", this.#modalPath + url);
+    }
+    async #editVariant(variant, label, index) {
+        if (!this._test)
+            return;
+        if (this._test.testType == "SinglePage") {
+            this.#editSinglePageVariant(variant);
+        }
+        else {
+            const value = await umbOpenModal(this, ENGAGE_AB_TESTING_EDIT_VARIANT_MODAL_ALIAS, {
+                data: {
+                    variant,
+                    label,
+                    isOriginalVariant: index === 0,
+                },
+            }).catch(() => { });
+            if (!value)
+                return;
+            this.#workspaceContext?.updateTest({
+                variants: partialUpdateFrozenArray(this._test?.variants ?? [], value, (x) => this._test?.variants?.indexOf(x) === index),
+            });
+        }
+    }
+    // TODO => previewing requires save and publish of segmented content variants.
+    // I (NW) haven't been able to decipher how this works in 13.
+    async #previewVariant(variant) {
+        alert("preview variant");
+    }
+    #onNameChange(e, variant, i) {
+        if (!this._test)
+            return;
+        const name = e.target.value.toString();
+        this.#workspaceContext?.updateTest({
+            variants: partialUpdateFrozenArray(this._test.variants ?? [], { ...variant, name }, (v) => this._test?.variants?.indexOf(v) === i),
+        });
+    }
+    #renderVariant(variant, idx) {
+        const label = String.fromCharCode(65 + idx);
+        return html `<div class="variant">
+      <uui-input
+        .value=${variant.name ?? ""}
+        @change=${(e) => this.#onNameChange(e, variant, idx)}
+      >
+        <div class="extra" slot="prepend">${label}</div>
+      </uui-input>
+      <uui-button
+        .label=${this.localize.term("general_edit")}
+        look="secondary"
+        @click=${() => this.#editVariant(variant, label, idx)}
+      ></uui-button>
+      <uui-button
+        .label=${this.localize.term("general_preview")}
+        look="secondary"
+        @click=${() => this.#previewVariant(variant)}
+      ></uui-button>
+      <uui-button
+        .label=${this.localize.term("general_delete")}
+        look="secondary"
+        ?disabled=${idx === 0}
+        @click=${() => this.#deleteVariant(idx)}
+        ><uui-icon name="icon-trash"></uui-icon
+      ></uui-button>
+    </div>`;
+    }
+    render() {
+        return html `${this._test?.variants?.map((v, i) => this.#renderVariant(v, i))}<uui-button
+        @click=${this.#addVariant}
+        look="placeholder"
+        .label=${this.localize.term("general_add")}
+      ></uui-button>`;
+    }
+    static { this.styles = css `
+    [look="placeholder"] {
+      width: 100%;
+    }
+
+    uui-input {
+      flex: 1;
+    }
+
+    .extra {
+      user-select: none;
+      height: 100%;
+      padding: 0 var(--uui-size-3);
+      background: #f3f3f3;
+      color: var(--uui-color-default);
+      font-weight: bold;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-right: 1px solid
+        var(--uui-input-border-color, var(--uui-color-border));
+    }
+
+    .variant {
+      margin-bottom: var(--uui-size-1);
+      display: flex;
+      gap: var(--uui-size-1);
+    }
+  `; }
+};
+__decorate([
+    state()
+], UeAbTestVariantPickerElement.prototype, "_test", void 0);
+UeAbTestVariantPickerElement = __decorate([
+    customElement(elementName)
+], UeAbTestVariantPickerElement);
+export { UeAbTestVariantPickerElement };
+export default UeAbTestVariantPickerElement;

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

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