@umbraco-engage/backoffice 17.0.0-rc1

package/dist/profiles/activity-tracker/components/session-specs/profile-session-specs.element.d.ts

@@ -0,0 +1,18 @@
+import { type TemplateResult } from "@umbraco-cms/backoffice/external/lit";
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+import type { ProfileSessionDtoModel } from "../../../../generated/index.js";
+declare const elementName = "ue-profile-session-specs";
+export declare class UeProfileDetailsActivitySessionSpecsElement extends UmbLitElement {
+    #private;
+    set session(value: ProfileSessionDtoModel | null | undefined);
+    get session(): ProfileSessionDtoModel | null | undefined;
+    ipAddress?: string;
+    render(): TemplateResult<1> | undefined;
+    static styles: import("lit").CSSResult[];
+}
+export default UeProfileDetailsActivitySessionSpecsElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UeProfileDetailsActivitySessionSpecsElement;
+    }
+}

package/dist/profiles/activity-tracker/components/session-specs/profile-session-specs.element.js

@@ -0,0 +1,113 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, customElement, html, property, when, } from "@umbraco-cms/backoffice/external/lit";
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+const elementName = "ue-profile-session-specs";
+let UeProfileDetailsActivitySessionSpecsElement = class UeProfileDetailsActivitySessionSpecsElement extends UmbLitElement {
+    #session;
+    #operatingSystemClass = "";
+    set session(value) {
+        if (value === this.#session)
+            return;
+        this.#session = value;
+        this.#operatingSystemClass =
+            value?.wasAbTested || value?.wasPersonalized ? "active" : "";
+    }
+    get session() {
+        return this.#session;
+    }
+    #renderSpecItem(popoverName, iconName, label, value) {
+        return html `<div
+      popovertarget=${popoverName}
+      class="specs-item ${this.#operatingSystemClass}"
+    >
+      <uui-popover-container id=${popoverName}>
+        <ue-tooltip hint>${this.localize.term(label)}</ue-tooltip>
+      </uui-popover-container>
+      <div class="spec-details">
+        <uui-icon name=${iconName}></uui-icon>
+        ${value}
+      </div>
+    </div>`;
+    }
+    render() {
+        if (!this.session)
+            return;
+        return html `
+      ${when(this.session?.operatingSystemName, () => this.#renderSpecItem("osTooltip", "icon-device", "engage_profile_details_os", html `<strong>${this.session?.operatingSystemName}</strong>`))}
+      ${when(this.session?.browserName || this.session?.browserVersion, () => this.#renderSpecItem("browserTooltip", "icon-browser", "engage_profile_details_browser", html `<strong>
+            <span>${this.session?.browserName}</span>
+            <span>${this.session?.browserVersion}</span></strong
+          >`))}
+      ${when(this.ipAddress, () => this.#renderSpecItem("ipaddressTooltip", "icon-ip", "engage_profile_details_ipaddress", html `<strong>${this.ipAddress}</strong>`))}
+      ${when(this.session?.country ||
+            this.session?.city ||
+            this.session?.province ||
+            this.session?.county, () => this.#renderSpecItem("locationTooltip", "icon-location-map", "engage_profile_details_location", html `<strong>
+              <span>${this.session?.country}</span>
+              <span>${this.session?.city}</span>
+              <span>${this.session?.province}</span>
+              <span>${this.session?.county}</span></strong
+            >`))}
+    `;
+    }
+    static { this.styles = [
+        css `
+      :host {
+        display: flex;
+        flex-wrap: wrap;
+        --spec-item-background-color: #d9d9da;
+      }
+
+      .spec-details {
+        display: flex;
+        align-items: center;
+        gap: var(--uui-size-4);
+      }
+
+      .specs-item {
+        background: var(--spec-item-background-color);
+        border-radius: var(--uui-border-radius);
+        padding: var(--uui-size-3) var(--uui-size-5);
+        margin-right: var(--uui-size-3);
+        position: relative;
+
+        &::before {
+          position: absolute;
+          content: "";
+          width: var(--uui-size-8);
+          right: 100%;
+          top: 50%;
+          height: 4px;
+          background: var(--spec-item-background-color);
+          transform: translateY(-4px);
+        }
+      }
+
+      .active {
+        --uui-icon-color: #fff;
+        color: #fff;
+        background: var(--engage-color-default);
+
+        &::before {
+          background: var(--engage-color-default);
+        }
+      }
+    `,
+    ]; }
+};
+__decorate([
+    property({ type: Object })
+], UeProfileDetailsActivitySessionSpecsElement.prototype, "session", null);
+__decorate([
+    property()
+], UeProfileDetailsActivitySessionSpecsElement.prototype, "ipAddress", void 0);
+UeProfileDetailsActivitySessionSpecsElement = __decorate([
+    customElement(elementName)
+], UeProfileDetailsActivitySessionSpecsElement);
+export { UeProfileDetailsActivitySessionSpecsElement };
+export default UeProfileDetailsActivitySessionSpecsElement;

package/dist/profiles/activity-tracker/index.d.ts

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

package/dist/profiles/activity-tracker/index.js

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

package/dist/profiles/activity-tracker/profile-activity-base.element.d.ts

@@ -0,0 +1,6 @@
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+export declare abstract class UeProfileActivityBaseElement extends UmbLitElement {
+    protected renderSlicedUrl(url?: string | null): import("lit-html").TemplateResult<1>;
+    protected renderUrlToolipAndButton(id: string, labelKey: string, iconName: string, url?: string | null): import("lit-html").TemplateResult<1>;
+    protected toDateTime(secs?: number | null): string;
+}

package/dist/profiles/activity-tracker/profile-activity-base.element.js

@@ -0,0 +1,39 @@
+import { html, when } from "@umbraco-cms/backoffice/external/lit";
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+export class UeProfileActivityBaseElement extends UmbLitElement {
+    renderSlicedUrl(url) {
+        if (!url)
+            return html `<span>-</span>`;
+        if (url.includes("/umbraco/section/"))
+            return html `<span>Umbraco Backoffice</span>`;
+        const splittedUrl = url?.split("/");
+        const sliced = splittedUrl?.slice(3).join("/") ?? "";
+        return html `
+      <span>/${sliced}</span>
+      ${when(sliced.length > 35, () => html `<span>...</span>`)}
+    `;
+    }
+    renderUrlToolipAndButton(id, labelKey, iconName, url) {
+        return html `<uui-popover-container id=${id}>
+        <ue-tooltip hint> ${this.localize.term(labelKey)}: ${url} </ue-tooltip>
+      </uui-popover-container>
+      <uui-button
+        compact
+        href=${url ?? ""}
+        target="_blank"
+        label="Go to ${url}"
+      >
+        <uui-icon name=${iconName}></uui-icon>
+      </uui-button> `;
+    }
+    toDateTime(secs) {
+        if (!secs)
+            return "0:00:00";
+        const hours = Math.floor(secs / 3600);
+        const minutes = Math.floor((secs % 3600) / 60);
+        const seconds = Math.floor(secs % 60);
+        return `${hours}:${minutes.toString().padStart(2, "0")}:${seconds
+            .toString()
+            .padStart(2, "0")}`;
+    }
+}

package/dist/profiles/activity-tracker/ue-table.styles.d.ts

@@ -0,0 +1 @@
+export declare const UeTableStyles: import("lit").CSSResult;

package/dist/profiles/activity-tracker/ue-table.styles.js

@@ -0,0 +1,31 @@
+import { css } from "@umbraco-cms/backoffice/external/lit";
+export const UeTableStyles = css `
+  table {
+    border-collapse: collapse;
+    width: 100%;
+    border-spacing: 0;
+  }
+
+  .nested-parent {
+    padding: 0;
+    border-top-width: 0;
+  }
+
+  th,
+  td {
+    position: relative;
+    padding: 8px;
+    text-align: left;
+  }
+
+  .profile-table-type-holder {
+    min-width: 80px;
+    width: 80px;
+    box-sizing: border-box;
+  }
+
+  .profile-type-holder {
+    z-index: 2;
+    position: relative;
+  }
+`;

package/dist/profiles/collection/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const ENGAGE_PROFILES_COLLECTION_REPOSITORY_ALIAS = "Engage.Repository.Profiles.Collection";
+export declare const ENGAGE_PROFILES_COLLECTION_ALIAS = "Engage.Collection.Profiles";
+export declare const ENGAGE_PROFILE_TABLE_COLLECTION_VIEW_ALIAS = "Engage.CollectionView.Profile.Table";

package/dist/profiles/collection/constants.js

@@ -0,0 +1,3 @@
+export const ENGAGE_PROFILES_COLLECTION_REPOSITORY_ALIAS = "Engage.Repository.Profiles.Collection";
+export const ENGAGE_PROFILES_COLLECTION_ALIAS = "Engage.Collection.Profiles";
+export const ENGAGE_PROFILE_TABLE_COLLECTION_VIEW_ALIAS = "Engage.CollectionView.Profile.Table";

package/dist/profiles/collection/entities.d.ts

@@ -0,0 +1,8 @@
+import type { GetProfileOverviewRequestModel, ProfileResponseDtoModel } from "../../generated/index.js";
+export interface UeProfilesCollectionFilterModel extends GetProfileOverviewRequestModel {
+}
+export interface UeProfilesCollectionModel extends ProfileResponseDtoModel {
+    unique: string;
+    entityType: string;
+    name: string;
+}

package/dist/profiles/collection/entities.js

@@ -0,0 +1 @@
+export {};

package/dist/profiles/collection/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./repository/index.js";
+export * from "./entities.js";
+export * from "./modal/index.js";

package/dist/profiles/collection/index.js

@@ -0,0 +1,3 @@
+export * from "./repository/index.js";
+export * from "./entities.js";
+export * from "./modal/index.js";

package/dist/profiles/collection/manifests.d.ts

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

package/dist/profiles/collection/manifests.js

@@ -0,0 +1,20 @@
+import { ENGAGE_PROFILES_COLLECTION_ALIAS, ENGAGE_PROFILES_COLLECTION_REPOSITORY_ALIAS, } from "./constants.js";
+import { manifests as repositoryManifests } from "./repository/manifests.js";
+import { manifests as viewManifests } from "./views/manifests.js";
+import { manifests as modalManifests } from "./modal/manifests.js";
+export const manifests = [
+    {
+        type: "collection",
+        kind: "default",
+        alias: ENGAGE_PROFILES_COLLECTION_ALIAS,
+        name: "Engage Profiles Collection",
+        api: () => import("./profiles-collection.context.js"),
+        element: () => import("./profiles-collection.element.js"),
+        meta: {
+            repositoryAlias: ENGAGE_PROFILES_COLLECTION_REPOSITORY_ALIAS,
+        },
+    },
+    ...repositoryManifests,
+    ...viewManifests,
+    ...modalManifests,
+];

package/dist/profiles/collection/modal/entities.d.ts

@@ -0,0 +1,3 @@
+import type { UeProfilesCollectionFilterModel } from "../entities.js";
+import { type UePropertyConfigData } from "../../../core/index.js";
+export declare const ProfilesCollectionModalFilterProperties: UePropertyConfigData<UeProfilesCollectionFilterModel>;

package/dist/profiles/collection/modal/entities.js

@@ -0,0 +1,26 @@
+import { UeDropdownUePropertyConfig, } from "../../../core/index.js";
+export const ProfilesCollectionModalFilterProperties = [
+    {
+        alias: "isUnidentified",
+        editor: "Umb.PropertyEditorUi.Toggle",
+        labelKey: "excludeUnidentifiedProfiles",
+    },
+    {
+        alias: "isIdentified",
+        editor: "Umb.PropertyEditorUi.Toggle",
+        labelKey: "excludeIdentifiedProfiles",
+    },
+    {
+        alias: "isHighPotential",
+        editor: "Umb.PropertyEditorUi.Toggle",
+        labelKey: "excludeHighPotentialProfiles",
+    },
+    { alias: "minimumCompletedGoals", editor: "Umb.PropertyEditorUi.Integer" },
+    { alias: "minimumGoalValue", editor: "Umb.PropertyEditorUi.Integer" },
+    {
+        alias: "activeRange",
+        editor: "Engage.PropertyEditorUi.DateRangePicker",
+    },
+    new UeDropdownUePropertyConfig("segmentId", false),
+    { alias: "identifiedName", editor: "Umb.PropertyEditorUi.TextBox" },
+];

package/dist/profiles/collection/modal/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./profiles-collection-filter-modal.element.js";
+export * from "./profiles-collection-filter-modal.token.js";

package/dist/profiles/collection/modal/index.js

@@ -0,0 +1,2 @@
+export * from "./profiles-collection-filter-modal.element.js";
+export * from "./profiles-collection-filter-modal.token.js";

package/dist/profiles/collection/modal/manifests.d.ts

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

package/dist/profiles/collection/modal/manifests.js

@@ -0,0 +1,9 @@
+import { ENGAGE_PROFILES_COLLECTION_FILTER_MODAL_ALIAS } from "./profiles-collection-filter-modal.token.js";
+export const manifests = [
+    {
+        type: "modal",
+        alias: ENGAGE_PROFILES_COLLECTION_FILTER_MODAL_ALIAS,
+        name: "Engage Profiles Collection Filter Modal",
+        js: () => import("./profiles-collection-filter-modal.element.js"),
+    },
+];

package/dist/profiles/collection/modal/profiles-collection-filter-modal.element.d.ts

@@ -0,0 +1,17 @@
+import { UmbModalBaseElement } from "@umbraco-cms/backoffice/modal";
+import type { UmbPropertyValueData } from "@umbraco-cms/backoffice/property";
+import type { UeProfilesCollectionFilterModalData, UeProfilesCollectionFilterModalResult } from "./profiles-collection-filter-modal.token.js";
+declare const elementName = "ue-profiles-collection-filter-modal";
+export declare class UeProfilesCollectionFilterModalElement extends UmbModalBaseElement<UeProfilesCollectionFilterModalData, UeProfilesCollectionFilterModalResult> {
+    #private;
+    private _filterRenderer?;
+    valueset: Array<UmbPropertyValueData>;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+}
+export default UeProfilesCollectionFilterModalElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UeProfilesCollectionFilterModalElement;
+    }
+}

package/dist/profiles/collection/modal/profiles-collection-filter-modal.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 { customElement, html, state, } from "@umbraco-cms/backoffice/external/lit";
+import { UmbModalBaseElement } from "@umbraco-cms/backoffice/modal";
+import { ENGAGE_PROFILES_COLLECTION_CONTEXT } from "../profiles-collection.context-token.js";
+import { ProfilesCollectionModalFilterProperties } from "./entities.js";
+import { UePropertyDataSetRendererController } from "../../../core/index.js";
+const elementName = "ue-profiles-collection-filter-modal";
+let UeProfilesCollectionFilterModalElement = class UeProfilesCollectionFilterModalElement extends UmbModalBaseElement {
+    #collectionContext;
+    #segments;
+    constructor() {
+        super();
+        this.valueset = [];
+        this.#segments = [];
+        this.consumeContext(ENGAGE_PROFILES_COLLECTION_CONTEXT, (context) => {
+            this.#collectionContext = context;
+            this.observe(this.#collectionContext?.segments, (segments) => {
+                if (!segments)
+                    return;
+                this.#segments = segments;
+                this.#setRenderer();
+            });
+        });
+    }
+    #setRenderer() {
+        this._filterRenderer = new UePropertyDataSetRendererController(this, ENGAGE_PROFILES_COLLECTION_CONTEXT, ProfilesCollectionModalFilterProperties).withItems("segmentId", (entity) => this.#segments?.map((s, idx) => ({
+            name: s.name,
+            value: s.unique,
+            selected: s.unique === entity?.segmentId?.toString() ||
+                (this.#segments.length === 1 && idx === 0),
+        })) ?? []);
+    }
+    #reset() {
+        if (!this._filterRenderer)
+            return;
+        const value = this._filterRenderer.value.map((v) => ({
+            alias: v.alias,
+            value: undefined,
+        }));
+        this.#collectionContext?.update(Object.fromEntries(value.map((v) => [v.alias, v.value])));
+    }
+    #submitModal() {
+        const value = this.#collectionContext?.getData() ?? {};
+        this.updateValue(value);
+        this._submitModal();
+    }
+    render() {
+        return html `<umb-body-layout
+      .headline=${this.localize.term("engage_filter")}
+    >
+      <uui-box> ${this._filterRenderer?.render()} </uui-box>
+      <div slot="actions">
+        <uui-button
+          label=${this.localize.term("general_close")}
+          @click=${this._rejectModal}
+        ></uui-button>
+        <uui-button
+          look="secondary"
+          label=${this.localize.term("engage_reset")}
+          @click=${this.#reset}
+        ></uui-button>
+        <uui-button
+          color="positive"
+          look="primary"
+          label=${this.localize.term("general_submit")}
+          @click=${this.#submitModal}
+        ></uui-button>
+      </div>
+    </umb-body-layout>`;
+    }
+};
+__decorate([
+    state()
+], UeProfilesCollectionFilterModalElement.prototype, "_filterRenderer", void 0);
+__decorate([
+    state()
+], UeProfilesCollectionFilterModalElement.prototype, "valueset", void 0);
+UeProfilesCollectionFilterModalElement = __decorate([
+    customElement(elementName)
+], UeProfilesCollectionFilterModalElement);
+export { UeProfilesCollectionFilterModalElement };
+export default UeProfilesCollectionFilterModalElement;

package/dist/profiles/collection/modal/profiles-collection-filter-modal.token.d.ts

@@ -0,0 +1,8 @@
+import { UmbModalToken } from "@umbraco-cms/backoffice/modal";
+import type { UeProfilesCollectionFilterModel } from "../entities.js";
+export declare const ENGAGE_PROFILES_COLLECTION_FILTER_MODAL_ALIAS = "Engage.Modal.ProfilesCollectionFilter";
+export interface UeProfilesCollectionFilterModalData {
+}
+export interface UeProfilesCollectionFilterModalResult extends UeProfilesCollectionFilterModel {
+}
+export declare const ENGAGE_PROFILES_COLLECTION_FILTER_MODAL: UmbModalToken<UeProfilesCollectionFilterModalData, UeProfilesCollectionFilterModalResult>;

package/dist/profiles/collection/modal/profiles-collection-filter-modal.token.js

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

package/dist/profiles/collection/profiles-collection-header.element.d.ts

@@ -0,0 +1,18 @@
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+import { ENGAGE_PROFILES_COLLECTION_CONTEXT } from "./profiles-collection.context-token.js";
+declare const elementName = "ue-profiles-collection-header";
+export declare class UeProfilesCollectionHeaderElement extends UmbLitElement {
+    #private;
+    collectionContext?: typeof ENGAGE_PROFILES_COLLECTION_CONTEXT.TYPE;
+    private _inputFilters?;
+    private _exportButtonState;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+export default UeProfilesCollectionHeaderElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UeProfilesCollectionHeaderElement;
+    }
+}

package/dist/profiles/collection/profiles-collection-header.element.js

@@ -0,0 +1,101 @@
+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 { umbOpenModal } from "@umbraco-cms/backoffice/modal";
+import { ENGAGE_PROFILES_COLLECTION_CONTEXT } from "./profiles-collection.context-token.js";
+import { ENGAGE_PROFILES_COLLECTION_FILTER_MODAL } from "./modal/index.js";
+const elementName = "ue-profiles-collection-header";
+let UeProfilesCollectionHeaderElement = class UeProfilesCollectionHeaderElement extends UmbLitElement {
+    constructor() {
+        super();
+        this._exportButtonState = undefined;
+        this.consumeContext(ENGAGE_PROFILES_COLLECTION_CONTEXT, (instance) => {
+            this.collectionContext = instance;
+        });
+    }
+    async #onFilterClick() {
+        const value = await umbOpenModal(this, ENGAGE_PROFILES_COLLECTION_FILTER_MODAL).catch(() => { });
+        if (!value)
+            return;
+        const mappedValue = {
+            ...value,
+            isHighPotential: value.isHighPotential ? false : undefined,
+            isIdentified: value.isIdentified ? false : undefined,
+            isUnidentified: value.isUnidentified ? false : undefined,
+        };
+        this._inputFilters = mappedValue;
+        this.collectionContext?.setFilter(mappedValue);
+    }
+    async #onExportClick() {
+        this._exportButtonState = "waiting";
+        await this.collectionContext?.export();
+        this._exportButtonState = undefined;
+    }
+    #renderFilter() {
+        const inputFiltersCount = Object.keys(this._inputFilters ?? {})?.filter((x) => this._inputFilters?.[x] !== undefined).length;
+        return html `
+      <uui-button
+        @click=${this.#onFilterClick}
+        color="default"
+        look=${inputFiltersCount > 0 ? `primary` : `outline`}
+        .label=${this.localize.term("engage_filter")}
+        compact
+      >
+        ${this.localize.term("engage_filter")}
+        <uui-icon name="icon-filter"></uui-icon>
+        <!-- ${inputFiltersCount > 0
+            ? html `<label slot="extra">${inputFiltersCount}</label>`
+            : ``} -->
+      </uui-button>
+    `;
+    }
+    #renderExport() {
+        return html `<uui-button
+      @click=${this.#onExportClick}
+      compact
+      look="outline"
+      .label=${this.localize.term("engage_export")}
+      .state=${this._exportButtonState}
+    >
+      ${this.localize.term("engage_export")}
+      <uui-icon name="icon-download-alt"></uui-icon
+    ></uui-button>`;
+    }
+    render() {
+        return html `
+      <umb-collection-toolbar slot="header">
+        <div id="toolbar">${this.#renderExport()}${this.#renderFilter()}</div>
+      </umb-collection-toolbar>
+    `;
+    }
+    static { this.styles = [
+        css `
+      :host {
+        display: block;
+        width: 100%;
+      }
+
+      #toolbar {
+        display: flex;
+        justify-content: flex-end;
+        gap: var(--uui-size-2);
+      }
+    `,
+    ]; }
+};
+__decorate([
+    state()
+], UeProfilesCollectionHeaderElement.prototype, "_inputFilters", void 0);
+__decorate([
+    state()
+], UeProfilesCollectionHeaderElement.prototype, "_exportButtonState", void 0);
+UeProfilesCollectionHeaderElement = __decorate([
+    customElement(elementName)
+], UeProfilesCollectionHeaderElement);
+export { UeProfilesCollectionHeaderElement };
+export default UeProfilesCollectionHeaderElement;

package/dist/profiles/collection/profiles-collection.context-token.d.ts

@@ -0,0 +1,3 @@
+import { UmbContextToken } from "@umbraco-cms/backoffice/context-api";
+import type { UeProfilesCollectionContext } from "./profiles-collection.context.js";
+export declare const ENGAGE_PROFILES_COLLECTION_CONTEXT: UmbContextToken<UeProfilesCollectionContext, UeProfilesCollectionContext>;

package/dist/profiles/collection/profiles-collection.context-token.js

@@ -0,0 +1,2 @@
+import { UmbContextToken } from "@umbraco-cms/backoffice/context-api";
+export const ENGAGE_PROFILES_COLLECTION_CONTEXT = new UmbContextToken("UmbCollectionContext");

package/dist/profiles/collection/profiles-collection.context.d.ts

@@ -0,0 +1,16 @@
+import type { UeProfilesCollectionFilterModel, UeProfilesCollectionModel } from "./entities.js";
+import { UmbDefaultCollectionContext } from "@umbraco-cms/backoffice/collection";
+import type { UmbControllerHost } from "@umbraco-cms/backoffice/controller-api";
+import { type UeSegmentDetailModel } from "../../personalization/segments/index.js";
+export declare class UeProfilesCollectionContext extends UmbDefaultCollectionContext<UeProfilesCollectionModel, UeProfilesCollectionFilterModel> {
+    #private;
+    data: import("rxjs").Observable<UeProfilesCollectionFilterModel>;
+    segments: import("rxjs").Observable<UeSegmentDetailModel[]>;
+    modalPath: import("rxjs").Observable<string>;
+    constructor(host: UmbControllerHost);
+    hostConnected(): Promise<void>;
+    export(): Promise<void>;
+    getData(): UeProfilesCollectionFilterModel;
+    update(filter: Partial<UeProfilesCollectionFilterModel>): void;
+}
+export { UeProfilesCollectionContext as api };