@umbraco-engage/backoffice 17.0.0-rc1

package/dist/core/components/screen/tabbed-layout.element.js

@@ -0,0 +1,291 @@
+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 { createExtensionElement } from "@umbraco-cms/backoffice/extension-api";
+import { umbExtensionsRegistry } from "@umbraco-cms/backoffice/extension-registry";
+import { css, customElement, html, repeat, state, when, } from "@umbraco-cms/backoffice/external/lit";
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+import { observeMultiple, } from "@umbraco-cms/backoffice/observable-api";
+import { encodeFolderName, } from "@umbraco-cms/backoffice/router";
+import { UMB_SECTION_CONTEXT } from "@umbraco-cms/backoffice/section";
+import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from "@umbraco-cms/backoffice/document";
+import { ENGAGE_CONTEXT } from "../../context/index.js";
+import { ENGAGE_DOCUMENT_TYPE_PERMISSIONS_CONDITION_ALIAS } from "../../conditions/constants.js";
+import { ENGAGE_FEATURE_ABTESTING, ENGAGE_FEATURE_ANALYTICS, ENGAGE_FEATURE_PERSONALIZATION, ENGAGE_FEATURE_PROFILES, ENGAGE_FEATURE_REPORTING, ENGAGE_FEATURE_SETTINGS, } from "../../constants.js";
+import { ENGAGE_SCREEN_AB_TESTING, ENGAGE_SCREEN_ANALYTICS, ENGAGE_SCREEN_PERSONALIZATION, ENGAGE_SCREEN_PROFILES, ENGAGE_SCREEN_REPORTING, ENGAGE_SCREEN_SETTINGS, ENGAGE_SCREEN_START_PAGE, } from "./constants.js";
+const elementName = "ue-tabbed-layout";
+const SCREEN_PERMISSION_MAP = {
+    [ENGAGE_SCREEN_AB_TESTING]: ENGAGE_FEATURE_ABTESTING,
+    [ENGAGE_SCREEN_ANALYTICS]: ENGAGE_FEATURE_ANALYTICS,
+    [ENGAGE_SCREEN_PERSONALIZATION]: ENGAGE_FEATURE_PERSONALIZATION,
+    [ENGAGE_SCREEN_PROFILES]: ENGAGE_FEATURE_PROFILES,
+    [ENGAGE_SCREEN_REPORTING]: ENGAGE_FEATURE_REPORTING,
+    [ENGAGE_SCREEN_SETTINGS]: ENGAGE_FEATURE_SETTINGS,
+};
+let UeTabbedScreenLayoutElement = class UeTabbedScreenLayoutElement extends UmbLitElement {
+    #engageContext;
+    #sectionContext;
+    #documentWorkspaceContext;
+    #manifestObserver;
+    #init;
+    constructor() {
+        super();
+        this._routes = [];
+        this._manifests = [];
+        this.#init = Promise.all([
+            this.consumeContext(ENGAGE_CONTEXT, (context) => {
+                if (!context)
+                    return;
+                this.#engageContext = context;
+            }).asPromise(),
+            this.consumeContext(UMB_SECTION_CONTEXT, (context) => {
+                if (!context)
+                    return;
+                this.#sectionContext = context;
+            }).asPromise(),
+        ]);
+        // Consume document workspace context when available
+        this.consumeContext(UMB_DOCUMENT_WORKSPACE_CONTEXT, (context) => {
+            this.#documentWorkspaceContext = context;
+        });
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        await this.#init;
+        if (!this.#engageContext || !this.#sectionContext)
+            return;
+        this.observe(observeMultiple([
+            this.#engageContext.licensedFeatures,
+            this.#sectionContext.pathname,
+            this.#engageContext.userGroupPermissions,
+        ]), ([licensedFeatures, pathname, userGroupPermissions]) => {
+            if (!licensedFeatures || !pathname || !userGroupPermissions)
+                return;
+            this._licensedFeatures = licensedFeatures;
+            this._userPermission = userGroupPermissions;
+            this.#manifestObserver?.destroy();
+            if (pathname !== "engage" && pathname !== "content")
+                return;
+            this._context = pathname;
+            this.#observeExtensions();
+        });
+    }
+    #observeExtensions() {
+        this.#manifestObserver = this.observe(umbExtensionsRegistry.byTypeAndFilter("engageScreenElement", (x) => x.for ===
+            (this._context === "content"
+                ? this.localName
+                : this.manifest?.elementName)), (manifests) => {
+            // we manage a mix of filtering by workspace, and setting disabled state based on
+            // the licensed features. This prevents using conditions as we still need to render the disabled tabs,
+            // but do so without setting a route for the tab.
+            this._manifests = manifests
+                .filter((x) => this.#permittedByWorkspace(x))
+                .map((x) => {
+                this.#permittedByLicense(x);
+                this.#permittedByUserGroupPermission(x);
+                this.#permittedByDocumentTypePermission(x);
+                return x;
+            });
+            if (!this._manifests.length)
+                return;
+            this.#createRoutes();
+        }, "_engageSectionScreenManifestsObserver");
+    }
+    #createRoutes() {
+        const routes = this._manifests
+            .filter((m) => m.meta.enabled)
+            .map((m) => ({
+            path: encodeFolderName(m.meta.pathname),
+            component: () => createExtensionElement(m),
+            setup: (component) => {
+                component.manifest = m;
+            },
+        }));
+        if (routes.length !== 0) {
+            routes.push({
+                path: "",
+                redirectTo: routes[0].path,
+            });
+            routes.push({
+                path: `**`,
+                component: async () => (await import("@umbraco-cms/backoffice/router"))
+                    .UmbRouteNotFoundElement,
+            });
+        }
+        this._routes = routes;
+    }
+    render() {
+        return this.renderTabs();
+    }
+    #permittedByWorkspace(manifest) {
+        if (manifest.workspace === "any")
+            return true;
+        return ((this._context === "content" && manifest.workspace === "document") ||
+            (this._context === "engage" && manifest.workspace !== "document"));
+    }
+    #permittedByUserGroupPermission(manifest) {
+        if (this._context !== "engage")
+            return;
+        const requiredFeature = SCREEN_PERMISSION_MAP[manifest.alias];
+        if (requiredFeature) {
+            manifest.meta.enabled = this._userPermission?.[requiredFeature] ?? false;
+        }
+    }
+    #permittedByDocumentTypePermission(manifest) {
+        // Only check document type permissions for content context (document workspace)
+        if (this._context !== "content" || !manifest.conditions || !this.#engageContext)
+            return;
+        // Find document type permission conditions
+        const docTypeCondition = manifest.conditions.find((condition) => condition.alias === ENGAGE_DOCUMENT_TYPE_PERMISSIONS_CONDITION_ALIAS);
+        if (!docTypeCondition)
+            return;
+        // Get current document type from workspace context
+        const contentType = this.#documentWorkspaceContext?.structure.getOwnerContentType();
+        const documentTypeName = contentType?.name ?? "";
+        // Use the existing permission check logic from engageContext
+        const hasPermission = this.#engageContext.getDocumentTypePermission(documentTypeName, docTypeCondition.match);
+        if (!hasPermission) {
+            manifest.meta.enabled = false;
+        }
+    }
+    #permittedByLicense(manifest) {
+        const featureAnalyticsEnabled = this._licensedFeatures?.[ENGAGE_FEATURE_ANALYTICS] ?? false;
+        const aliasStartsWith = (prefix) => manifest.alias?.startsWith(prefix) ?? false;
+        // Always permitted
+        if (aliasStartsWith(ENGAGE_SCREEN_START_PAGE) ||
+            aliasStartsWith(ENGAGE_SCREEN_SETTINGS)) {
+            manifest.meta.enabled = true;
+            return;
+        }
+        // Requires analytics
+        if (aliasStartsWith(ENGAGE_SCREEN_ANALYTICS) ||
+            aliasStartsWith(ENGAGE_SCREEN_PROFILES)) {
+            manifest.meta.enabled = featureAnalyticsEnabled;
+            return;
+        }
+        // Requires personalization + analytics
+        if (aliasStartsWith(ENGAGE_SCREEN_PERSONALIZATION) ||
+            aliasStartsWith(ENGAGE_SCREEN_REPORTING)) {
+            manifest.meta.enabled =
+                (this._licensedFeatures?.[ENGAGE_FEATURE_PERSONALIZATION] &&
+                    featureAnalyticsEnabled) ??
+                    false;
+            return;
+        }
+        // Requires AB testing + analytics
+        if (aliasStartsWith(ENGAGE_SCREEN_AB_TESTING)) {
+            manifest.meta.enabled =
+                (this._licensedFeatures?.[ENGAGE_FEATURE_ABTESTING] &&
+                    featureAnalyticsEnabled) ??
+                    false;
+            return;
+        }
+        manifest.meta.enabled = false;
+    }
+    // default value is "secondary" because we don't control the rendering of the top-level tab element, but
+    // do have control of the nested tabs. The nested tabs use the default tab styles, which we request by setting the parameter
+    renderTabs(look = "secondary") {
+        if (!this._context)
+            return;
+        return html `<ue-body-layout
+      header-fit-height
+      main-no-padding
+      look=${look}
+      context=${this._context}
+    >
+      <uui-tab-group slot="header">
+        ${repeat(this._manifests, (manifest) => manifest, (manifest) => {
+            const path = this._routerPath + "/" + encodeFolderName(manifest.meta.pathname);
+            return html `<uui-tab
+              label=${this.localize.string(manifest.meta.label)}
+              ?active=${path === this._activePath}
+              ?disabled=${manifest.meta.enabled !== true}
+              class=${manifest.meta.enabled ? "" : "hide"}
+              href=${path}
+              look=${look}
+              ><div>
+                <!-- ${when(manifest.meta.icon, () => html ` <umb-icon .name=${manifest.meta.icon}></umb-icon>`)} -->
+                ${this.localize.string(manifest.meta.label)}
+              </div></uui-tab
+            >`;
+        })}
+      </uui-tab-group>
+      <umb-router-slot
+        .routes=${this._routes}
+        @init=${(event) => {
+            this._routerPath = event.target.absoluteRouterPath;
+        }}
+        @change=${(event) => {
+            this._activePath = event.target.absoluteActiveViewPath || "";
+        }}
+      >
+      </umb-router-slot>
+    </ue-body-layout>`;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.#manifestObserver?.destroy();
+    }
+    static { this.styles = [
+        css `
+      uui-tab.hide {
+        display: none;
+      }
+
+      uui-tab[look="secondary"] {
+        --uui-tab-text: white;
+      }
+
+      /* uui-tab[look="secondary"] div {
+        display: flex;
+        gap: var(--uui-size-3);
+      } */
+
+      uui-tab[look="secondary"]:hover,
+      uui-tab[active][look="secondary"]:hover {
+        --uui-color-current: transparent;
+        --uui-tab-text-hover: var(--uui-palette-spanish-pink);
+      }
+
+      uui-tab[active][look="secondary"] {
+        --uui-color-current: transparent;
+        --uui-color-current-emphasis: transparent;
+        color: var(--uui-palette-spanish-pink);
+        background: var(--engage-color-tab-active);
+      }
+
+      uui-tab[active][look="default"] {
+        --uui-color-current: var(--uui-palette-spanish-pink);
+      }
+    `,
+    ]; }
+};
+__decorate([
+    state()
+], UeTabbedScreenLayoutElement.prototype, "_routes", void 0);
+__decorate([
+    state()
+], UeTabbedScreenLayoutElement.prototype, "_routerPath", void 0);
+__decorate([
+    state()
+], UeTabbedScreenLayoutElement.prototype, "_activePath", void 0);
+__decorate([
+    state()
+], UeTabbedScreenLayoutElement.prototype, "_manifests", void 0);
+__decorate([
+    state()
+], UeTabbedScreenLayoutElement.prototype, "_context", void 0);
+__decorate([
+    state()
+], UeTabbedScreenLayoutElement.prototype, "_licensedFeatures", void 0);
+__decorate([
+    state()
+], UeTabbedScreenLayoutElement.prototype, "_userPermission", void 0);
+UeTabbedScreenLayoutElement = __decorate([
+    customElement(elementName)
+], UeTabbedScreenLayoutElement);
+export { UeTabbedScreenLayoutElement };
+export default UeTabbedScreenLayoutElement;

package/dist/core/components/sidebar-layout.element.d.ts

@@ -0,0 +1,12 @@
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+declare const elementName = "ue-sidebar-layout";
+export declare class UeSidebarLayoutElement extends UmbLitElement {
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UeSidebarLayoutElement;
+    }
+}
+export {};

package/dist/core/components/sidebar-layout.element.js

@@ -0,0 +1,57 @@
+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 } from "@umbraco-cms/backoffice/external/lit";
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+const elementName = "ue-sidebar-layout";
+let UeSidebarLayoutElement = class UeSidebarLayoutElement extends UmbLitElement {
+    render() {
+        return html ` <slot name="sidebar" id="sidebar"></slot>
+      <div id="main"><slot></slot></div>`;
+    }
+    static { this.styles = [
+        css `
+      :host {
+        display: flex;
+        flex-direction: var(--sidebar-layout-direction, column);
+        padding: var(--sidebar-layout-padding, var(--uui-size-space-6));
+        gap: var(--sidebar-layout-gap, var(--uui-size-space-6));
+        max-width: var(--sidebar-layout-maxwidth, none);
+        margin: var(--sidebar-layout-margin, 0);
+      }
+
+      :host([no-sidebar]) #sidebar {
+        display: none;
+      }
+
+      #main {
+        flex: 1;
+      }
+
+      ::slotted(*) {
+        width: 100%;
+      }
+
+      @media (min-width: 992px) {
+        :host {
+          flex-direction: var(--sidebar-layout-direction, row);
+        }
+
+        #sidebar {
+          display: flex;
+          position: sticky;
+          top: var(--sidebar-layout-sidebar-top, var(--uui-size-space-6));
+          flex: 1 0 var(--sidebar-layout-width, 350px);
+          max-width: var(--sidebar-layout-width, 350px);
+        }
+      }
+    `,
+    ]; }
+};
+UeSidebarLayoutElement = __decorate([
+    customElement(elementName)
+], UeSidebarLayoutElement);
+export { UeSidebarLayoutElement };

package/dist/core/components/tooltip/tooltip-element.d.ts

@@ -0,0 +1,16 @@
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+declare const elementName = "ue-tooltip";
+export declare class UeTooltipElement extends UmbLitElement {
+    #private;
+    hint: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UeTooltipElement;
+    }
+}
+export {};

package/dist/core/components/tooltip/tooltip-element.js

@@ -0,0 +1,79 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, customElement, html, property, } from "@umbraco-cms/backoffice/external/lit";
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+const elementName = "ue-tooltip";
+let UeTooltipElement = class UeTooltipElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        this.hint = false;
+        this.#boundHandlers = {
+            mouseover: () => this.#host?.showPopover?.(),
+            mouseout: () => this.#host?.hidePopover?.(),
+            focus: () => this.#host?.showPopover?.(),
+            blur: () => this.#host?.hidePopover?.(),
+        };
+    }
+    #trigger;
+    #host;
+    #boundHandlers;
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.hint)
+            return;
+        this.#bindListeners();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.#unbindListeners();
+    }
+    #bindListeners() {
+        this.#trigger = this.getHostElement().closest("[popovertarget]") ?? undefined;
+        this.#host = this.getHostElement().closest("uui-popover-container") ?? undefined;
+        if (!this.#trigger || !this.#host) {
+            console.warn("UeTooltipElement[hint] requires a uui-popover-container and a popovertarget element to function properly.");
+            return;
+        }
+        this.#trigger.addEventListener("mouseover", this.#boundHandlers.mouseover);
+        this.#trigger.addEventListener("mouseout", this.#boundHandlers.mouseout);
+        this.#trigger.addEventListener("focus", this.#boundHandlers.focus);
+        this.#trigger.addEventListener("blur", this.#boundHandlers.blur);
+    }
+    #unbindListeners() {
+        if (!this.#trigger)
+            return;
+        this.#trigger.removeEventListener("mouseover", this.#boundHandlers.mouseover);
+        this.#trigger.removeEventListener("mouseout", this.#boundHandlers.mouseout);
+        this.#trigger.removeEventListener("focus", this.#boundHandlers.focus);
+        this.#trigger.removeEventListener("blur", this.#boundHandlers.blur);
+        // Clear references
+        this.#trigger = undefined;
+        this.#host = undefined;
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+    static { this.styles = css `
+    :host {
+      display: block;
+      max-width: 300px;
+      background: var(--engage-color-tab-active);
+      color: white;
+      padding: var(--uui-size-3);
+      border-radius: var(--uui-border-radius);
+      box-shadow: var(--uui-shadow-depth-4);
+      line-height: 1.5;
+    }
+  `; }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UeTooltipElement.prototype, "hint", void 0);
+UeTooltipElement = __decorate([
+    customElement(elementName)
+], UeTooltipElement);
+export { UeTooltipElement };

package/dist/core/components/variant-pickers/index.d.ts

@@ -0,0 +1,13 @@
+export * from "./variant-content-picker.element.js";
+export * from "./variant-content-type-picker.element.js";
+export * from "./variant-picker-base.element.js";
+export interface UeVariantDocumentPickerModel {
+    id: number;
+    unique: string;
+    culture?: string;
+}
+export interface UeVariantDocumentTypePickerModel {
+    id: number;
+    contentTypeId: number;
+    culture?: string;
+}

package/dist/core/components/variant-pickers/index.js

@@ -0,0 +1,3 @@
+export * from "./variant-content-picker.element.js";
+export * from "./variant-content-type-picker.element.js";
+export * from "./variant-picker-base.element.js";

package/dist/core/components/variant-pickers/variant-content-picker.element.d.ts

@@ -0,0 +1,16 @@
+import { type UmbPropertyEditorUiElement } from "@umbraco-cms/backoffice/property-editor";
+import { UeVariantPickerBaseElement } from "./variant-picker-base.element.js";
+import type { UeVariantDocumentPickerModel } from "./index.js";
+declare const elementName = "ue-variant-content-picker";
+export declare class UeVariantContentPickerElement extends UeVariantPickerBaseElement<UeVariantDocumentPickerModel> implements UmbPropertyEditorUiElement {
+    onValueUpdated(): void;
+    onSelectionChange(e: Event): void;
+    renderPicker(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+export default UeVariantContentPickerElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UeVariantContentPickerElement;
+    }
+}

package/dist/core/components/variant-pickers/variant-content-picker.element.js

@@ -0,0 +1,61 @@
+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 } from "@umbraco-cms/backoffice/external/lit";
+import { partialUpdateFrozenArray } from "@umbraco-cms/backoffice/observable-api";
+import { UmbChangeEvent } from "@umbraco-cms/backoffice/event";
+import { UeVariantPickerBaseElement } from "./variant-picker-base.element.js";
+const elementName = "ue-variant-content-picker";
+let UeVariantContentPickerElement = class UeVariantContentPickerElement extends UeVariantPickerBaseElement {
+    onValueUpdated() { }
+    // We have to be careful here: it's possible some umbracopagevariants have already been picked (and have an id).
+    // Instead of of discarding them update the picked umbracopagevariants instead (find them by unique)
+    onSelectionChange(e) {
+        const selection = e.target.selection;
+        // remove any no longer selected
+        this.value?.forEach((v, i) => {
+            if (selection.indexOf(v.unique) === -1) {
+                this.value = [...this.value.slice(0, i), ...this.value.slice(i + 1)];
+            }
+        });
+        selection.forEach((unique) => {
+            const existingIdx = this.value?.findIndex((x) => x.unique === unique);
+            if (existingIdx !== -1) {
+                this.value = partialUpdateFrozenArray(this.value ?? [], { culture: this.culture }, (x) => x.unique === unique);
+            }
+            else {
+                this.value = [
+                    ...(this.value ?? []),
+                    {
+                        id: 0,
+                        unique,
+                        culture: this.culture,
+                    },
+                ];
+            }
+        });
+        this.dispatchEvent(new UmbChangeEvent());
+    }
+    renderPicker() {
+        return html `
+      <umb-input-document
+        .value=${this.value?.map((x) => x.unique)?.join(",")}
+        @change=${this.onSelectionChange}
+      ></umb-input-document>
+    `;
+    }
+    static { this.styles = css `
+    umb-input-document {
+      margin-top: var(--uui-size-3);
+      display: block;
+    }
+  `; }
+};
+UeVariantContentPickerElement = __decorate([
+    customElement(elementName)
+], UeVariantContentPickerElement);
+export { UeVariantContentPickerElement };
+export default UeVariantContentPickerElement;

package/dist/core/components/variant-pickers/variant-content-type-picker.element.d.ts

@@ -0,0 +1,18 @@
+import { type UmbPropertyEditorUiElement } from "@umbraco-cms/backoffice/property-editor";
+import { UeVariantPickerBaseElement } from "./variant-picker-base.element.js";
+import type { UeVariantDocumentTypePickerModel } from "../../index.js";
+declare const elementName = "ue-variant-content-type-picker";
+export declare class UeVariantContentTypePickerElement extends UeVariantPickerBaseElement<UeVariantDocumentTypePickerModel> implements UmbPropertyEditorUiElement {
+    private _documentTypeOptions;
+    onValueUpdated(): void;
+    connectedCallback(): Promise<void>;
+    onSelectionChange(e: Event): void;
+    renderPicker(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+export default UeVariantContentTypePickerElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UeVariantContentTypePickerElement;
+    }
+}

package/dist/core/components/variant-pickers/variant-content-type-picker.element.js

@@ -0,0 +1,87 @@
+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, when, } from "@umbraco-cms/backoffice/external/lit";
+import { partialUpdateFrozenArray } from "@umbraco-cms/backoffice/observable-api";
+import { UmbChangeEvent } from "@umbraco-cms/backoffice/event";
+import { UeVariantPickerBaseElement } from "./variant-picker-base.element.js";
+import { DocumentTypePermissionsService, } from "../../../generated/index.js";
+const elementName = "ue-variant-content-type-picker";
+let UeVariantContentTypePickerElement = class UeVariantContentTypePickerElement extends UeVariantPickerBaseElement {
+    constructor() {
+        super(...arguments);
+        this._documentTypeOptions = [];
+    }
+    onValueUpdated() { }
+    async connectedCallback() {
+        super.connectedCallback();
+        const documentTypeOptions = await DocumentTypePermissionsService.getPermissionsDocumentTypeAll();
+        this._documentTypeOptions = documentTypeOptions.data.filter((x) => x.allowAbTesting);
+    }
+    // We have to be careful here: it's possible some umbracopagevariants have already been picked (and have an id).
+    // Instead of of discarding them update the picked umbracopagevariants instead (find them by nodeId)
+    onSelectionChange(e) {
+        const selection = Number(e.target.value);
+        const checked = e.target.checked;
+        // remove any no longer selected
+        if (!checked && this.value?.length) {
+            this.value.forEach((v, i) => {
+                if (selection === v.contentTypeId) {
+                    this.value = [
+                        ...this.value.slice(0, i),
+                        ...this.value.slice(i + 1),
+                    ];
+                }
+            });
+            return;
+        }
+        const existingIdx = this.value?.findIndex((x) => x.contentTypeId === selection);
+        if (existingIdx !== -1) {
+            this.value = partialUpdateFrozenArray(this.value ?? [], { culture: this.culture }, (x) => x.contentTypeId === selection);
+        }
+        else {
+            this.value = [
+                ...(this.value ?? []),
+                {
+                    id: 0,
+                    contentTypeId: selection,
+                    culture: this.culture,
+                },
+            ];
+        }
+        this.dispatchEvent(new UmbChangeEvent());
+    }
+    renderPicker() {
+        return html `
+      ${when(this._documentTypeOptions.length, () => html `<div id="wrapper">
+            ${this._documentTypeOptions.map((type) => html `<ue-checkbox
+                  @change=${this.onSelectionChange}
+                  .value=${type.contentTypeId.toString()}
+                  .label=${type.contentTypeName ?? ""}
+                  ?checked=${this.value?.some((x) => x.contentTypeId === type.contentTypeId)}
+                ></ue-checkbox>`)}
+          </div>`, () => html `<p>${this.emptyMessage}</p>`)}
+    `;
+    }
+    static { this.styles = css `
+    #wrapper {
+      height: 300px;
+      margin-top: var(--uui-size-3);
+      overflow-y: scroll;
+      display: flex;
+      flex-direction: column;
+      gap: var(--uui-size-1);
+    }
+  `; }
+};
+__decorate([
+    state()
+], UeVariantContentTypePickerElement.prototype, "_documentTypeOptions", void 0);
+UeVariantContentTypePickerElement = __decorate([
+    customElement(elementName)
+], UeVariantContentTypePickerElement);
+export { UeVariantContentTypePickerElement };
+export default UeVariantContentTypePickerElement;