@umbraco-engage/backoffice 17.1.1 → 17.2.0

package/dist/core/components/data-generation-log/data-generation-log.element.js

@@ -0,0 +1,225 @@
+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, nothing, property, state, when, } from "@umbraco-cms/backoffice/external/lit";
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+import { UMB_NOTIFICATION_CONTEXT } from "@umbraco-cms/backoffice/notification";
+import { UeTimeFormatOptions } from "../../index.js";
+const elementName = "ue-data-generation-log";
+let UeDataGenerationLogElement = class UeDataGenerationLogElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        this.results = [];
+    }
+    #formatDuration(durationMs) {
+        const totalSeconds = Math.max(1, Math.round(durationMs / 1000));
+        const hours = Math.floor(totalSeconds / 3600);
+        const minutes = Math.floor((totalSeconds % 3600) / 60);
+        const seconds = totalSeconds % 60;
+        const parts = [];
+        if (hours > 0)
+            parts.push(`${hours}h`);
+        if (minutes > 0)
+            parts.push(`${minutes}m`);
+        parts.push(`${seconds}s`);
+        return parts.join("");
+    }
+    #computeDurationMs(started, finished) {
+        if (!started || !finished)
+            return null;
+        const ms = new Date(finished).getTime() - new Date(started).getTime();
+        return ms >= 0 ? ms : null;
+    }
+    #formatDateRange(started, finished) {
+        if (!started)
+            return "";
+        const startDate = new Date(started);
+        const formattedStart = this.localize.date(started, UeTimeFormatOptions);
+        if (!finished)
+            return formattedStart;
+        const finishDate = new Date(finished);
+        const sameDate = startDate.getFullYear() === finishDate.getFullYear() &&
+            startDate.getMonth() === finishDate.getMonth() &&
+            startDate.getDate() === finishDate.getDate();
+        if (sameDate)
+            return formattedStart;
+        const formattedFinish = this.localize.date(finished, UeTimeFormatOptions);
+        return `${formattedStart} — ${formattedFinish}`;
+    }
+    #showErrorDialog(errorMessage) {
+        this._copyButtonState = undefined;
+        this._errorDialogContent = errorMessage;
+    }
+    #closeErrorDialog() {
+        this._errorDialogContent = undefined;
+    }
+    async #copyToClipboard() {
+        const notificationContext = await this.getContext(UMB_NOTIFICATION_CONTEXT);
+        try {
+            this._copyButtonState = "waiting";
+            await navigator.clipboard.writeText(this._errorDialogContent ?? "");
+            notificationContext?.peek("positive", {
+                data: {
+                    message: this.localize.term("clipboard_copySuccessHeadline"),
+                },
+            });
+            this._copyButtonState = "success";
+        }
+        catch {
+            this._copyButtonState = "failed";
+        }
+    }
+    #renderResultRow(result) {
+        const dateRange = this.#formatDateRange(result.started, result.finished);
+        const durationMs = this.#computeDurationMs(result.started, result.finished);
+        const clickable = result.failed && result.errorMessage;
+        return html `
+      <uui-table-row
+        ?failed=${result.failed}
+        class=${clickable ? "result-row interactive" : "result-row"}
+        @click=${clickable
+            ? () => this.#showErrorDialog(result.errorMessage)
+            : nothing}
+      >
+        <uui-table-cell class="col-date">${dateRange}</uui-table-cell>
+        <uui-table-cell class="col-duration"
+          >${durationMs != null
+            ? this.#formatDuration(durationMs)
+            : this.localize.term("engage_notAvailable")}</uui-table-cell
+        >
+        <uui-table-cell class="col-status">
+          <div class="status-cell">
+            ${when(result.failed, () => html `<uui-tag color="danger" look="primary"
+                    >${this.localize.term("engage_failed")}</uui-tag
+                  >${clickable
+            ? html `<uui-icon name="icon-info"></uui-icon>`
+            : nothing}`, () => html `<uui-tag color="positive"
+                  >${this.localize.term("engage_success")}</uui-tag
+                >`)}
+          </div>
+        </uui-table-cell>
+      </uui-table-row>
+    `;
+    }
+    #renderErrorDialog() {
+        if (!this._errorDialogContent)
+            return nothing;
+        return html `
+      <uui-modal-dialog @uui:modal-close=${this.#closeErrorDialog}>
+        <uui-dialog>
+          <uui-dialog-layout headline=${this.localize.term("engage_failed")}>
+            <pre class="error-details">${this._errorDialogContent}</pre>
+
+            <uui-button
+              slot="actions"
+              look="secondary"
+              label=${this.localize.term("general_close")}
+              @click=${this.#closeErrorDialog}
+            ></uui-button>
+            <uui-button
+              slot="actions"
+              look="primary"
+              color="positive"
+              .state=${this._copyButtonState}
+              label=${this.localize.term("clipboard_labelForCopyToClipboard")}
+              @click=${this.#copyToClipboard}
+            ></uui-button>
+          </uui-dialog-layout>
+        </uui-dialog>
+      </uui-modal-dialog>
+    `;
+    }
+    render() {
+        return html `
+      <uui-table>
+        <uui-table-head>
+          <uui-table-head-cell class="col-date"
+            >${this.localize.term("engage_date")}</uui-table-head-cell
+          >
+          <uui-table-head-cell class="col-duration"
+            >${this.localize.term("engage_dataGenerationLog_detailsDuration")}</uui-table-head-cell
+          >
+          <uui-table-head-cell class="col-status"
+            >${this.localize.term("engage_status")}</uui-table-head-cell
+          >
+        </uui-table-head>
+        ${this.results.map((r) => this.#renderResultRow(r))}
+      </uui-table>
+      ${this.#renderErrorDialog()}
+    `;
+    }
+    static { this.styles = [
+        css `
+      :host {
+        display: block;
+      }
+
+      uui-table {
+        font-size: var(--uui-type-small-size);
+        table-layout: fixed;
+      }
+
+      .col-date {
+        width: auto;
+      }
+
+      .col-duration {
+        width: 20%;
+      }
+
+      .col-status {
+        width: 20%;
+      }
+
+      .result-row.interactive {
+        cursor: pointer;
+      }
+
+      .result-row.interactive uui-table-cell {
+        transition: color 80ms ease;
+      }
+
+      .result-row.interactive:hover uui-table-cell {
+        color: var(--uui-color-interactive-emphasis);
+      }
+
+      .status-cell {
+        display: flex;
+        align-items: center;
+        gap: var(--uui-size-space-2);
+      }
+
+      .status-cell uui-icon {
+        font-size: 1.5em;
+      }
+
+      .error-details {
+        margin: 0;
+        padding: var(--uui-size-space-4);
+        background: var(--uui-color-surface-alt);
+        border-radius: var(--uui-border-radius);
+        font-size: var(--uui-type-small-size);
+        overflow-x: auto;
+        white-space: pre-wrap;
+        word-break: break-word;
+      }
+    `,
+    ]; }
+};
+__decorate([
+    property({ type: Array })
+], UeDataGenerationLogElement.prototype, "results", void 0);
+__decorate([
+    state()
+], UeDataGenerationLogElement.prototype, "_errorDialogContent", void 0);
+__decorate([
+    state()
+], UeDataGenerationLogElement.prototype, "_copyButtonState", void 0);
+UeDataGenerationLogElement = __decorate([
+    customElement(elementName)
+], UeDataGenerationLogElement);
+export { UeDataGenerationLogElement };
+export default UeDataGenerationLogElement;

package/dist/core/components/data-generation-log/index.d.ts

@@ -0,0 +1 @@
+export * from "./data-generation-log.element.js";

package/dist/core/components/data-generation-log/index.js

@@ -0,0 +1 @@
+export * from "./data-generation-log.element.js";

package/dist/core/components/daterange-picker/daterange-manager.context.js

@@ -1,4 +1,4 @@
-import { DateUtils } from "../../functions/date-utils.js";
+import { UeDateUtils } from "../../functions/date-utils.js";
 import { UmbContextBase } from "@umbraco-cms/backoffice/class-api";
 import { UmbContextToken } from "@umbraco-cms/backoffice/context-api";
 import { UmbObjectState } from "@umbraco-cms/backoffice/observable-api";
@@ -73,8 +73,8 @@ export class UeDateRangeManager extends UmbContextBase {
     getComputedRange(config, range, compareToConfig, compareToRange) {
         let from;
         let to;
-        const dateUtilsFrom = new DateUtils();
-        const dateUtilsTo = new DateUtils();
+        const dateUtilsFrom = new UeDateUtils();
+        const dateUtilsTo = new UeDateUtils();
         const mode = config.mode || DATEPICKER_MODES.LAST_30_DAYS;
         switch (mode) {
             case DATEPICKER_MODES.YESTERDAY:
@@ -106,9 +106,9 @@ export class UeDateRangeManager extends UmbContextBase {
                 to = dateUtilsTo.add(-1, "year").endOf("year").toDate();
                 break;
             case DATEPICKER_MODES.CUSTOM:
-                if (range?.from && range?.to) {
-                    from = new DateUtils(range.from).startOf("day").toDate();
-                    to = new DateUtils(range.to).endOf("day").toDate();
+                if (config.range?.from && config.range?.to) {
+                    from = new UeDateUtils(config.range.from).startOf("day").toDate();
+                    to = new UeDateUtils(config.range.to).endOf("day").toDate();
                 }
                 else {
                     from = new Date();
@@ -135,8 +135,8 @@ export class UeDateRangeManager extends UmbContextBase {
                 throw new Error("Invalid mode: " + config.mode);
         }
         return {
-            from: DateUtils.format(from, this.#dateFormat),
-            to: DateUtils.format(to, this.#dateFormat),
+            from: UeDateUtils.format(from, this.#dateFormat),
+            to: UeDateUtils.format(to, this.#dateFormat),
         };
     }
     #computePreviousRange(sourceMode, sourceRange, targetMode, callback) {
@@ -145,8 +145,8 @@ export class UeDateRangeManager extends UmbContextBase {
         }
         let from;
         let to;
-        const sourceFrom = new DateUtils(new Date(sourceRange.from));
-        const sourceTo = new DateUtils(new Date(sourceRange.to));
+        const sourceFrom = new UeDateUtils(new Date(sourceRange.from));
+        const sourceTo = new UeDateUtils(new Date(sourceRange.to));
         switch (targetMode) {
             case DATEPICKER_MODES.PREVIOUS_PERIOD:
                 switch (sourceMode) {

package/dist/core/components/daterange-picker/daterange-picker-modal.element.js

@@ -140,11 +140,11 @@ let UeDaterangePickerModalElement = class UeDaterangePickerModalElement extends
     >
       ${this.#renderPrimary()}
       ${when(this.data?.allowCompare !== false, () => html ` <uui-toggle
-            @change=${this.#onToggleCompare}
-            .checked=${this._dateConfig?.compare ?? false}
-            .label=${this.localize.term("engage_compare")}
-          ></uui-toggle>
-          ${this.#renderSecondary()}`)}
+              @change=${this.#onToggleCompare}
+              .checked=${this._dateConfig?.compare ?? false}
+              .label=${this.localize.term("engage_compare")}
+            ></uui-toggle>
+            ${this.#renderSecondary()}`)}
       <div slot="actions">
         <uui-button
           label=${this.localize.term("general_close")}

package/dist/core/components/daterange-picker/daterange-picker-modal.token.d.ts

@@ -4,6 +4,5 @@ export declare const ENGAGE_DATERANGE_PICKER_MODAL_ALIAS = "Engage.Modal.Dateran
 export interface UeDateRangePickerModalData extends UeDateRangePickerInputConfig {
     allowCompare: boolean;
 }
-export interface UeDateRangePickerModalValue extends UeDateRangePickerInputConfig {
-}
-export declare const ENGAGE_DATERANGE_PICKER_MODAL: UmbModalToken<UeDateRangePickerModalData, UeDateRangePickerModalValue>;
+export type UeDateRangePickerModalValue = UeDateRangePickerInputConfig;
+export declare const ENGAGE_DATERANGE_PICKER_MODAL: UmbModalToken<UeDateRangePickerModalData, UeDateRangePickerInputConfig>;

package/dist/core/components/daterange-picker/daterange-picker.element.js

@@ -63,13 +63,13 @@ let UeDateRangePickerElement = class UeDateRangePickerElement extends UmbLitElem
         standalone
         @open=${this.#onOpen}
         ><umb-icon name="icon-calendar" slot="icon"></umb-icon> ${when(this._config?.primary?.range?.from, () => html ` <uui-button
-            slot="actions"
-            @click=${this.#onClear}
-            label="clear"
-            compact
-          >
-            <uui-icon name="icon-delete"></uui-icon
-          ></uui-button>`)}</uui-ref-node
+              slot="actions"
+              @click=${this.#onClear}
+              label="clear"
+              compact
+            >
+              <uui-icon name="icon-delete"></uui-icon
+            ></uui-button>`)}</uui-ref-node
       >`;
     }
     static { this.styles = css `

package/dist/core/components/daterange-picker/entities.d.ts

@@ -15,7 +15,7 @@ export interface UeDateRangePickerRangeConfig {
     to: string;
 }
 export interface UeDateRangePickerConfig {
-    range: any;
+    range: UeDateRangePickerRangeConfig;
     ui: {
         isHidden: boolean;
     };

package/dist/core/components/daterange-picker/index.d.ts

@@ -1,5 +1,5 @@
 export * from "./daterange-picker-modal.element.js";
 export * from "./daterange-picker.element.js";
 export * from "./daterange-picker-modal.token.js";
-export * from "./entities.js";
+export type * from "./entities.js";
 export * from "./daterange-manager.context.js";

package/dist/core/components/daterange-picker/index.js

@@ -1,5 +1,4 @@
 export * from "./daterange-picker-modal.element.js";
 export * from "./daterange-picker.element.js";
 export * from "./daterange-picker-modal.token.js";
-export * from "./entities.js";
 export * from "./daterange-manager.context.js";

package/dist/core/components/divider/divider.element.js

@@ -19,7 +19,7 @@ let UeDividerElement = class UeDividerElement extends UmbLitElement {
       align-items: center;
       margin: var(--uui-size-10) 0 var(--uui-size-5);
       color: var(--color-divider);
-      font-weight:bold;
+      font-weight: bold;
     }
 
     umb-icon {

package/dist/core/components/grid.element.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { css, customElement, html, property, } from "@umbraco-cms/backoffice/external/lit";
 import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
 const elementName = "ue-grid";
 let UeGridElement = class UeGridElement extends UmbLitElement {
@@ -15,8 +15,8 @@ let UeGridElement = class UeGridElement extends UmbLitElement {
     }
     connectedCallback() {
         super.connectedCallback();
-        this.style.setProperty('--columns', this.columns.toString());
-        this.style.setProperty('--gap', `var(--uui-size-${this.gap})`);
+        this.style.setProperty("--columns", this.columns.toString());
+        this.style.setProperty("--gap", `var(--uui-size-${this.gap})`);
     }
     render() {
         return html `<slot></slot>`;

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

@@ -21,3 +21,5 @@ export * from "./daterange-picker/index.js";
 export * from "./active-toggle/active-toggle.element.js";
 export * from "./label.element.js";
 export * from "./sidebar-layout.element.js";
+export * from "./data-cleanup-log/index.js";
+export * from "./data-generation-log/index.js";

package/dist/core/components/index.js

@@ -21,3 +21,5 @@ export * from "./daterange-picker/index.js";
 export * from "./active-toggle/active-toggle.element.js";
 export * from "./label.element.js";
 export * from "./sidebar-layout.element.js";
+export * from "./data-cleanup-log/index.js";
+export * from "./data-generation-log/index.js";

package/dist/core/components/label.element.js

@@ -4,12 +4,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { css, customElement, html, property, } from "@umbraco-cms/backoffice/external/lit";
 import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
 const elementName = "ue-label";
 let UeLabelElement = class UeLabelElement extends UmbLitElement {
     render() {
-        return this.labelKey ? this.localize.term(this.labelKey) : html `<slot></slot>`;
+        return this.labelKey
+            ? this.localize.term(this.labelKey)
+            : html `<slot></slot>`;
     }
     static { this.styles = css `
     :host {

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

@@ -29,63 +29,59 @@ let UePackageStatusElement = class UePackageStatusElement extends UmbLitElement
     }
     render() {
         return html `<div class="ums-alert__holder">
-      ${when(this._configuration && !this._configuration.settings?.["enabled"], () => html `<div
-          class="ums-alert__container ums-alert__container--error"
-        >
-          <div>
-            Umbraco Engage is disabled and not collecting data. <br />
-            <a href="/umbraco/#/engage/settings/configuration">Enable Engage</a>
-          </div>
-        </div>`)}
+      ${when(this._configuration && !this._configuration.settings?.["enabled"], () => html `<div class="ums-alert__container ums-alert__container--error">
+            <div>
+              Umbraco Engage is disabled and not collecting data. <br />
+              <a href="/umbraco/#/engage/settings/configuration"
+                >Enable Engage</a
+              >
+            </div>
+          </div>`)}
       ${when(this._packageStatus?.licenseStatus === "Valid" &&
-            this._packageStatus.isTrialMode, () => html ` <div
-          class="ums-alert__container ums-alert__container--warning"
-        >
-          <div>
-            You are running in trial mode. Purchase a license
-            <strong
-              ><a
-                href="https://umbraco.com/products/add-ons/engage/"
-                target="_blank"
-                class="ums-linkbox__button--link-on-parent"
-                >here</a
-              >.</strong
-            >
-          </div>
-        </div>`)}
+            this._packageStatus.isTrialMode, () => html ` <div class="ums-alert__container ums-alert__container--warning">
+            <div>
+              You are running in trial mode. Purchase a license
+              <strong
+                ><a
+                  href="https://umbraco.com/products/add-ons/engage/"
+                  target="_blank"
+                  class="ums-linkbox__button--link-on-parent"
+                  >here</a
+                >.</strong
+              >
+            </div>
+          </div>`)}
       ${when(this._packageStatus?.licenseStatus !== "Valid" ||
-            this._packageStatus.expiresSoon, () => html `<div
-          class="ums-alert__container ums-alert__container--warning"
-        >
-          ${when(this._packageStatus?.expiresSoon, () => html `<div>
-              Warning: the current license will expire soon
-              (${this.localize.date(this._packageStatus.expirationDate)}).<br />Please
-              consider a renewal.
-            </div>`)}
-          ${choose(this._packageStatus?.licenseStatus, [
+            this._packageStatus.expiresSoon, () => html `<div class="ums-alert__container ums-alert__container--warning">
+            ${when(this._packageStatus?.expiresSoon, () => html `<div>
+                  Warning: the current license will expire soon
+                  (${this.localize.date(this._packageStatus.expirationDate)}).<br />Please consider a renewal.
+                </div>`)}
+            ${choose(this._packageStatus?.licenseStatus, [
             [
                 "Expired",
                 () => html `<div>
-                  The license has expired.<br />Please renew the license to
-                  continue using the Umbraco Engage.
-                </div>`,
+                      The license has expired.<br />Please renew the license to
+                      continue using the Umbraco Engage.
+                    </div>`,
             ],
             [
                 "Invalid",
                 () => html `<div>
-                  There was an error reading the license.<br />Please contact
-                  your local administrator or Umbraco Support.
-                </div>`,
+                      There was an error reading the license.<br />Please
+                      contact your local administrator or Umbraco Support.
+                    </div>`,
             ],
             [
                 "LimitReached",
                 () => html `<div>
-                  Request limit exceeded.<br />
-                  Please contact your local administrator or Umbraco Support.
-                </div>`,
+                      Request limit exceeded.<br />
+                      Please contact your local administrator or Umbraco
+                      Support.
+                    </div>`,
             ],
         ], () => html ``)}
-        </div>`)}
+          </div>`)}
     </div>`;
     }
     static { this.styles = css `

package/dist/core/components/scoring/entities.d.ts

@@ -1,5 +1,5 @@
-import { MinimumDeviationTypeModel } from "../../../generated/index.js";
-import { UeEntityBase } from "../../entities.js";
+import type { UeEntityBase } from "../../entities.js";
+import type { MinimumDeviationTypeModel } from "../../../generated/index.js";
 export interface UeScoreableGroupModel extends UeEntityBase {
     title?: string | null;
     upperScoreLimit?: number | null;

package/dist/core/components/scoring/index.d.ts

@@ -1,3 +1,3 @@
 export * from "./lock-score.element.js";
 export * from "./lock-banner.element.js";
-export * from "./entities.js";
+export type * from "./entities.js";

package/dist/core/components/scoring/index.js

@@ -1,3 +1,2 @@
 export * from "./lock-score.element.js";
 export * from "./lock-banner.element.js";
-export * from "./entities.js";

package/dist/core/components/scoring/lock-score.element.d.ts

@@ -1,5 +1,5 @@
+import type { UeScoringValueModel } from "./entities.js";
 import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
-import { UeScoringValueModel } from "./entities.js";
 declare const elementName = "ue-lock-score";
 export declare class UeLockScoreElement extends UmbLitElement {
     #private;

package/dist/core/components/screen/screen-header.element.js

@@ -9,7 +9,7 @@ import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
 const elementName = "ue-screen-header";
 let UeScreenHeaderElement = class UeScreenHeaderElement extends UmbLitElement {
     #localizeLabel(label) {
-        if (!label?.startsWith('#'))
+        if (!label?.startsWith("#"))
             return label;
         return this.localize.term(label.slice(1));
     }
@@ -22,7 +22,7 @@ let UeScreenHeaderElement = class UeScreenHeaderElement extends UmbLitElement {
     static { this.styles = css `
     :host {
       display: flex;
-      box-sizing:border-box;
+      box-sizing: border-box;
       align-items: center;
       background-color: white;
       font-size: var(--uui-size-4);

package/dist/core/components/screen/tabbed-layout.element.d.ts

@@ -1,6 +1,6 @@
+import type { ManifestUeScreenElement } from "../../extension-manifests/index.js";
 import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
 import { type UmbRoute } from "@umbraco-cms/backoffice/router";
-import type { ManifestUeScreenElement } from "../../extension-manifests/index.js";
 declare const elementName = "ue-tabbed-layout";
 export declare class UeTabbedScreenLayoutElement extends UmbLitElement {
     #private;