@umbraco-engage/backoffice 17.0.0-rc1

package/dist/core/components/chart/chart-base.element.js

@@ -0,0 +1,136 @@
+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, html, property, query, state, when, } from "@umbraco-cms/backoffice/external/lit";
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+export class UeChartBaseElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        this.loading = false;
+        this.umsColors = [
+            "#3444B2",
+            "#2C7DFF ",
+            "#4BB2FF",
+            "#8BE9FF",
+            "#CBCFEB",
+        ];
+        this.trendColor = "#FFBA00";
+        this.empty = false;
+        this.chartColors = [];
+        this.legendLabels = [];
+    }
+    generateLegendItem(text, idx, subText) {
+        return html `<div
+        class="legend-item"
+        @click=${(e) => this.#onLegendItemClick(idx, e)}
+      >
+        <span
+          class="legend-marker"
+          style="background-color:${this.chartColors[idx]}"
+        ></span>
+        <span class="legend-text">${text}</span>
+      </div>
+      ${when(subText, () => html `<span class="legend-subtext">${subText}</span>`)}`;
+    }
+    defaultLegend() {
+        return html `
+      ${this.legendLabels.map((l, i) => this.generateLegendItem(l, i))}
+    `;
+    }
+    #onLegendItemClick(idx, e) {
+        if (!this.chart)
+            return;
+        const visible = this.chart.isDatasetVisible(idx);
+        this.chart.setDatasetVisibility(idx, !visible);
+        // dataset visibility has been reversed, so do the opposite of the initial state
+        visible
+            ? e.target.setAttribute("faded", "true")
+            : e.target.removeAttribute("faded");
+        this.chart.update();
+    }
+    buildChartColors(key, i) {
+        // Build colors for the graph.
+        let color = this.umsColors[i % this.umsColors.length];
+        let chartTextColors = color;
+        // Special treatment for "unknown"
+        // Unknown's background color is too light to read properly. That's why we include a 'chartTextColor' for readability
+        if (key === "unknown" || color === "#CBCFEB") {
+            color = "#D9D9D9";
+            chartTextColors = "#68676B";
+        }
+        this.chartColors?.push(color);
+    }
+    percentage(v, total) {
+        v = v ?? 0;
+        total = total ?? 0;
+        if (total === 0) {
+            return "0%";
+        }
+        const p = ((v / total) * 100).toFixed(2);
+        return `${p}%`;
+    }
+    static { this.styles = [
+        css `
+      #legend {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-items: center;
+        column-gap: var(--uui-size-5);
+        row-gap: var(--uui-size-2);
+        justify-content: center;
+        margin-top: var(--uui-size-2);
+      }
+
+      .legend-item {
+        display: flex;
+        align-items: center;
+        gap: var(--uui-size-3);
+        cursor: pointer;
+      }
+
+      .legend-item:hover {
+        opacity: 0.8;
+      }
+
+      .legend-text,
+      .legend-subtext {
+        display: block;
+      }
+
+      .legend-text {
+        font-weight: 400;
+      }
+
+      .legend-subtext {
+        margin-left: var(--uui-size-7);
+      }
+
+      .legend-marker {
+        display: block;
+        border-radius: 50%;
+        width: var(--uui-size-4);
+        height: var(--uui-size-4);
+        flex-shrink: 0;
+        margin-top: -3px;
+      }
+
+      .faded,
+      [faded] {
+        opacity: 0.5;
+      }
+    `,
+    ]; }
+}
+__decorate([
+    query("#chart")
+], UeChartBaseElement.prototype, "chartElement", void 0);
+__decorate([
+    state()
+], UeChartBaseElement.prototype, "legend", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UeChartBaseElement.prototype, "loading", void 0);

package/dist/core/components/chart/chart.element.d.ts

@@ -0,0 +1,15 @@
+import { type ChartType, type ChartOptions, type ChartData } from "chart.js";
+import { UeChartBaseElement } from "./chart-base.element.js";
+export declare abstract class UeChartElement<ChartDataType> extends UeChartBaseElement {
+    init: boolean;
+    set data(value: Array<ChartDataType> | undefined);
+    abstract buildChart(data: Array<ChartDataType>): void;
+    constructor(...args: any[]);
+    protected renderChart(chartArgs: {
+        data: ChartData;
+        type: ChartType;
+        options: ChartOptions;
+    }): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}

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

@@ -0,0 +1,78 @@
+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, html, property, when, } from "@umbraco-cms/backoffice/external/lit";
+import { Chart, Legend, Tooltip, } from "chart.js";
+import { UeChartBaseElement } from "./chart-base.element.js";
+import Annotation from "chartjs-plugin-annotation";
+import { UeChartTooltipDefaults } from "./index.js";
+export class UeChartElement extends UeChartBaseElement {
+    set data(value) {
+        if (!value)
+            return;
+        this.init = true;
+        this.buildChart(value);
+    }
+    constructor(...args) {
+        super();
+        this.init = false;
+        Chart.register(args, Legend, Tooltip, Annotation);
+        this.loading = true;
+    }
+    renderChart(chartArgs) {
+        chartArgs.options.plugins = {
+            ...chartArgs.options.plugins,
+            tooltip: UeChartTooltipDefaults,
+        };
+        this.chart?.destroy();
+        this.loading = false;
+        if (!this.chartElement)
+            return;
+        this.chart = new Chart(this.chartElement.getContext("2d"), chartArgs);
+    }
+    render() {
+        return html `
+      ${when(this.loading, () => html `<uui-loader></uui-loader>`)}
+
+      <div .id=${`wrapper-${this.chart?.config["type"]}`}>
+        ${when(this.empty, () => html `<p>No data available</p>`, () => html `<canvas id="chart"></canvas>`)}
+      </div>
+      ${when(this.legend, () => html ` <div id="legend">${this.legend}</div>`)}
+    `;
+    }
+    static { this.styles = [
+        ...UeChartBaseElement.styles,
+        css `
+      :host {
+        display: flex;
+        gap: var(--uui-size-6);
+        position: relative;
+      }
+
+      :host(:is(ue-bar-chart)) {
+        flex-direction: column;
+      }
+
+      uui-loader {
+        display: block;
+        text-align: center;
+        position: absolute;
+        width: 100%;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+
+      #wrapper-doughnut {
+        position: relative;
+        max-width: 220px;
+        width: 50%;
+      }
+    `,
+    ]; }
+}
+__decorate([
+    property({ type: Array })
+], UeChartElement.prototype, "data", null);

package/dist/core/components/chart/donut-chart.element.d.ts

@@ -0,0 +1,13 @@
+import { UeChartElement } from "./chart.element.js";
+import type { UePieChartData } from "./index.js";
+declare const elementName = "ue-donut-chart";
+export declare class UeDonutChartElement extends UeChartElement<UePieChartData> {
+    constructor();
+    buildChart(data: Array<UePieChartData>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UeDonutChartElement;
+    }
+}
+export {};

package/dist/core/components/chart/donut-chart.element.js

@@ -0,0 +1,75 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement, html } from "@umbraco-cms/backoffice/external/lit";
+import { ArcElement, DoughnutController } from "chart.js";
+import { UeChartElement } from "./chart.element.js";
+const elementName = "ue-donut-chart";
+let UeDonutChartElement = class UeDonutChartElement extends UeChartElement {
+    constructor() {
+        super(DoughnutController, ArcElement);
+    }
+    buildChart(data) {
+        if (!data.length) {
+            this.empty = true;
+        }
+        let total = 0;
+        const labels = [];
+        data.forEach((d, i) => {
+            labels.push(d.label);
+            total += d.data;
+            this.buildChartColors(d.key, i);
+        });
+        const totalNumber = this.localize.number(total);
+        const totalString = this.localize.term("engage_total").toUpperCase();
+        const annotation = {
+            annotations: {
+                dLabel: {
+                    type: "doughnutLabel",
+                    content: [totalNumber, totalString],
+                    font: [{ size: 21 }, { size: 12 }],
+                    color: ["black", "grey"],
+                },
+            },
+        };
+        this.renderChart({
+            data: {
+                labels,
+                datasets: [
+                    {
+                        data: data.map((d) => d.data),
+                        backgroundColor: this.chartColors,
+                    },
+                ],
+            },
+            type: "doughnut",
+            options: {
+                animation: false,
+                hover: {
+                    mode: null,
+                },
+                cutout: "80%",
+                maintainAspectRatio: true,
+                plugins: {
+                    legend: {
+                        display: false,
+                    },
+                    annotation,
+                },
+            },
+        });
+        this.legend = html `<div>
+      ${labels?.map((d, i) => this.generateLegendItem(d, i, html `<strong>${this.localize.number(data[i].data)}</strong>
+            <span class="faded">
+              / ${this.percentage(data[i].data, total)}</span
+            >`))}
+    </div>`;
+    }
+};
+UeDonutChartElement = __decorate([
+    customElement(elementName)
+], UeDonutChartElement);
+export { UeDonutChartElement };

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

@@ -0,0 +1,19 @@
+import { TooltipOptions } from "chart.js";
+export * from "./donut-chart.element.js";
+export * from "./bar-chart.element.js";
+export * from "./chart-base.element.js";
+export interface UePieChartData {
+    label: string;
+    key: string;
+    data: number;
+}
+export interface UeBarChartData {
+    label: string;
+    key: string;
+    data: Array<{
+        month: number;
+        year: number;
+        count: number;
+    }>;
+}
+export declare const UeChartTooltipDefaults: Partial<TooltipOptions>;

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

@@ -0,0 +1,14 @@
+export * from "./donut-chart.element.js";
+export * from "./bar-chart.element.js";
+export * from "./chart-base.element.js";
+export const UeChartTooltipDefaults = {
+    mode: "index",
+    intersect: false,
+    padding: 12,
+    backgroundColor: "#3444B2",
+    titleFont: { family: "Lato, courier", weight: "bold" },
+    bodyFont: { family: "Lato, courier" },
+    bodySpacing: 5,
+    boxPadding: 6,
+    footerFont: { family: "Lato, courier" },
+};

package/dist/core/components/chart/profile-potential-chart.element.d.ts

@@ -0,0 +1 @@
+declare const elementName = "ue-profile-potential-chart";

package/dist/core/components/chart/profile-potential-chart.element.js

@@ -0,0 +1,2 @@
+"use strict";
+const elementName = "ue-profile-potential-chart";

package/dist/core/components/checkbox/checkbox.element.d.ts

@@ -0,0 +1,19 @@
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+declare const elementName = "ue-checkbox";
+export declare class UeCheckboxElement extends UmbLitElement {
+    #private;
+    label?: string;
+    value: string;
+    checked: boolean;
+    disabled: boolean;
+    display: boolean;
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UeCheckboxElement;
+    }
+}
+export {};

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

@@ -0,0 +1,92 @@
+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 { UmbChangeEvent } from "@umbraco-cms/backoffice/event";
+import { css, customElement, html, property, when, } from "@umbraco-cms/backoffice/external/lit";
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+const elementName = "ue-checkbox";
+let UeCheckboxElement = class UeCheckboxElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        this.value = "";
+        this.checked = false;
+        this.disabled = false;
+        this.display = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.label)
+            return;
+        this.style.setProperty("--uui-size-3", "0");
+        this.style.setProperty("--uui-size-5", "9px");
+    }
+    #onChange(e) {
+        this.checked = e.target.checked;
+        this.dispatchEvent(new UmbChangeEvent());
+    }
+    render() {
+        return html `<div>
+        <uui-checkbox
+          .value=${this.value}
+          @change=${this.#onChange}
+          ?checked=${this.checked}
+          ?disabled=${this.disabled}
+          >${this.label}</uui-checkbox
+        >
+        ${when(this.display, () => html `<span>${this.label}</span>`)}
+        <slot></slot>
+      </div>
+      <slot name="accordion"></slot>`;
+    }
+    static { this.styles = [
+        css `
+      :host {
+        display: block;
+        border: 1px solid var(--uui-color-border);
+        border-radius: var(--uui-border-radius);
+      }
+
+      :host > div {
+        display: flex;
+        align-items: center;
+        padding: var(--uui-size-2);
+        column-gap: var(--uui-size-5);
+      }
+
+      :host([display]) uui-checkbox {
+        display: none;
+      }
+
+      span {
+        font-weight: 700;
+        margin-left: var(--uui-size-2);
+      }
+
+      uui-checkbox {
+        width: var(--checkbox-width, auto);
+      }
+    `,
+    ]; }
+};
+__decorate([
+    property()
+], UeCheckboxElement.prototype, "label", void 0);
+__decorate([
+    property()
+], UeCheckboxElement.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], UeCheckboxElement.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean })
+], UeCheckboxElement.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], UeCheckboxElement.prototype, "display", void 0);
+UeCheckboxElement = __decorate([
+    customElement(elementName)
+], UeCheckboxElement);
+export { UeCheckboxElement };

package/dist/core/components/checkmark.element.d.ts

@@ -0,0 +1,13 @@
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+declare const elementName = "ue-checkmark";
+export declare class UeCheckmarkElement extends UmbLitElement {
+    value?: boolean;
+    mode?: "icon" | "text";
+    render(): import("lit-html").TemplateResult<1> | undefined;
+}
+export default UeCheckmarkElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UeCheckmarkElement;
+    }
+}

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

@@ -0,0 +1,38 @@
+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, property, } from "@umbraco-cms/backoffice/external/lit";
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+const elementName = "ue-checkmark";
+let UeCheckmarkElement = class UeCheckmarkElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        this.mode = "icon";
+    }
+    render() {
+        if (this.value === undefined)
+            return;
+        if (this.mode === "text") {
+            return html `<span
+        >${this.localize.term(this.value ? "engage_yes" : "engage_no")}</span
+      >`;
+        }
+        return html `<uui-icon
+      name=${this.value ? "icon-check" : "icon-delete"}
+    ></uui-icon>`;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], UeCheckmarkElement.prototype, "value", void 0);
+__decorate([
+    property()
+], UeCheckmarkElement.prototype, "mode", void 0);
+UeCheckmarkElement = __decorate([
+    customElement(elementName)
+], UeCheckmarkElement);
+export { UeCheckmarkElement };
+export default UeCheckmarkElement;

package/dist/core/components/collapsing-box/collapsing-box.element.d.ts

@@ -0,0 +1,16 @@
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+declare const elementName = "ue-collapsing-box";
+export declare class UeCollapsingBoxElement extends UmbLitElement {
+    #private;
+    collapsed: boolean;
+    headline: string | null;
+    protected renderHeader(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UeCollapsingBoxElement;
+    }
+}
+export {};

package/dist/core/components/collapsing-box/collapsing-box.element.js

@@ -0,0 +1,106 @@
+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 { UUITextStyles } from "@umbraco-cms/backoffice/external/uui";
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+const elementName = "ue-collapsing-box";
+let UeCollapsingBoxElement = class UeCollapsingBoxElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        this.collapsed = true;
+        this.headline = null;
+    }
+    #toggleCollapse() {
+        this.collapsed = !this.collapsed;
+        this.dispatchEvent(new CustomEvent(this.collapsed ? "hide" : "show", {
+            composed: true,
+            bubbles: true,
+        }));
+    }
+    renderHeader() {
+        return html `<button
+      id="header"
+      class="uui-text"
+      @click=${this.#toggleCollapse}
+    >
+      <h5 id="headline" class="uui-h5">${this.headline}</h5>
+      <slot name="tag"></slot>
+      <uui-symbol-expand ?open=${!this.collapsed}></uui-symbol-expand>
+    </button>`;
+    }
+    render() {
+        return html `
+      ${this.renderHeader()}
+      <div id="content">
+        <slot></slot>
+      </div>
+    `;
+    }
+    static { this.styles = [
+        UUITextStyles,
+        css `
+      :host {
+        display: block;
+        border: var(--uui-box-border-width, 0) solid
+          var(--uui-box-border-color, var(--uui-color-divider-standalone));
+        box-shadow: var(--uui-box-box-shadow, var(--uui-shadow-depth-1));
+        border-radius: var(--uui-box-border-radius, var(--uui-border-radius));
+        background-color: var(--uui-color-surface);
+      }
+
+      :host([collapsed]) #header {
+        border-bottom-color: transparent;
+      }
+
+      :host([collapsed]) #content {
+        height: 0;
+        overflow-y: hidden;
+      }
+
+      #header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        column-gap: var(--uui-size-space-5);
+        border: 0;
+        border-bottom: 1px solid var(--uui-color-divider-standalone);
+        padding: var(
+          --uui-box-header-padding,
+          var(--uui-size-space-4) var(--uui-size-space-5)
+        );
+        background: transparent;
+        cursor: pointer;
+      }
+
+      slot:not([name]) {
+        display: block;
+        padding: var(--uui-box-default-padding, var(--uui-size-space-5));
+      }
+
+      slot[name="tag"] {
+        display: block;
+        margin-left: auto;
+      }
+
+      #content {
+        height: auto;
+        overflow-y: visible;
+      }
+    `,
+    ]; }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UeCollapsingBoxElement.prototype, "collapsed", void 0);
+__decorate([
+    property({ type: String })
+], UeCollapsingBoxElement.prototype, "headline", void 0);
+UeCollapsingBoxElement = __decorate([
+    customElement(elementName)
+], UeCollapsingBoxElement);
+export { UeCollapsingBoxElement };

package/dist/core/components/custom-code/ue-custom-code.element.d.ts

@@ -0,0 +1,30 @@
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+import { type UmbPropertyEditorConfigCollection, type UmbPropertyEditorUiElement } from "@umbraco-cms/backoffice/property-editor";
+import "@umbraco-cms/backoffice/code-editor";
+export interface UeCodeEditorValue {
+    css?: string;
+    javascript?: string;
+}
+declare const elementName = "ue-custom-code";
+export declare class UeCustomCodeElement extends UmbLitElement implements UmbPropertyEditorUiElement {
+    #private;
+    value?: UeCodeEditorValue;
+    private _height;
+    private _cssMessage?;
+    private _jsMessage?;
+    private _cssReadonly?;
+    private _jsReadonly?;
+    /**
+     * Provided either/both of cssMessage and javascriptMessage to show the given text
+     * instead of the code editor
+     */
+    set config(config: UmbPropertyEditorConfigCollection | undefined);
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+export default UeCustomCodeElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UeCustomCodeElement;
+    }
+}