@umbraco-engage/backoffice 17.0.0-rc1

package/dist/core/components/custom-code/ue-custom-code.element.js

@@ -0,0 +1,104 @@
+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, state, styleMap, when, } from "@umbraco-cms/backoffice/external/lit";
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+import "@umbraco-cms/backoffice/code-editor";
+import { UmbChangeEvent } from "@umbraco-cms/backoffice/event";
+const elementName = "ue-custom-code";
+let UeCustomCodeElement = class UeCustomCodeElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        this._height = 400;
+        this._cssReadonly = false;
+        this._jsReadonly = false;
+    }
+    /**
+     * Provided either/both of cssMessage and javascriptMessage to show the given text
+     * instead of the code editor
+     */
+    set config(config) {
+        if (!config)
+            return;
+        this._height = Number(config?.getValueByAlias("height")) || 400;
+        this._cssMessage = config?.getValueByAlias("cssMessage");
+        this._jsMessage = config?.getValueByAlias("jsMessage");
+        this._cssReadonly = config?.getValueByAlias("cssReadonly") ?? false;
+        this._jsReadonly = config?.getValueByAlias("jsReadonly") ?? false;
+    }
+    #renderTag(value) {
+        if (!value)
+            return;
+        return html `<uui-tag slot="tag" color="positive"
+      ><uui-icon name="icon-check"></uui-icon>Added</uui-tag
+    >`;
+    }
+    // we need to import the @umbraco-cms/backoffice/code-editor package in its entireity,
+    // but if we type the target here we import only the single type, which breaks rendering.
+    // We therefore use any instead of a type as the code editor does not expose its value
+    // on a standard `value` property, rather it uses `code`
+    #onChange(e, key) {
+        const value = e.target.code;
+        this.value = { ...this.value, [key]: value };
+        this.dispatchEvent(new UmbChangeEvent());
+    }
+    render() {
+        return html `<ue-collapsing-box
+        .headline=${this.localize.term("engage_property_css")}
+      >
+        ${this.#renderTag(this.value?.css)}
+        ${when(this._cssMessage, () => html `${this._cssMessage}`, () => html ` <umb-code-editor
+            ?readonly=${this._cssReadonly}
+            style=${styleMap({ height: `${this._height}px` })}
+            language="css"
+            .code=${this.value?.css ?? ""}
+            @input=${(e) => this.#onChange(e, "css")}
+          ></umb-code-editor>`)} </ue-collapsing-box
+      ><ue-collapsing-box
+        .headline=${this.localize.term("engage_property_javascript")}
+      >
+        ${this.#renderTag(this.value?.javascript)}
+        ${when(this._jsMessage, () => html `${this._jsMessage}`, () => html ` <umb-code-editor
+            ?readonly=${this._jsReadonly}
+            style=${styleMap({ height: `${this._height}px` })}
+            language="javascript"
+            .code=${this.value?.javascript ?? ""}
+            @input=${(e) => this.#onChange(e, "javascript")}
+          ></umb-code-editor>`)}
+      </ue-collapsing-box>`;
+    }
+    static { this.styles = css `
+    ue-collapsing-box:not(:first-child) {
+      margin-top: var(--uui-size-3);
+    }
+  `; }
+};
+__decorate([
+    property({ type: Object })
+], UeCustomCodeElement.prototype, "value", void 0);
+__decorate([
+    state()
+], UeCustomCodeElement.prototype, "_height", void 0);
+__decorate([
+    state()
+], UeCustomCodeElement.prototype, "_cssMessage", void 0);
+__decorate([
+    state()
+], UeCustomCodeElement.prototype, "_jsMessage", void 0);
+__decorate([
+    state()
+], UeCustomCodeElement.prototype, "_cssReadonly", void 0);
+__decorate([
+    state()
+], UeCustomCodeElement.prototype, "_jsReadonly", void 0);
+__decorate([
+    property({ attribute: false })
+], UeCustomCodeElement.prototype, "config", null);
+UeCustomCodeElement = __decorate([
+    customElement(elementName)
+], UeCustomCodeElement);
+export { UeCustomCodeElement };
+export default UeCustomCodeElement;

package/dist/core/components/daterange-picker/daterange-manager.context.d.ts

@@ -0,0 +1,32 @@
+import type { UeDateRangePickerInputConfig, UeDateRangePickerModeConfig, UeDateRangePickerRangeConfig } from "./entities.js";
+import { UmbContextBase } from "@umbraco-cms/backoffice/class-api";
+import { UmbContextToken } from "@umbraco-cms/backoffice/context-api";
+import type { UmbControllerHost } from "@umbraco-cms/backoffice/controller-api";
+export declare class UeDateRangeManager extends UmbContextBase {
+    #private;
+    dateRangeRange: {
+        primary: UeDateRangePickerRangeConfig;
+        secondary: UeDateRangePickerRangeConfig;
+    };
+    value: import("rxjs").Observable<UeDateRangePickerRangeConfig | undefined>;
+    config: import("rxjs").Observable<UeDateRangePickerInputConfig>;
+    constructor(host: UmbControllerHost);
+    updateConfig(value: UeDateRangePickerInputConfig): void;
+    getValue(): UeDateRangePickerRangeConfig | undefined;
+    getConfig(): UeDateRangePickerInputConfig;
+    clear(): void;
+    computeDefaultRange(): void;
+    /**
+     * Calculate the date range based on the provided mode and range
+     * but does not update the internal state.
+     * This is useful for getting the computed range without affecting the current state - eg in a modal
+     * where we don't want to update the context until the user confirms their selection.
+     */
+    getComputedRange(config: UeDateRangePickerModeConfig, range?: UeDateRangePickerRangeConfig, compareToConfig?: UeDateRangePickerModeConfig, compareToRange?: UeDateRangePickerRangeConfig): {
+        from: string;
+        to: string;
+    };
+}
+export default UeDateRangeManager;
+export declare const ENGAGE_DATERANGE_MANAGER_ALIAS = "UeDaterangeManager";
+export declare const ENGAGE_DATERANGE_MANAGER: UmbContextToken<UeDateRangeManager, UeDateRangeManager>;

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

@@ -0,0 +1,188 @@
+import { DateUtils } 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";
+import { DATEPICKER_MODES } from "../../../constants.js";
+export class UeDateRangeManager extends UmbContextBase {
+    #dateFormat;
+    #value;
+    #config;
+    constructor(host) {
+        super(host, ENGAGE_DATERANGE_MANAGER_ALIAS);
+        this.#dateFormat = "yyyy-MM-ddThh:mm:ss";
+        this.dateRangeRange = {
+            primary: { from: "", to: "" },
+            secondary: { from: "", to: "" },
+        };
+        this.#value = new UmbObjectState(undefined);
+        this.value = this.#value.asObservable();
+        this.#config = new UmbObjectState({
+            compare: false,
+            primary: {
+                mode: DATEPICKER_MODES.LAST_7_DAYS,
+                range: { from: "", to: "" },
+            },
+            secondary: {
+                mode: DATEPICKER_MODES.PREVIOUS_PERIOD,
+                range: { from: "", to: "" },
+            },
+        });
+        this.config = this.#config.asObservable();
+        this.computeDefaultRange();
+    }
+    updateConfig(value) {
+        this.#config.setValue(value);
+        this.#computeRange(value.primary, this.dateRangeRange.primary);
+    }
+    getValue() {
+        return this.#value.getValue();
+    }
+    getConfig() {
+        return this.#config.getValue();
+    }
+    clear() {
+        this.#computeRange({
+            mode: DATEPICKER_MODES.LAST_30_DAYS,
+            range: { from: "", to: "" },
+        });
+        this.#config.setValue({
+            ...this.getConfig(),
+            compare: false,
+            primary: {
+                mode: DATEPICKER_MODES.LAST_30_DAYS,
+                range: this.getValue() ?? { from: "", to: "" },
+            },
+            secondary: {
+                mode: DATEPICKER_MODES.PREVIOUS_PERIOD,
+                range: { from: "", to: "" },
+            },
+        });
+    }
+    computeDefaultRange() {
+        this.#computeRange(this.#config.getValue().primary, this.dateRangeRange.primary);
+    }
+    #computeRange(config, range, compareToConfig, compareToRange) {
+        this.#value.setValue(this.getComputedRange(config, range, compareToConfig, compareToRange));
+    }
+    /**
+     * Calculate the date range based on the provided mode and range
+     * but does not update the internal state.
+     * This is useful for getting the computed range without affecting the current state - eg in a modal
+     * where we don't want to update the context until the user confirms their selection.
+     */
+    getComputedRange(config, range, compareToConfig, compareToRange) {
+        let from;
+        let to;
+        const dateUtilsFrom = new DateUtils();
+        const dateUtilsTo = new DateUtils();
+        const mode = config.mode || DATEPICKER_MODES.LAST_30_DAYS;
+        switch (mode) {
+            case DATEPICKER_MODES.YESTERDAY:
+                from = dateUtilsFrom.add(-1, "day").startOf("day").toDate();
+                to = dateUtilsTo.add(-1, "day").endOf("day").toDate();
+                break;
+            case DATEPICKER_MODES.LAST_7_DAYS:
+                from = dateUtilsFrom.add(-7, "day").startOf("day").toDate();
+                to = dateUtilsTo.add(-1, "day").endOf("day").toDate();
+                break;
+            case DATEPICKER_MODES.LAST_30_DAYS:
+                from = dateUtilsFrom.add(-30, "day").startOf("day").toDate();
+                to = dateUtilsTo.add(-1, "day").endOf("day").toDate();
+                break;
+            case DATEPICKER_MODES.THIS_MONTH:
+                from = dateUtilsFrom.startOf("month").toDate();
+                to = dateUtilsTo.endOf("day").toDate();
+                break;
+            case DATEPICKER_MODES.LAST_MONTH:
+                from = dateUtilsFrom.startOf("month").add(-1, "month").toDate();
+                to = dateUtilsTo.endOf("month").add(-1, "month").toDate();
+                break;
+            case DATEPICKER_MODES.THIS_YEAR:
+                from = dateUtilsFrom.startOf("year").toDate();
+                to = dateUtilsTo.endOf("day").toDate();
+                break;
+            case DATEPICKER_MODES.LAST_YEAR:
+                from = dateUtilsFrom.add(-1, "year").startOf("year").toDate();
+                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();
+                }
+                else {
+                    from = new Date();
+                    to = dateUtilsTo.add(7, "day").toDate();
+                }
+                break;
+            case DATEPICKER_MODES.PREVIOUS_PERIOD:
+            case DATEPICKER_MODES.PREVIOUS_YEAR: {
+                // PREVIOUS_PERIOD / PREVIOUS_YEAR are only available when a range to compare against is passed in.
+                if (!compareToRange) {
+                    throw new Error("Modes '" +
+                        DATEPICKER_MODES.PREVIOUS_PERIOD +
+                        "' and '" +
+                        DATEPICKER_MODES.PREVIOUS_YEAR +
+                        "' require `compareToRange` to be passed in");
+                }
+                this.#computePreviousRange(compareToConfig?.mode, compareToRange, config.mode, (previousFrom, previousTo) => {
+                    from = previousFrom;
+                    to = previousTo;
+                });
+                break;
+            }
+            default:
+                throw new Error("Invalid mode: " + config.mode);
+        }
+        return {
+            from: DateUtils.format(from, this.#dateFormat),
+            to: DateUtils.format(to, this.#dateFormat),
+        };
+    }
+    #computePreviousRange(sourceMode, sourceRange, targetMode, callback) {
+        if (!sourceRange?.from || !sourceRange?.to) {
+            return;
+        }
+        let from;
+        let to;
+        const sourceFrom = new DateUtils(new Date(sourceRange.from));
+        const sourceTo = new DateUtils(new Date(sourceRange.to));
+        switch (targetMode) {
+            case DATEPICKER_MODES.PREVIOUS_PERIOD:
+                switch (sourceMode) {
+                    case DATEPICKER_MODES.THIS_MONTH:
+                        from = sourceFrom.add(-1, "month").startOf("month").toDate();
+                        to = sourceTo.add(-1, "month").toDate();
+                        break;
+                    case DATEPICKER_MODES.LAST_MONTH:
+                        from = sourceFrom.add(-1, "month").startOf("month").toDate();
+                        to = sourceTo.add(-1, "month").endOf("month").toDate();
+                        break;
+                    case DATEPICKER_MODES.THIS_YEAR:
+                        from = sourceFrom.add(-1, "year").startOf("year").toDate();
+                        to = sourceTo.add(-1, "year").toDate();
+                        break;
+                    default: {
+                        // The previous range is a range that is the same amount of days
+                        // and ends 1 day before the sourceRange begins.
+                        const numDays = sourceTo.diff(sourceFrom.date, "days") + 1;
+                        from = sourceFrom.add(-1 * numDays, "day").toDate();
+                        to = sourceTo.add(-1 * numDays, "day").toDate();
+                        break;
+                    }
+                }
+                break;
+            case DATEPICKER_MODES.PREVIOUS_YEAR:
+                from = sourceFrom.add(-1, "year").toDate();
+                to = sourceTo.add(-1, "year").toDate();
+                break;
+        }
+        if (callback && from && to) {
+            callback?.(from, to);
+        }
+        return { from, to };
+    }
+}
+export default UeDateRangeManager;
+export const ENGAGE_DATERANGE_MANAGER_ALIAS = "UeDaterangeManager";
+export const ENGAGE_DATERANGE_MANAGER = new UmbContextToken(ENGAGE_DATERANGE_MANAGER_ALIAS);

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

@@ -0,0 +1,17 @@
+import type { UeDateRangePickerModalData, UeDateRangePickerModalValue } from "./daterange-picker-modal.token.js";
+import { UmbModalBaseElement } from "@umbraco-cms/backoffice/modal";
+declare const elementName = "ue-daterange-picker-modal";
+export declare class UeDaterangePickerModalElement extends UmbModalBaseElement<UeDateRangePickerModalData, UeDateRangePickerModalValue> {
+    #private;
+    constructor();
+    private _dateConfig?;
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+export default UeDaterangePickerModalElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UeDaterangePickerModalElement;
+    }
+}

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

@@ -0,0 +1,199 @@
+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 { ENGAGE_DATERANGE_MANAGER } from "./daterange-manager.context.js";
+import { css, customElement, html, state, when, } from "@umbraco-cms/backoffice/external/lit";
+import { UmbModalBaseElement } from "@umbraco-cms/backoffice/modal";
+import { DATEPICKER_MODES } from "../../../constants.js";
+const elementName = "ue-daterange-picker-modal";
+let UeDaterangePickerModalElement = class UeDaterangePickerModalElement extends UmbModalBaseElement {
+    #previousPeriods = [
+        DATEPICKER_MODES.PREVIOUS_PERIOD,
+        DATEPICKER_MODES.PREVIOUS_YEAR,
+    ];
+    #dateRangeManager;
+    constructor() {
+        super();
+        this.consumeContext(ENGAGE_DATERANGE_MANAGER, (context) => {
+            this.#dateRangeManager = context;
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._dateConfig = structuredClone(this.data);
+    }
+    async #onToggleCompare() {
+        if (!this._dateConfig)
+            return;
+        this._dateConfig = {
+            ...this._dateConfig,
+            ...{ compare: !this._dateConfig.compare },
+        };
+        if (this._dateConfig.compare) {
+            await this.#onSecondaryRangeSelectChange();
+        }
+        else {
+            this._dateConfig.secondary = {
+                mode: DATEPICKER_MODES.PREVIOUS_PERIOD,
+                range: { from: "", to: "" },
+            };
+        }
+    }
+    #submitModal() {
+        if (!this._dateConfig)
+            return;
+        this.updateValue(this._dateConfig);
+        this._submitModal();
+    }
+    async #onPrimaryRangeSelectChange(event) {
+        if (!this._dateConfig?.primary.range || !this.#dateRangeManager)
+            return;
+        if (event) {
+            this._dateConfig.primary.mode = event.target.value.toString();
+        }
+        this._dateConfig.primary.range = this.#dateRangeManager?.getComputedRange(this._dateConfig.primary, this._dateConfig.primary.range);
+        if (this._dateConfig.compare) {
+            await this.#onSecondaryRangeSelectChange();
+        }
+        this.requestUpdate();
+    }
+    async #onSecondaryRangeSelectChange(event) {
+        if (!this._dateConfig?.primary.range || !this.#dateRangeManager)
+            return;
+        if (event) {
+            this._dateConfig.secondary.mode = event.target.value.toString();
+        }
+        this._dateConfig.secondary.range = this.#dateRangeManager?.getComputedRange(this._dateConfig.secondary, this._dateConfig.secondary.range, this._dateConfig.primary, this._dateConfig.primary.range);
+        this.requestUpdate();
+    }
+    #handleDateChange(event, propKey, dateKey) {
+        if (!this._dateConfig)
+            return;
+        const value = event.target.value.toString();
+        const prop = this._dateConfig[propKey];
+        if (!prop.range)
+            return;
+        prop.range[dateKey] = value;
+        prop.mode = DATEPICKER_MODES.CUSTOM;
+        this.#onPrimaryRangeSelectChange();
+    }
+    #renderRangeSelect(value, filter, change) {
+        if (!filter || !change)
+            return;
+        return html `<uui-select
+      @change=${change}
+      .value=${value}
+      .options=${Object.values(DATEPICKER_MODES)
+            .filter(filter)
+            .map((x) => ({
+            name: this.localize.term(`engage_analytics_${x}`),
+            selected: x === value,
+            value: x,
+        }))}
+    ></uui-select>`;
+    }
+    #renderPrimary() {
+        return html `
+      <uui-form-layout-item
+        ><div class="flex">
+          ${this.#renderRangeSelect(this._dateConfig?.primary.mode, (x) => !this.#previousPeriods.includes(x), this.#onPrimaryRangeSelectChange)}
+
+          <umb-input-date
+            type="date"
+            .value=${this._dateConfig?.primary.range?.from?.split("T")[0] ?? ""}
+            @change=${(e) => this.#handleDateChange(e, "primary", "from")}
+          ></umb-input-date>
+          <umb-input-date
+            type="date"
+            .value=${this._dateConfig?.primary.range?.to?.split("T")[0] ?? ""}
+            @change=${(e) => this.#handleDateChange(e, "primary", "to")}
+          ></umb-input-date>
+        </div>
+      </uui-form-layout-item>
+    `;
+    }
+    #renderSecondary() {
+        if (!this._dateConfig?.compare)
+            return;
+        return html ` <uui-form-layout-item
+      ><div class="flex">
+        ${this.#renderRangeSelect(this._dateConfig?.secondary.mode, (x) => this.#previousPeriods.includes(x) || x === DATEPICKER_MODES.CUSTOM, this.#onSecondaryRangeSelectChange)}
+        <umb-input-date
+          type="date"
+          .value=${this._dateConfig?.secondary.range?.from?.split("T")[0]}
+          @change=${(e) => this.#handleDateChange(e, "secondary", "from")}
+        ></umb-input-date>
+        <umb-input-date
+          type="date"
+          .value=${this._dateConfig?.secondary.range?.to?.split("T")[0]}
+          @change=${(e) => this.#handleDateChange(e, "secondary", "to")}
+        ></umb-input-date>
+      </div>
+    </uui-form-layout-item>`;
+    }
+    render() {
+        return html `<uui-dialog-layout
+      .headline=${this.localize.term("engage_analytics_date")}
+    >
+      ${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()}`)}
+      <div slot="actions">
+        <uui-button
+          label=${this.localize.term("general_close")}
+          @click=${this._rejectModal}
+        ></uui-button>
+        <uui-button
+          color="positive"
+          look="primary"
+          label=${this.localize.term("buttons_save")}
+          @click=${this.#submitModal}
+        ></uui-button>
+      </div>
+    </uui-dialog-layout>`;
+    }
+    static { this.styles = css `
+    #main {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .flex {
+      display: flex;
+      gap: var(--uui-size-2);
+    }
+
+    uui-select {
+      flex: 1;
+      margin-right: var(--uui-size-4);
+    }
+
+    uui-toggle {
+      display: block;
+      margin: var(--uui-size-4) 0;
+    }
+
+    uui-toggle:last-child {
+      margin-bottom: 0;
+    }
+
+    umb-input-date:first-of-type {
+      margin-left: auto;
+    }
+  `; }
+};
+__decorate([
+    state()
+], UeDaterangePickerModalElement.prototype, "_dateConfig", void 0);
+UeDaterangePickerModalElement = __decorate([
+    customElement(elementName)
+], UeDaterangePickerModalElement);
+export { UeDaterangePickerModalElement };
+export default UeDaterangePickerModalElement;

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

@@ -0,0 +1,9 @@
+import { UmbModalToken } from "@umbraco-cms/backoffice/modal";
+import type { UeDateRangePickerInputConfig } from "./entities.js";
+export declare const ENGAGE_DATERANGE_PICKER_MODAL_ALIAS = "Engage.Modal.DaterangePicker";
+export interface UeDateRangePickerModalData extends UeDateRangePickerInputConfig {
+    allowCompare: boolean;
+}
+export interface UeDateRangePickerModalValue extends UeDateRangePickerInputConfig {
+}
+export declare const ENGAGE_DATERANGE_PICKER_MODAL: UmbModalToken<UeDateRangePickerModalData, UeDateRangePickerModalValue>;

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

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

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

@@ -0,0 +1,20 @@
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+import type { UeDateRangePickerRangeConfig } from "./entities.js";
+declare const elementName = "ue-daterange-picker";
+export declare class UeDateRangePickerElement extends UmbLitElement {
+    #private;
+    showCompare: boolean;
+    label?: string;
+    private _currentDate;
+    private _config?;
+    value?: UeDateRangePickerRangeConfig;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+export default UeDateRangePickerElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UeDateRangePickerElement;
+    }
+}