@umbraco-engage/backoffice 17.0.0-rc1

package/dist/personalization/segments/rules/segment-rule-event-triggered.js

@@ -0,0 +1,115 @@
+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 { UeSegmentRuleBaseElement } from "./base/index.js";
+import { customElement, html } from "@umbraco-cms/backoffice/external/lit";
+import { makeArray } from "../../../core/index.js";
+const elementName = "ue-segment-rule-event-triggered";
+let UeSegmentRuleEventTriggeredElement = class UeSegmentRuleEventTriggeredElement extends UeSegmentRuleBaseElement {
+    #validFrequencies = [
+        "Never",
+        "AtLeastOnceAny",
+        "VariableAny",
+    ];
+    // TODO => can this be reusable for goals, events, campaigns - essentially any rule with date range config
+    renderReadOnly() {
+        if (!this.value)
+            return;
+        const eventValue = this.value.config.events?.at(0) ?? {};
+        const eventFrequency = this.value.config.frequency;
+        const eventRange = this.value.config.range;
+        if (!eventFrequency || !eventRange)
+            return;
+        const getEventPrefix = () => {
+            if (!eventFrequency)
+                return "";
+            return this.localize.term("engage_personalization_triggeredEvent", eventFrequency.type === "Never");
+        };
+        const getEventDetail = () => {
+            return Object.keys(eventValue)
+                .filter((key) => !!eventValue[key])
+                .map((key) => `${key} '${eventValue[key]}'`)
+                .join(` ${this.strings.with} `);
+        };
+        return html `
+      ${getEventPrefix()} ${this.strings.with} ${getEventDetail()}
+      ${this.getReadonlyFrequency(eventFrequency.type, eventFrequency.operator, eventFrequency.completions)}
+      ${this.getReadonlyRange(eventRange.type, eventRange.maximum)}
+    `;
+    }
+    renderEditor() {
+        return html `${this.#renderEvents()}${this.#renderEventSettings()}${this.renderAdvanced(this.value?.config.range, makeArray("Any", "Days", "Now", "Sessions"))}`;
+    }
+    updateRange(e) {
+        const range = e.target
+            .value;
+        this.#updateParameterValue({ range });
+        this.updateParameterValue(range, "range");
+    }
+    #renderEventSettings() {
+        return html `<uui-box
+      .headline=${this.localize.term("engage_personalization_pageEventSettings")}
+    >
+      <div class="flex">
+        ${["category", "action", "label"].map((key) => html `
+            <umb-property-layout
+              .label=${this.localize.term(`engage_${key}`)}
+              orientation="vertical"
+              ><uui-input
+                slot="editor"
+                .value=${this.value?.config.events?.at(0)?.[key] ?? ""}
+                @change=${(e) => this.#onSettingChange(e, key)}
+              ></uui-input
+            ></umb-property-layout>
+          `)}
+      </div>
+    </uui-box>`;
+    }
+    #onSettingChange(e, key) {
+        // events is an array, but only ever of one item...
+        const event = {
+            ...(this.value?.config.events?.at(0) ?? {
+                category: "",
+                action: "",
+                label: "",
+            }),
+        };
+        event[key] = e.target.value;
+        this.#updateParameterValue({ events: [event] });
+        this.updateParameterValue([event], "events");
+    }
+    #updateFrequency(e) {
+        const frequency = e.target
+            .value;
+        this.#updateParameterValue({ frequency });
+        this.updateParameterValue(frequency, "frequency");
+    }
+    #renderEvents() {
+        return html `<uui-radio-group
+      .value=${this.value?.config.frequency?.type.toString() ?? ""}
+    >
+      ${this.#validFrequencies.map((freq) => html `<ue-segment-rule-configuration-frequency
+            .config=${this.value?.config.frequency}
+            .frequency=${freq}
+            @change=${this.#updateFrequency}
+            key="eventFrequency"
+          ></ue-segment-rule-configuration-frequency>`)}</uui-radio-group
+    > `;
+    }
+    #updateParameterValue(value) {
+        if (!this.value?.config)
+            return;
+        this.value = {
+            ...this.value,
+            ...{ config: { ...this.value.config, ...value } },
+        };
+    }
+};
+UeSegmentRuleEventTriggeredElement = __decorate([
+    customElement(elementName)
+], UeSegmentRuleEventTriggeredElement);
+export { UeSegmentRuleEventTriggeredElement };
+export { UeSegmentRuleEventTriggeredElement as api };

package/dist/personalization/segments/rules/segment-rule-location.d.ts

@@ -0,0 +1,19 @@
+import { UeSegmentRuleBaseElement } from "./base/index.js";
+import { type LocationSegmentRuleConfigModel } from "../../../generated/index.js";
+export interface UeSegmentRuleLocationConfig extends LocationSegmentRuleConfigModel {
+}
+declare const elementName = "ue-segment-rule-location";
+export declare class UeSegmentRuleLocationElement extends UeSegmentRuleBaseElement<UeSegmentRuleLocationConfig> {
+    #private;
+    private _data?;
+    connectedCallback(): Promise<void>;
+    renderReadOnly(): import("lit-html").TemplateResult<1>;
+    renderEditor(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+export { UeSegmentRuleLocationElement as api };
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UeSegmentRuleLocationElement;
+    }
+}

package/dist/personalization/segments/rules/segment-rule-location.js

@@ -0,0 +1,126 @@
+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, unsafeHTML, } from "@umbraco-cms/backoffice/external/lit";
+import { tryExecute } from "@umbraco-cms/backoffice/resources";
+import { UeSegmentRuleBaseElement } from "./base/index.js";
+import { SegmentsService, } from "../../../generated/index.js";
+const elementName = "ue-segment-rule-location";
+let UeSegmentRuleLocationElement = class UeSegmentRuleLocationElement extends UeSegmentRuleBaseElement {
+    async connectedCallback() {
+        super.connectedCallback();
+        const { data } = await tryExecute(this, SegmentsService.getSegmentsLocationsData());
+        this._data = data;
+    }
+    renderReadOnly() {
+        const value = Object.entries(this.value?.config ?? {})
+            .filter(([, value]) => !!value)
+            .map(([key, value]) => `${this.localize.term(`engage_${key}`)}
+            ${this.strings.matches} '${value}'`)
+            .join(` ${this.strings.and} `);
+        return html `${value}`;
+    }
+    #getValidOptions(prop, key, extractorFn) {
+        if (!this._data?.[prop])
+            return [];
+        return Object.entries(this._data[prop])
+            .filter(([k]) => !key || (extractorFn?.(k) ?? k) === key)
+            .flatMap(([_, v]) => v);
+    }
+    #onSelectionChange(config) {
+        if (!this.value)
+            return;
+        this.value.config = config;
+        Object.entries(config).forEach(([key, value]) => {
+            this.updateParameterValue(value, key);
+        });
+        this.requestUpdate();
+    }
+    #renderSelect(options, valueKey, prevKey, onChangeCallback) {
+        return html `<uui-select
+      slot="editor"
+      .options=${options.map((c) => ({
+            name: c,
+            value: c,
+            selected: c === this.value?.config?.[valueKey],
+        }))}
+      .value=${this.value?.config?.[valueKey]}
+      @change=${(e) => onChangeCallback(e.target.value)}
+      ?disabled=${prevKey && !this.value?.config?.[prevKey]}
+    ></uui-select>`;
+    }
+    #renderCountries() {
+        return html `<umb-property-layout
+      .label=${this.localize.term(`engage_country`)}
+    >
+      ${this.#renderSelect(this._data?.countries ?? [], "country", null, (country) => this.#onSelectionChange({
+            country,
+            province: "",
+            county: "",
+            city: "",
+        }))}
+    </umb-property-layout>`;
+    }
+    #renderProvinces() {
+        const validProvinces = this.#getValidOptions("provinces", this.value?.config?.country ?? undefined);
+        return html `<umb-property-layout
+      .label=${this.localize.term(`engage_province`)}
+    >
+      ${this.#renderSelect(validProvinces, "province", "country", (province) => this.#onSelectionChange({
+            ...this.value.config,
+            province,
+            county: "",
+            city: "",
+        }))}
+    </umb-property-layout>`;
+    }
+    #renderCounties() {
+        const validCounties = this.#getValidOptions("counties", this.value?.config?.province ?? undefined, (x) => x.split("_").at(1));
+        return html `<umb-property-layout
+      .label=${this.localize.term(`engage_county`)}
+    >
+      ${this.#renderSelect(validCounties, "county", "province", (county) => this.#onSelectionChange({
+            ...this.value.config,
+            county,
+            city: "",
+        }))}
+    </umb-property-layout>`;
+    }
+    #renderCities() {
+        const validCities = this.#getValidOptions("cities", this.value?.config?.county ?? undefined, (x) => x.split("_").at(2));
+        return html `<umb-property-layout
+      .label=${this.localize.term(`engage_city`)}
+    >
+      ${this.#renderSelect(validCities, "city", "county", (city) => this.#onSelectionChange({
+            ...this.value.config,
+            city,
+        }))}</umb-property-layout
+    >`;
+    }
+    renderEditor() {
+        if (!this._data?.countries?.length) {
+            return html `${unsafeHTML(this.localize.term("engage_noLocalization"))}`;
+        }
+        return html ` ${this.#renderCountries()} ${this.#renderProvinces()}
+    ${this.#renderCounties()} ${this.#renderCities()}`;
+    }
+    static { this.styles = [
+        ...UeSegmentRuleBaseElement.styles,
+        css `
+      ue-checkbox + ue-checkbox {
+        margin-top: var(--uui-size-2);
+      }
+    `,
+    ]; }
+};
+__decorate([
+    state()
+], UeSegmentRuleLocationElement.prototype, "_data", void 0);
+UeSegmentRuleLocationElement = __decorate([
+    customElement(elementName)
+], UeSegmentRuleLocationElement);
+export { UeSegmentRuleLocationElement };
+export { UeSegmentRuleLocationElement as api };

package/dist/personalization/segments/rules/segment-rule-logged-in-members.d.ts

@@ -0,0 +1,16 @@
+import { UeSegmentRuleBaseElement } from "./base/index.js";
+import type { MemberLoggedInRuleConfigModel } from "../../../generated/index.js";
+export interface UeSegmentRuleLoggedInMembersConfig extends MemberLoggedInRuleConfigModel {
+}
+declare const elementName = "ue-segment-rule-logged-in-members";
+export declare class UeSegmentRuleLoggedInMembersElement extends UeSegmentRuleBaseElement<UeSegmentRuleLoggedInMembersConfig> {
+    #private;
+    renderReadOnly(): import("lit-html").TemplateResult<1>;
+    renderEditor(): import("lit-html").TemplateResult<1>;
+}
+export { UeSegmentRuleLoggedInMembersElement as api };
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UeSegmentRuleLoggedInMembersElement;
+    }
+}

package/dist/personalization/segments/rules/segment-rule-logged-in-members.js

@@ -0,0 +1,32 @@
+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, html } from "@umbraco-cms/backoffice/external/lit";
+import { UeSegmentRuleBaseElement } from "./base/index.js";
+const elementName = "ue-segment-rule-logged-in-members";
+let UeSegmentRuleLoggedInMembersElement = class UeSegmentRuleLoggedInMembersElement extends UeSegmentRuleBaseElement {
+    renderReadOnly() {
+        return html `${this.localize.term("engage_member")}
+    ${this.localize
+            .term(`engage_${this.value?.config?.isLoggedIn ? "loggedin" : "notloggedin"}`)
+            .toLowerCase()}`;
+    }
+    renderEditor() {
+        return html `<ue-button-group
+      @change=${this.#onValueChange}
+      .value=${this.value?.config?.isLoggedIn}
+      .buttonLabels=${["engage_loggedin", "engage_notloggedin"]}
+    ></ue-button-group>`;
+    }
+    #onValueChange(e) {
+        this.updateParameterValue(e.target.value, "isLoggedIn");
+    }
+};
+UeSegmentRuleLoggedInMembersElement = __decorate([
+    customElement(elementName)
+], UeSegmentRuleLoggedInMembersElement);
+export { UeSegmentRuleLoggedInMembersElement };
+export { UeSegmentRuleLoggedInMembersElement as api };

package/dist/personalization/segments/rules/segment-rule-number-of-sessions.d.ts

@@ -0,0 +1,19 @@
+import { UeSegmentRuleBaseElement } from "./base/index.js";
+import type { NumberOfSessionsRuleConfigModel } from "../../../generated/index.js";
+export interface UeSegmentRuleNumberOfSessionsConfig extends NumberOfSessionsRuleConfigModel {
+}
+declare const elementName = "ue-segment-rule-number-of-sessions";
+export declare class UeSegmentRuleNumberOfSessionsElement extends UeSegmentRuleBaseElement<UeSegmentRuleNumberOfSessionsConfig> {
+    #private;
+    private _options;
+    connectedCallback(): void;
+    renderReadOnly(): import("lit-html").TemplateResult<1>;
+    renderEditor(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+export { UeSegmentRuleNumberOfSessionsElement as api };
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UeSegmentRuleNumberOfSessionsElement;
+    }
+}

package/dist/personalization/segments/rules/segment-rule-number-of-sessions.js

@@ -0,0 +1,93 @@
+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 { UeSegmentRuleBaseElement } from "./base/index.js";
+import { css, customElement, html, state, } from "@umbraco-cms/backoffice/external/lit";
+import { makeArray } from "../../../core/index.js";
+const elementName = "ue-segment-rule-number-of-sessions";
+let UeSegmentRuleNumberOfSessionsElement = class UeSegmentRuleNumberOfSessionsElement extends UeSegmentRuleBaseElement {
+    constructor() {
+        super(...arguments);
+        this._options = [];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._options = makeArray("eq", "gt", "lt").map((x, i) => ({
+            value: x,
+            name: this.localize.term(`engage_${x}`),
+            selected: this.value?.config.operator === x || i === 0,
+        }));
+    }
+    renderReadOnly() {
+        return html `${this.localize.term(`engage_${this.value?.config.operator}`)}
+    ${this.value?.config.sessions}
+    ${this.localize.term("engage_sessions").toLowerCase()}`;
+    }
+    renderEditor() {
+        return html `
+      <umb-property-layout
+        orientation="vertical"
+        .label=${this.localize.term("engage_operator")}
+        ><uui-select
+          slot="editor"
+          @change=${this.#setOperator}
+          .options=${this._options}
+        ></uui-select
+      ></umb-property-layout>
+      <umb-property-layout
+        orientation="vertical"
+        .label=${this.localize.term("engage_count")}
+        ><uui-input
+          type="number"
+          slot="editor"
+          @change=${this.#setCount}
+          .value=${`${this.value?.config.sessions ?? ""}`}
+        ></uui-input
+      ></umb-property-layout>
+    `;
+    }
+    #setCount(e) {
+        if (!this.value)
+            return;
+        const value = e.target.value;
+        this.value = {
+            config: { ...this.value.config, sessions: Number(value) },
+            isNegation: this.value.isNegation,
+        };
+        this.updateParameterValue(this.value.config.sessions, "sessions");
+    }
+    #setOperator(e) {
+        if (!this.value)
+            return;
+        const operator = e.target.value;
+        this.value = {
+            config: { ...this.value.config, operator },
+            isNegation: this.value.isNegation,
+        };
+        this.updateParameterValue(this.value.config.operator, "operator");
+    }
+    static { this.styles = [
+        ...UeSegmentRuleBaseElement.styles,
+        css `
+      #editor {
+        display: flex;
+      }
+
+      uui-select {
+        display: block;
+        max-width: 180px;
+      }
+    `,
+    ]; }
+};
+__decorate([
+    state()
+], UeSegmentRuleNumberOfSessionsElement.prototype, "_options", void 0);
+UeSegmentRuleNumberOfSessionsElement = __decorate([
+    customElement(elementName)
+], UeSegmentRuleNumberOfSessionsElement);
+export { UeSegmentRuleNumberOfSessionsElement };
+export { UeSegmentRuleNumberOfSessionsElement as api };

package/dist/personalization/segments/rules/segment-rule-persona.d.ts

@@ -0,0 +1,15 @@
+import { UeSegmentRuleBaseGroupedExtendedCheckboxElement } from "./base/index.js";
+import { type PersonaDtoModel, type PersonasDtoModel, type PersonaSegmentRuleConfigModel } from "../../../generated/index.js";
+export interface UeSegmentRulePersonaConfig extends PersonaSegmentRuleConfigModel {
+}
+declare const elementName = "ue-segment-rule-persona";
+export declare class UeSegmentRulePersonaElement extends UeSegmentRuleBaseGroupedExtendedCheckboxElement<UeSegmentRulePersonaConfig, PersonasDtoModel, PersonaDtoModel> {
+    constructor();
+    connectedCallback(): Promise<void>;
+}
+export { UeSegmentRulePersonaElement as api };
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UeSegmentRulePersonaElement;
+    }
+}

package/dist/personalization/segments/rules/segment-rule-persona.js

@@ -0,0 +1,24 @@
+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 { UeSegmentRuleBaseGroupedExtendedCheckboxElement } from "./base/index.js";
+import { PersonaService, } from "../../../generated/index.js";
+const elementName = "ue-segment-rule-persona";
+let UeSegmentRulePersonaElement = class UeSegmentRulePersonaElement extends UeSegmentRuleBaseGroupedExtendedCheckboxElement {
+    constructor() {
+        super("Personas", "Personas", (x) => x.personas ?? [], PersonaService.getPersonaAll);
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        this.display = [...(this.value?.config?.Personas ?? [])];
+    }
+};
+UeSegmentRulePersonaElement = __decorate([
+    customElement(elementName)
+], UeSegmentRulePersonaElement);
+export { UeSegmentRulePersonaElement };
+export { UeSegmentRulePersonaElement as api };

package/dist/personalization/segments/rules/segment-rule-reached-goals.d.ts

@@ -0,0 +1,19 @@
+import { UeSegmentRuleBaseElement } from "./base/index.js";
+import type { GoalSegmentRuleConfigModel } from "../../../generated/index.js";
+export interface UeSegmentRuleReachedGoalsConfig extends GoalSegmentRuleConfigModel {
+}
+declare const elementName = "ue-segment-rule-reached-goals";
+export declare class UeSegmentRuleReachedGoalsElement extends UeSegmentRuleBaseElement<UeSegmentRuleReachedGoalsConfig> {
+    #private;
+    private _goals?;
+    connectedCallback(): Promise<void>;
+    renderReadOnly(): import("lit-html").TemplateResult<1> | undefined;
+    renderEditor(): import("lit-html").TemplateResult<1>;
+    updateRange(e: Event): void;
+}
+export { UeSegmentRuleReachedGoalsElement as api };
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UeSegmentRuleReachedGoalsElement;
+    }
+}

package/dist/personalization/segments/rules/segment-rule-reached-goals.js

@@ -0,0 +1,114 @@
+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 { UeSegmentRuleBaseElement } from "./base/index.js";
+import { customElement, html, state, } from "@umbraco-cms/backoffice/external/lit";
+import { makeArray } from "../../../core/index.js";
+import { UeGoalsCollectionRepository, } from "../../../settings/index.js";
+const elementName = "ue-segment-rule-reached-goals";
+let UeSegmentRuleReachedGoalsElement = class UeSegmentRuleReachedGoalsElement extends UeSegmentRuleBaseElement {
+    #goalsCollectionRepository = new UeGoalsCollectionRepository(this);
+    async connectedCallback() {
+        super.connectedCallback();
+        const { data } = await this.#goalsCollectionRepository.requestCollection({
+            skip: 0,
+            take: 1000,
+        });
+        this._goals = data?.items ?? [];
+    }
+    renderReadOnly() {
+        if (!this.value)
+            return;
+        const goals = this.value.config.goals;
+        const frequency = this.value.config.frequency;
+        const range = this.value.config.range;
+        if (!frequency || !range)
+            return;
+        const getEventPrefix = () => frequency
+            ? this.localize.term("engage_personalization_reachedGoal", frequency.type === "Never")
+            : "";
+        const getGoalDetail = () => goals
+            .map((x) => `'${this._goals?.find((y) => y.id === x)?.name}'`)
+            .join(` ${this.strings.or} `);
+        const readonlyFrequency = this.getReadonlyFrequency(frequency.type, frequency.operator, frequency.completions);
+        return html `
+      ${getEventPrefix()} ${getGoalDetail()} ${readonlyFrequency}
+      ${this.getReadonlyRange(range.type, range.maximum)}
+    `;
+    }
+    renderEditor() {
+        return html `${this.#renderFrequency()}${this.#renderGoals()}${this.renderAdvanced(this.value?.config.range, makeArray("Any", "Now", "Sessions", "Days"))}`;
+    }
+    #toggleInclude(e) {
+        const target = e.target;
+        const goalId = Number(target.value);
+        const currentGoals = this.value?.config.goals ?? [];
+        let updatedGoals;
+        if (target.checked) {
+            // Add if not present
+            updatedGoals = currentGoals.includes(goalId)
+                ? currentGoals
+                : [...currentGoals, goalId];
+        }
+        else {
+            // Remove if present
+            updatedGoals = currentGoals.filter((id) => id !== goalId);
+        }
+        this.#updateParameterValue({ goals: updatedGoals });
+        this.updateParameterValue(updatedGoals, "goals");
+    }
+    #renderGoals() {
+        if (!this._goals?.length)
+            return;
+        return html `<h3>Goals</h3>
+      ${this._goals.map((g) => html `<ue-checkbox
+          .label=${g.name ?? ""}
+          .value=${`${g.id}`}
+          ?checked=${!!this.value?.config.goals?.includes(g.id)}
+          @change=${this.#toggleInclude}
+        ></ue-checkbox>`)}`;
+    }
+    updateRange(e) {
+        const range = e.target
+            .value;
+        this.#updateParameterValue({ range });
+        this.updateParameterValue(range, "range");
+    }
+    #updateFrequency(e) {
+        const frequency = e.target
+            .value;
+        this.#updateParameterValue({ frequency });
+        this.updateParameterValue(frequency, "frequency");
+    }
+    #updateParameterValue(value) {
+        if (!this.value?.config)
+            return;
+        this.value = {
+            ...this.value,
+            ...{ config: { ...this.value.config, ...value } },
+        };
+    }
+    #renderFrequency() {
+        return html `<uui-radio-group
+      .value=${this.value?.config.frequency?.type.toString() ?? ""}
+    >
+      ${makeArray("Never", "AtLeastOnceAny", "VariableAny", "AtLeastOnceAll", "VariableAll").map((freq) => html `<ue-segment-rule-configuration-frequency
+            .config=${this.value?.config.frequency}
+            .frequency=${freq}
+            @change=${this.#updateFrequency}
+            key="goalFrequency"
+          ></ue-segment-rule-configuration-frequency>`)}</uui-radio-group
+    > `;
+    }
+};
+__decorate([
+    state()
+], UeSegmentRuleReachedGoalsElement.prototype, "_goals", void 0);
+UeSegmentRuleReachedGoalsElement = __decorate([
+    customElement(elementName)
+], UeSegmentRuleReachedGoalsElement);
+export { UeSegmentRuleReachedGoalsElement };
+export { UeSegmentRuleReachedGoalsElement as api };

package/dist/personalization/segments/rules/segment-rule-registered-members.d.ts

@@ -0,0 +1,16 @@
+import { UeSegmentRuleBaseElement } from "./base/index.js";
+import type { MemberRegisteredConfigModel } from "../../../generated/index.js";
+export interface UeSegmentRuleRegisteredMembersConfig extends MemberRegisteredConfigModel {
+}
+declare const elementName = "ue-segment-rule-registered-members";
+export declare class UeSegmentRuleRegisteredMembersElement extends UeSegmentRuleBaseElement<UeSegmentRuleRegisteredMembersConfig> {
+    #private;
+    renderReadOnly(): import("lit-html").TemplateResult<1>;
+    renderEditor(): import("lit-html").TemplateResult<1>;
+}
+export { UeSegmentRuleRegisteredMembersElement as api };
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UeSegmentRuleRegisteredMembersElement;
+    }
+}

package/dist/personalization/segments/rules/segment-rule-registered-members.js

@@ -0,0 +1,34 @@
+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, html } from "@umbraco-cms/backoffice/external/lit";
+import { UeSegmentRuleBaseElement } from "./base/index.js";
+const elementName = "ue-segment-rule-registered-members";
+let UeSegmentRuleRegisteredMembersElement = class UeSegmentRuleRegisteredMembersElement extends UeSegmentRuleBaseElement {
+    renderReadOnly() {
+        return html `${this.localize.term("engage_member")}
+    ${this.localize
+            .term(`engage_${this.value?.config?.isRegisteredMember
+            ? "registered"
+            : "notregistered"}`)
+            .toLowerCase()}`;
+    }
+    renderEditor() {
+        return html `<ue-button-group
+      @change=${this.#onValueChange}
+      .value=${this.value?.config?.isRegisteredMember}
+      .buttonLabels=${["engage_isMember", "engage_notMember"]}
+    ></ue-button-group>`;
+    }
+    #onValueChange(e) {
+        this.updateParameterValue(e.target.value, "isRegisteredMember");
+    }
+};
+UeSegmentRuleRegisteredMembersElement = __decorate([
+    customElement(elementName)
+], UeSegmentRuleRegisteredMembersElement);
+export { UeSegmentRuleRegisteredMembersElement };
+export { UeSegmentRuleRegisteredMembersElement as api };