@umbraco-engage/backoffice 17.0.0-rc1

package/dist/core/lang/manifests.d.ts

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

package/dist/core/lang/manifests.js

@@ -0,0 +1,12 @@
+export const manifests = [
+    {
+        type: "localization",
+        alias: "Engage.Localization.En",
+        weight: -100,
+        name: "English",
+        meta: {
+            culture: "en",
+        },
+        js: () => import("./en-us.js"),
+    },
+];

package/dist/core/manifests.d.ts

@@ -0,0 +1,2 @@
+import type { UmbExtensionManifestKind } from "@umbraco-cms/backoffice/extension-registry";
+export declare const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind>;

package/dist/core/manifests.js

@@ -0,0 +1,34 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from "@umbraco-cms/backoffice/workspace";
+import { manifests as langManifests } from "./lang/manifests.js";
+import { manifests as contextManifests } from "./context/manifests.js";
+import { manifests as componentManifests } from "./components/manifests.js";
+import { manifests as modalManifests } from "./modal/manifests.js";
+import { manifests as collectionManifests } from "./collection/manifests.js";
+import { manifests as iconManifests } from "./icons/manifests.js";
+import { manifests as conditionManifests } from "./conditions/manifests.js";
+export const manifests = [
+    ...langManifests,
+    ...contextManifests,
+    ...componentManifests,
+    ...modalManifests,
+    ...collectionManifests,
+    ...iconManifests,
+    ...conditionManifests,
+    {
+        type: "sectionView",
+        alias: "Engage.SectionView.Root",
+        name: "Engage Section View",
+        element: () => import("./components/screen/tabbed-layout.element.js"),
+        meta: {
+            label: "#engage_engage",
+            pathname: "start",
+            icon: "",
+        },
+        conditions: [
+            {
+                alias: UMB_WORKSPACE_CONDITION_ALIAS,
+                match: "Umb.Section.Engage",
+            },
+        ],
+    },
+];

package/dist/core/modal/element/engage-property-dataset-modal-base.element.d.ts

@@ -0,0 +1,9 @@
+import type { UUIButtonState } from "@umbraco-cms/backoffice/external/uui";
+import { UmbModalBaseElement } from "@umbraco-cms/backoffice/modal";
+import { ENGAGE_PROPERTY_DATASET_CONTEXT } from "../../index.js";
+export declare abstract class UePropertyDatasetModalBaseElement<ModalDataType extends object = object, ModalValueType = unknown> extends UmbModalBaseElement<ModalDataType, ModalValueType> {
+    protected datasetContext?: typeof ENGAGE_PROPERTY_DATASET_CONTEXT.TYPE;
+    protected submitButtonState: UUIButtonState;
+    constructor();
+    protected submitModal(): Promise<void>;
+}

package/dist/core/modal/element/engage-property-dataset-modal-base.element.js

@@ -0,0 +1,33 @@
+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 { UmbModalBaseElement } from "@umbraco-cms/backoffice/modal";
+import { state } from "lit/decorators.js";
+import { ENGAGE_PROPERTY_DATASET_CONTEXT } from "../../index.js";
+export class UePropertyDatasetModalBaseElement extends UmbModalBaseElement {
+    constructor() {
+        super();
+        this.consumeContext(ENGAGE_PROPERTY_DATASET_CONTEXT, (context) => {
+            this.datasetContext = context;
+        });
+    }
+    async submitModal() {
+        this.submitButtonState = "waiting";
+        try {
+            await this.datasetContext?.validate();
+            this.submitButtonState = "success";
+            const value = this.datasetContext?.getData();
+            this.updateValue(value);
+            this._submitModal();
+        }
+        catch {
+            this.submitButtonState = "failed";
+        }
+    }
+}
+__decorate([
+    state()
+], UePropertyDatasetModalBaseElement.prototype, "submitButtonState", void 0);

package/dist/core/modal/element/engage-readonly-code-modal.element.d.ts

@@ -0,0 +1,13 @@
+import type { UeReadonlyCodeModalData } from "../token/index.js";
+import { UmbModalBaseElement } from "@umbraco-cms/backoffice/modal";
+declare const elementName = "ue-readonly-code-modal";
+export declare class UeReadonlyCodeModalElement extends UmbModalBaseElement<UeReadonlyCodeModalData> {
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+export default UeReadonlyCodeModalElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UeReadonlyCodeModalElement;
+    }
+}

package/dist/core/modal/element/engage-readonly-code-modal.element.js

@@ -0,0 +1,45 @@
+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, when, } from "@umbraco-cms/backoffice/external/lit";
+import { UmbModalBaseElement } from "@umbraco-cms/backoffice/modal";
+const elementName = "ue-readonly-code-modal";
+let UeReadonlyCodeModalElement = class UeReadonlyCodeModalElement extends UmbModalBaseElement {
+    render() {
+        return html ` <umb-body-layout
+      .headline=${this.localize.term("engage_codeVariant", this.data?.title)}
+    >
+      <p>${this.localize.term("engage_codeVariantDescription")}</p>
+      ${when(this.data?.css, () => html `<ue-collapsing-box .headline=${"CSS"}>
+          <umb-code-block language="css">${this.data?.css}</umb-code-block>
+        </ue-collapsing-box>`)}
+      ${when(this.data?.javascript, () => html `<ue-collapsing-box .headline=${"JavaScript"}>
+          <umb-code-block language="js"
+            >${this.data?.javascript}</umb-code-block
+          >
+        </ue-collapsing-box>`)}
+      <uui-button
+        slot="actions"
+        label=${this.localize.term("general_close")}
+        @click=${this._rejectModal}
+      ></uui-button>
+    </umb-body-layout>`;
+    }
+    static { this.styles = css `
+    umb-body-layout {
+      max-width: 800px;
+    }
+
+    ue-collapsing-box + ue-collapsing-box {
+      margin-top: var(--uui-size-5);
+    }
+  `; }
+};
+UeReadonlyCodeModalElement = __decorate([
+    customElement("ue-readonly-code-modal")
+], UeReadonlyCodeModalElement);
+export { UeReadonlyCodeModalElement };
+export default UeReadonlyCodeModalElement;

package/dist/core/modal/element/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./engage-readonly-code-modal.element.js";
+export * from "./engage-property-dataset-modal-base.element.js";

package/dist/core/modal/element/index.js

@@ -0,0 +1,2 @@
+export * from "./engage-readonly-code-modal.element.js";
+export * from "./engage-property-dataset-modal-base.element.js";

package/dist/core/modal/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./token/index.js";
+export * from "./element/index.js";

package/dist/core/modal/index.js

@@ -0,0 +1,2 @@
+export * from "./token/index.js";
+export * from "./element/index.js";

package/dist/core/modal/manifests.d.ts

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

package/dist/core/modal/manifests.js

@@ -0,0 +1,9 @@
+import { ENGAGE_READONLY_CODE_MODAL_ALIAS } from "./token/index.js";
+export const manifests = [
+    {
+        type: "modal",
+        alias: ENGAGE_READONLY_CODE_MODAL_ALIAS,
+        name: "Engage Readonly Code Modal",
+        element: () => import("./element/engage-readonly-code-modal.element.js"),
+    },
+];

package/dist/core/modal/token/engage-readonly-code-modal.token.d.ts

@@ -0,0 +1,8 @@
+import { UmbModalToken } from "@umbraco-cms/backoffice/modal";
+export declare const ENGAGE_READONLY_CODE_MODAL_ALIAS = "Engage.Modal.ReadonlyCode";
+export interface UeReadonlyCodeModalData {
+    css?: string | null;
+    javascript?: string | null;
+    title?: string;
+}
+export declare const ENGAGE_READONLY_CODE_MODAL: UmbModalToken<UeReadonlyCodeModalData, unknown>;

package/dist/core/modal/token/engage-readonly-code-modal.token.js

@@ -0,0 +1,8 @@
+import { UmbModalToken } from "@umbraco-cms/backoffice/modal";
+export const ENGAGE_READONLY_CODE_MODAL_ALIAS = "Engage.Modal.ReadonlyCode";
+export const ENGAGE_READONLY_CODE_MODAL = new UmbModalToken(ENGAGE_READONLY_CODE_MODAL_ALIAS, {
+    modal: {
+        type: "dialog",
+        size: "medium",
+    },
+});

package/dist/core/modal/token/index.d.ts

@@ -0,0 +1 @@
+export * from "./engage-readonly-code-modal.token.js";

package/dist/core/modal/token/index.js

@@ -0,0 +1 @@
+export * from "./engage-readonly-code-modal.token.js";

package/dist/core/path/edit-variant-workspace-path-pattern.class.d.ts

@@ -0,0 +1,7 @@
+import { UmbPathPattern, UmbPathPatternParamsType } from "@umbraco-cms/backoffice/router";
+export declare class UePathPattern<LocalParamsType extends UmbPathPatternParamsType = UmbPathPatternParamsType, BaseParamsType = LocalParamsType> extends UmbPathPattern {
+    #private;
+    constructor(localPattern: string, basePath?: UmbPathPattern | string, fallback?: Partial<LocalParamsType>);
+    generateAbsolute(params: LocalParamsType & BaseParamsType): string;
+    generateLocal(params: LocalParamsType): string;
+}

package/dist/core/path/edit-variant-workspace-path-pattern.class.js

@@ -0,0 +1,26 @@
+import { UmbPathPattern, } from "@umbraco-cms/backoffice/router";
+import { ueUrlPatternToString } from "./url-pattern-to-string.function.js";
+export class UePathPattern extends UmbPathPattern {
+    #local;
+    #base;
+    #fallback;
+    constructor(localPattern, basePath, fallback) {
+        super(localPattern, basePath);
+        this.#local = localPattern;
+        basePath = basePath?.toString() ?? "";
+        this.#base =
+            basePath.lastIndexOf("/") !== basePath.length - 1
+                ? basePath + "/"
+                : basePath;
+        this.#fallback = fallback;
+    }
+    generateAbsolute(params) {
+        return ((this.#base.indexOf(":") !== -1
+            ? ueUrlPatternToString(this.#base, params, this.#fallback)
+            : this.#base) +
+            ueUrlPatternToString(this.#local, params, this.#fallback));
+    }
+    generateLocal(params) {
+        return ueUrlPatternToString(this.#local, params, this.#fallback);
+    }
+}

package/dist/core/path/edit-variant-workspace-path-pattern.d.ts

@@ -0,0 +1,10 @@
+import { UePathPattern } from "./edit-variant-workspace-path-pattern.class.js";
+export declare const ENGAGE_EDIT_VARIANT_PATH_PATTERN: UePathPattern<{
+    unique: string;
+    culture?: string | null;
+    segment?: string | null;
+}, {
+    unique: string;
+    culture?: string | null;
+    segment?: string | null;
+}>;

package/dist/core/path/edit-variant-workspace-path-pattern.js

@@ -0,0 +1,5 @@
+import { UMB_DOCUMENT_WORKSPACE_PATH } from "@umbraco-cms/backoffice/document";
+import { UePathPattern } from "./edit-variant-workspace-path-pattern.class.js";
+export const ENGAGE_EDIT_VARIANT_PATH_PATTERN = new UePathPattern("edit/:unique/:culture_&_:culture_:segment", UMB_DOCUMENT_WORKSPACE_PATH, {
+    culture: "invariant",
+});

package/dist/core/path/index.d.ts

@@ -0,0 +1 @@
+export * from "./edit-variant-workspace-path-pattern.js";

package/dist/core/path/index.js

@@ -0,0 +1 @@
+export * from "./edit-variant-workspace-path-pattern.js";

package/dist/core/path/url-pattern-to-string.function.d.ts

@@ -0,0 +1,2 @@
+import { UmbUrlParametersRecord } from "@umbraco-cms/backoffice/utils";
+export declare function ueUrlPatternToString(pattern: string, params: UmbUrlParametersRecord | null, fallback?: Partial<UmbUrlParametersRecord>): string;

package/dist/core/path/url-pattern-to-string.function.js

@@ -0,0 +1,13 @@
+const PARAM_IDENTIFIER = /:([^/_]+)/g;
+export function ueUrlPatternToString(pattern, params, fallback) {
+    return params
+        ? pattern.replace(PARAM_IDENTIFIER, (_substring, ...args) => {
+            const segmentValue = params[args[0]] ?? fallback?.[args[0]];
+            return segmentValue === undefined
+                ? `:${args[0]}`
+                : segmentValue === null
+                    ? "null"
+                    : segmentValue.toString();
+        })
+        : pattern;
+}

package/dist/core/property/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const IP_V4_REGEX: RegExp;
+export declare const IP_V6_REGEX: RegExp;

package/dist/core/property/constants.js

@@ -0,0 +1,4 @@
+// IPv4 regex
+export const IP_V4_REGEX = /^(25[0-5]|2[0-4][0-9]|1?[0-9]{1,2})\.(25[0-5]|2[0-4][0-9]|1?[0-9]{1,2})\.(25[0-5]|2[0-4][0-9]|1?[0-9]{1,2})\.(25[0-5]|2[0-4][0-9]|1?[0-9]{1,2})$/;
+// IPv6 regex (simple, covers most cases)
+export const IP_V6_REGEX = /^((?:[0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}|(?:[0-9a-fA-F]{1,4}:){1,7}:|(?:[0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|(?:[0-9a-fA-F]{1,4}:){1,5}(?::[0-9a-fA-F]{1,4}){1,2}|(?:[0-9a-fA-F]{1,4}:){1,4}(?::[0-9a-fA-F]{1,4}){1,3}|(?:[0-9a-fA-F]{1,4}:){1,3}(?::[0-9a-fA-F]{1,4}){1,4}|(?:[0-9a-fA-F]{1,4}:){1,2}(?::[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:(?::[0-9a-fA-F]{1,4}){1,6}|:(?::[0-9a-fA-F]{1,4}){1,7}|::)$/;

package/dist/core/property/dropdown-property.d.ts

@@ -0,0 +1,6 @@
+import type { UePropertyConfig } from "./types.js";
+import { UePropertyConfigBase } from "./property-config.js";
+export declare class UeDropdownUePropertyConfig<T> extends UePropertyConfigBase<T, Array<string>> {
+    editor: string;
+    constructor(alias: keyof T & string, mandatory: boolean, args?: Partial<UePropertyConfig<T>>);
+}

package/dist/core/property/dropdown-property.js

@@ -0,0 +1,13 @@
+import { UePropertyConfigBase } from "./property-config.js";
+export class UeDropdownUePropertyConfig extends UePropertyConfigBase {
+    constructor(alias, mandatory, args) {
+        super(alias, mandatory, args);
+        this.editor = "Umb.PropertyEditorUi.Dropdown";
+        if (!this.valueIn) {
+            this.valueIn = (x) => (x ? [x.toString()] : []);
+        }
+        if (!this.valueOut) {
+            this.valueOut = (x) => x?.[0] ?? undefined;
+        }
+    }
+}

package/dist/core/property/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./property-dataset-renderer.controller.js";
+export * from "./dropdown-property.js";
+export * from "./property-value-validator.controller.js";
+export * from './types.js';

package/dist/core/property/index.js

@@ -0,0 +1,4 @@
+export * from "./property-dataset-renderer.controller.js";
+export * from "./dropdown-property.js";
+export * from "./property-value-validator.controller.js";
+export * from './types.js';

package/dist/core/property/property-config.d.ts

@@ -0,0 +1,21 @@
+import type { UmbPropertyTypeAppearanceModel, UmbPropertyTypeValidationModel } from "@umbraco-cms/backoffice/content-type";
+import type { UmbPropertyEditorConfig } from "@umbraco-cms/backoffice/property-editor";
+import type { UePropertyConfig } from "./types.js";
+export declare class UePropertyConfigBase<T, ValueType> implements UePropertyConfig<T> {
+    alias: keyof T & string;
+    labelKey?: string | ((v: T | undefined) => string) | undefined;
+    descriptionKey?: string | undefined;
+    editor?: string | undefined;
+    config?: UmbPropertyEditorConfig | undefined;
+    appearance?: UmbPropertyTypeAppearanceModel | undefined;
+    validation?: UmbPropertyTypeValidationModel | undefined;
+    dataType?: string | undefined;
+    valueOut?: ((x: ValueType) => T[keyof T] | undefined) | undefined;
+    valueIn?: ((x?: T[keyof T]) => ValueType) | undefined;
+    visible?: {
+        alias: keyof T & string;
+        value?: any;
+        oneOf?: Array<any>;
+    } | undefined;
+    constructor(alias: keyof T & string, mandatory?: boolean, args?: Partial<UePropertyConfig<T>>);
+}

package/dist/core/property/property-config.js

@@ -0,0 +1,6 @@
+export class UePropertyConfigBase {
+    constructor(alias, mandatory, args = {}) {
+        Object.assign(this, args, { alias });
+        this.validation = { mandatory: mandatory ?? false };
+    }
+}

package/dist/core/property/property-dataset-renderer.controller.d.ts

@@ -0,0 +1,19 @@
+import { UmbControllerBase } from "@umbraco-cms/backoffice/class-api";
+import type { UmbContextToken } from "@umbraco-cms/backoffice/context-api";
+import type { UmbControllerHost } from "@umbraco-cms/backoffice/controller-api";
+import { UmbLocalizationController } from "@umbraco-cms/backoffice/localization-api";
+import type { UmbPropertyValueData } from "@umbraco-cms/backoffice/property";
+import type { UeDatasetHostWorkspaceContext, UePropertyConfigData } from "./types.js";
+export declare class UePropertyDataSetRendererController<EntityType, ContextEntityType extends {
+    [K in keyof ContextEntityType]: ContextEntityType[K];
+} | EntityType = EntityType, HostContextType extends UeDatasetHostWorkspaceContext<ContextEntityType> = UeDatasetHostWorkspaceContext<ContextEntityType>> extends UmbControllerBase {
+    #private;
+    localize: UmbLocalizationController<import("@umbraco-cms/backoffice/localization-api").UmbLocalizationSet>;
+    data?: EntityType;
+    value: Array<UmbPropertyValueData>;
+    properties: UePropertyConfigData<EntityType>;
+    constructor(host: UmbControllerHost, contextToken: UmbContextToken<any, HostContextType>, properties: UePropertyConfigData<EntityType>, dataPath?: keyof ContextEntityType & string);
+    withItems(forProperty: keyof EntityType & string, optionGenerator: (data: EntityType | undefined, src?: Array<never>) => Array<Option>): this;
+    render(): import("lit-html").TemplateResult<1>;
+    destroy(): void;
+}

package/dist/core/property/property-dataset-renderer.controller.js

@@ -0,0 +1,183 @@
+import { UmbControllerBase } from "@umbraco-cms/backoffice/class-api";
+import { html, repeat, } from "@umbraco-cms/backoffice/external/lit";
+import { UmbLocalizationController } from "@umbraco-cms/backoffice/localization-api";
+import { appendToFrozenArray } from "@umbraco-cms/backoffice/observable-api";
+import { UMB_VALIDATION_CONTEXT, UmbDataPathPropertyValueQuery, } from "@umbraco-cms/backoffice/validation";
+import { UePropertyValueValidatorController } from "./property-value-validator.controller.js";
+export class UePropertyDataSetRendererController extends UmbControllerBase {
+    #context;
+    #hostElm;
+    #validationContext;
+    #optionGenerators;
+    #validators;
+    #dataPath;
+    constructor(host, contextToken, properties, dataPath) {
+        super(host);
+        this.localize = new UmbLocalizationController(this);
+        this.value = [];
+        this.#optionGenerators = {};
+        this.#validators = [];
+        this.#hostElm = host.getHostElement();
+        this.properties = properties;
+        this.#dataPath = dataPath;
+        this.consumeContext(contextToken, async (context) => {
+            if (!context)
+                return;
+            this.#context = context;
+            this.observe(context.data, (data) => {
+                if (!data)
+                    return;
+                this.data = this.#getByDataPath(data);
+                this.#mapValues();
+                this.#setItems();
+            });
+        });
+        this.consumeContext(UMB_VALIDATION_CONTEXT, (context) => {
+            this.#validationContext = context;
+        });
+    }
+    withItems(forProperty, optionGenerator) {
+        this.#optionGenerators[this.#camel(forProperty)] = optionGenerator;
+        return this;
+    }
+    #getByDataPath(obj) {
+        if (!this.#dataPath)
+            return obj;
+        return obj[this.#dataPath];
+    }
+    // Utility to set value by path string (returns a new object)
+    #setByDataPath(value) {
+        if (!this.#dataPath)
+            return value;
+        const data = this.#context?.getData();
+        if (!data)
+            throw new Error("No data in context");
+        return {
+            ...data,
+            [this.#dataPath]: { ...data[this.#dataPath], ...value },
+        };
+    }
+    #removeValidator(alias) {
+        const index = this.#validators.findIndex((x) => this.#aliasComparison(x.key, alias));
+        if (index === -1)
+            return;
+        const validator = this.#validators[index].validator;
+        this.#validators.splice(index, 1);
+        this.#validationContext?.removeValidator(validator);
+        validator.destroy();
+    }
+    #addValidator(alias) {
+        const existing = this.#validators.find((x) => x.key === alias);
+        if (existing)
+            return;
+        const property = this.properties.find((x) => this.#aliasComparison(x.alias, alias));
+        if (!property || !property.validation)
+            return;
+        const validator = new UePropertyValueValidatorController(this, property);
+        this.#validators.push({ key: alias, validator });
+    }
+    // model alias is not always camelCase, might be PascalCase.
+    // always compare to lower case
+    #aliasComparison(a, b) {
+        return a.toLowerCase() === b.toLowerCase();
+    }
+    #camel(str) {
+        return str[0].toLowerCase() + str.slice(1);
+    }
+    #setItems() {
+        const propertyKeys = Object.keys(this.#optionGenerators);
+        if (!propertyKeys.length)
+            return;
+        propertyKeys.forEach((key) => {
+            const items = this.#optionGenerators[key](this.data);
+            let property = this.properties?.find((x) => this.#aliasComparison(x.alias, key));
+            if (!property)
+                return;
+            if (property.config === undefined) {
+                property.config = [];
+            }
+            property = {
+                ...property,
+                ...{
+                    config: appendToFrozenArray(property.config, { alias: "items", value: items }, (x) => this.#aliasComparison(x.alias, "items")),
+                },
+            };
+            this.properties = appendToFrozenArray(this.properties ?? [], property, (x) => this.#aliasComparison(x.alias, key));
+        });
+    }
+    #mapValues() {
+        this.value = this.properties.map((prop) => {
+            const alias = this.#camel(prop.alias);
+            const value = this.data?.[alias];
+            return {
+                alias,
+                value: value !== undefined ? prop.valueIn?.(value) ?? value : value,
+            };
+        });
+        this.#hostElm?.requestUpdate?.();
+    }
+    #renderEditor(prop) {
+        if (!prop.editor)
+            return;
+        const alias = this.#camel(prop.alias);
+        // if visibility check fails, we can leave
+        if (prop.visible && this.data) {
+            const propertyValue = this.data[this.#camel(prop.visible.alias)];
+            if (prop.visible.value !== undefined &&
+                propertyValue !== prop.visible.value) {
+                this.#removeValidator(prop.alias);
+                return;
+            }
+            if (prop.visible.oneOf?.length &&
+                !prop.visible.oneOf?.includes(propertyValue)) {
+                this.#removeValidator(prop.alias);
+                return;
+            }
+        }
+        this.#addValidator(prop.alias);
+        const labelKey = typeof prop.labelKey === "function"
+            ? prop.labelKey(this.data)
+            : prop.labelKey ?? alias;
+        const dataPath = `$.values[${UmbDataPathPropertyValueQuery({
+            alias: prop.alias,
+        })}].value`;
+        const editor = typeof prop.editor === "string" ? prop.editor : prop.editor(this.data);
+        return html `<umb-property
+      .dataPath=${dataPath}
+      alias=${alias}
+      label=${this.localize.term(`engage_property_${labelKey}`)}
+      .description=${prop.descriptionKey
+            ? this.localize.term(`engage_property_${prop.descriptionKey}`)
+            : undefined}
+      property-editor-ui-alias=${editor}
+      .config=${prop.config}
+      .appearance=${prop.appearance}
+      .validation=${prop.validation}
+    ></umb-property>`;
+    }
+    #getPropertyValue(obj) {
+        const map = this.properties?.find((x) => this.#aliasComparison(x.alias, obj.alias));
+        return map?.valueOut?.(obj.value) ?? obj.value;
+    }
+    #onValueChange(e) {
+        this.value = e.target.value;
+        const pending = this.value.reduce((acc, cur) => ({
+            ...acc,
+            [this.#camel(cur.alias)]: this.#getPropertyValue(cur),
+        }), {});
+        const updated = this.#setByDataPath(pending);
+        this.#context?.update(updated);
+    }
+    render() {
+        return html `<umb-property-dataset
+      @change=${(e) => this.#onValueChange(e)}
+      .value=${this.value}
+    >
+      ${repeat(this.properties, (p) => p.alias, (p) => this.#renderEditor(p))}
+    </umb-property-dataset>`;
+    }
+    destroy() {
+        this.#validators.forEach((v) => v.validator.destroy());
+        super.destroy();
+    }
+}

package/dist/core/property/property-value-validator.controller.d.ts

@@ -0,0 +1,13 @@
+import type { UePropertyConfig } from "./types.js";
+import { UmbControllerBase } from "@umbraco-cms/backoffice/class-api";
+import type { UmbControllerHost } from "@umbraco-cms/backoffice/controller-api";
+import { type UmbValidator } from "@umbraco-cms/backoffice/validation";
+export declare class UePropertyValueValidatorController<DataModelType> extends UmbControllerBase implements UmbValidator {
+    #private;
+    get isValid(): boolean;
+    get alias(): string | undefined;
+    constructor(host: UmbControllerHost, propertyConfig: UePropertyConfig<DataModelType>);
+    validate(): Promise<void>;
+    reset(): void;
+    focusFirstInvalidElement(): void;
+}