@luzmo/analytics-components-kit 1.0.0

package/components/slot-menu-qG0SDoCW.js

@@ -0,0 +1,934 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2026 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. This license terminates
+ * automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+import { a as _defineProperty, i as dropTargetForElements, n as setCustomNativeDragPreview, r as draggable, t as getCssVariableValue } from "./get-css-variable-DpEed5QG.js";
+import { i as LuzmoElement, n as SizedMixin, t as ElementSizes } from "./base-BPca9j_g.js";
+import { n as __decorate } from "./localized-mixin-BMNoUdF8.js";
+import { n as isEmpty } from "./type-check-BzMcgc41.js";
+import { t as localize } from "./localize-CTTwlzBP.js";
+import { t as dataBroker } from "./data-broker-Cq7Cgr4w.js";
+import { t as formatter } from "./formatter-xyiOs9mB.js";
+import { t as DEFAULT_LOCAL_FORMATS } from "./default-local-formats-CB24DjrF.js";
+import { t as PeriodOverPeriodCondition } from "./period-over-period-condition.const-Bbni1MQG.js";
+import { t as validate_default } from "./validate-B4emkSyG.js";
+import { luzmoArrows, luzmoClose12, luzmoIcon, luzmoInfoCircleOutline, luzmoTrashOutline } from "@luzmo/icons";
+import { html, nothing, unsafeCSS } from "lit";
+import { property, query, queryAll, state } from "lit/decorators.js";
+import { msg } from "@lit/localize";
+import "@luzmo/lucero/tooltip";
+import { SignalWatcher, computed, signal } from "@lit-labs/signals";
+import { ContextProvider, consume, createContext } from "@lit/context";
+import { Task } from "@lit/task";
+import "@luzmo/lucero/action-button";
+import "@luzmo/lucero/divider";
+import "@luzmo/lucero/field-label";
+import "@luzmo/lucero/icon";
+import "@luzmo/lucero/multi-language-field";
+import "@luzmo/lucero/progress-circle";
+import "@luzmo/lucero/text-field";
+import { guard } from "lit/directives/guard.js";
+const slotContext = createContext(Symbol("slot-store-context"));
+var display_settings_module_default = ":host{font-family:var(--luzmo-display-settings-font-family,var(--luzmo-font-family));font-size:var(--luzmo-display-settings-font-size,var(--display-settings-font-size));color:var(--luzmo-display-settings-font-color,var(--luzmo-font-color))}.settings-container{gap:var(--luzmo-display-settings-vertical-gap,var(--luzmo-spacing-2));flex-direction:column;display:flex}.settings-row{justify-content:flex-start;align-items:center;gap:var(--luzmo-display-settings-gap,var(--display-settings-gap));display:flex}luzmo-divider{margin:var(--luzmo-display-settings-ids-container-vertical-margin,var(--display-settings-ids-container-vertical-margin))0}luzmo-tooltip{--tooltip-font-size:var(--luzmo-display-settings-tooltip-font-size,var(--tooltip-font-size))}.setting{align-items:center;display:flex}.label-action-container{justify-content:space-between;align-items:center;gap:var(--luzmo-display-settings-info-to-remove-icon-gap,var(--display-settings-info-to-remove-icon-gap));display:flex}.label-action-container luzmo-action-button{margin-inline-start:var(--luzmo-spacing-2)}.ids-container{gap:var(--luzmo-display-settings-ids-container-gap,var(--luzmo-spacing-2));border-radius:50%;flex-direction:column;display:flex}.id-label{text-transform:var(--luzmo-display-settings-id-label-text-transform,var(--display-settings-id-label-text-transform));font-size:var(--luzmo-display-settings-id-label-font-size,var(--display-settings-id-label-font-size));color:var(--luzmo-display-settings-id-label-color,var(--display-settings-id-label-color))}.id-value{-webkit-user-select:text;user-select:text;cursor:text}.example-container{line-height:var(--luzmo-display-settings-example-height,var(--display-settings-example-height));font-size:var(--luzmo-display-settings-example-font-size,var(--display-settings-example-font-size));color:var(--luzmo-display-settings-example-color,var(--display-settings-example-color))}.example-container .example-label{font-weight:var(--luzmo-display-settings-example-label-font-weight,var(--display-settings-example-label-font-weight));color:var(--luzmo-display-settings-example-label-color,var(--display-settings-example-label-color))}.example-container .example-language{text-transform:uppercase;color:var(--luzmo-display-settings-example-language-color,var(--display-settings-example-language-color))}.example-container{gap:var(--luzmo-display-settings-example-container-gap,var(--luzmo-spacing-2))}:host{--display-settings-font-family:var(--luzmo-font-family);--display-settings-id-label-text-transform:uppercase;--display-settings-id-label-color:var(--luzmo-secondary);--display-settings-font-size:var(--luzmo-font-size);--display-settings-id-label-font-size:var(--luzmo-font-size-s);--display-settings-gap:var(--luzmo-spacing-3);--display-settings-ids-container-vertical-margin:var(--luzmo-spacing-4);--display-settings-info-to-remove-icon-gap:var(--luzmo-spacing-5)}:host([size=s]){--display-settings-id-label-font-size:var(--luzmo-font-size-s);--display-settings-font-size:var(--luzmo-font-size-s);--display-settings-gap:var(--luzmo-spacing-3);--display-settings-ids-container-vertical-margin:var(--luzmo-spacing-3);--display-settings-info-to-remove-icon-gap:var(--luzmo-spacing-4)}:host([size=l]){--display-settings-id-label-font-size:var(--luzmo-font-size);--display-settings-font-size:var(--luzmo-font-size-l);--display-settings-gap:var(--luzmo-spacing-4);--display-settings-ids-container-vertical-margin:var(--luzmo-spacing-5);--display-settings-info-to-remove-icon-gap:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1))}:host([size=xl]){--display-settings-id-label-font-size:var(--luzmo-font-size-l);--display-settings-font-size:var(--luzmo-font-size-xl);--display-settings-gap:var(--luzmo-spacing-5);--display-settings-ids-container-vertical-margin:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--display-settings-info-to-remove-icon-gap:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-2))}:host{--display-settings-example-font-size:var(--luzmo-font-size);--display-settings-example-color:var(--luzmo-font-color);--display-settings-example-label-font-weight:bold;--display-settings-example-label-color:var(--luzmo-primary);--display-settings-example-language-color:var(--luzmo-primary);--display-settings-example-height:var(--luzmo-component-height)}:host([size=s]){--display-settings-example-height:var(--luzmo-component-height-s);--display-settings-example-font-size:var(--luzmo-font-size-s)}:host([size=l]){--display-settings-example-height:var(--luzmo-component-height-l);--display-settings-example-font-size:var(--luzmo-font-size)}:host([size=xl]){--display-settings-example-height:var(--luzmo-component-height-xl);--display-settings-example-font-size:var(--luzmo-font-size-l)}", LuzmoDisplaySettings = class extends SignalWatcher(SizedMixin(LuzmoElement, { validSizes: Object.values(ElementSizes) })) {
+	constructor(...a) {
+		super(...a), this._loadDisplaySettings = new Task(this, {
+			task: async ([a, P, F, I, L, R]) => {
+				let z = [];
+				R && z.push("grandTotals"), F && z.push("periodOverPeriod"), (a === "numeric" || a === "mixed" && this._currentSlotContent?.type === "numeric") && z.push("numeric"), a !== "numeric" && this._currentSlotContent?.type === "datetime" && z.push("datetime"), !["numeric", "mixed"].includes(a ?? "") && this._currentSlotContent?.type === "numeric" && !I && z.push("binning"), F && !this._settingsTypeLoaded.periodOverPeriod && (await import("./display-settings-period-over-period-vKm9GlS-.js"), this._settingsTypeLoaded.periodOverPeriod = !0), z.length > 0 && !P && (z.includes("numeric") && !this._settingsTypeLoaded.numeric ? (await import("./display-settings-numeric-xwW2Ftez.js"), this._settingsTypeLoaded.numeric = !0) : z.includes("datetime") && !this._settingsTypeLoaded.datetime && L ? (await import("./display-settings-datetime-DWXTW91l.js"), this._settingsTypeLoaded.datetime = !0) : z.includes("binning") && !this._settingsTypeLoaded.binning ? (await import("./display-settings-binning-BPqozO0p.js"), this._settingsTypeLoaded.binning = !0) : z.includes("grandTotals") && !this._settingsTypeLoaded.grandTotals && (await import("./display-settings-grand-totals-BXm_f1m8.js"), this._settingsTypeLoaded.grandTotals = !0));
+			},
+			args: () => [
+				this.slotType,
+				this.hideDisplaySettings,
+				this._store?.periodOverPeriodUiType.get(),
+				this.isBinningDisabled,
+				this.areDatetimeOptionsEnabled,
+				this.areGrandTotalsEnabled,
+				this.slotContent
+			]
+		}), this.language = "en", this.contentLanguage = "en", this.slotType = "numeric", this.slotContent = {}, this._showIds = !1, this.measureColumns = [], this._settingsTypeLoaded = {
+			binning: !1,
+			datetime: !1,
+			numeric: !1,
+			grandTotals: !1,
+			periodOverPeriod: !1,
+			hierarchy: !0
+		}, this._currentSlotContent = {};
+	}
+	static get styles() {
+		return [unsafeCSS(display_settings_module_default)];
+	}
+	_datasetDatetimeColumns() {
+		return this._store?.linkedDataset.get().flatMap((a) => a.columns?.filter((a) => a.type === "datetime").map((P) => ({
+			...P,
+			datasetId: a.id
+		})));
+	}
+	willUpdate(a) {
+		let P = this._store?.activeSlotContents.get(), F = this._store?.periodOverPeriodUiType.get();
+		if (this.periodOverPeriodUiType !== F && (this.periodOverPeriodUiType = F), this._store) {
+			P !== this._lastStoreContent && (this._lastStoreContent = P, this._currentSlotContent = P ? structuredClone(P) : {});
+			return;
+		}
+		if (a.has("slotContent") || Object.keys(this._currentSlotContent).length === 0) {
+			let a = this.slotContent;
+			a && (this._currentSlotContent = structuredClone(a));
+		}
+	}
+	get datasetId() {
+		return this._currentSlotContent.datasetId ?? this._currentSlotContent.set;
+	}
+	get formulaOrColumnId() {
+		return this._currentSlotContent.formula ?? this._currentSlotContent.columnId ?? this._currentSlotContent.column;
+	}
+	resetInfoVisibility(a) {
+		this._showIds && this._toggleIds(a);
+	}
+	_onSlotContentChange(a) {
+		a.stopPropagation(), a.preventDefault(), this._currentSlotContent = structuredClone(a.detail.slotContent), this._sendEvent(), this.requestUpdate();
+	}
+	_onLabelChange() {
+		this._currentSlotContent = structuredClone(this._currentSlotContent), this._currentSlotContent.label = this._multiLanguageFieldElement.value || {}, this._sendEvent(), this.requestUpdate();
+	}
+	_sendEvent() {
+		this.dispatchEvent(new CustomEvent("luzmo-slot-content-changed", {
+			bubbles: !0,
+			composed: !0,
+			cancelable: !0,
+			detail: { slotContent: { ...this._currentSlotContent } }
+		})), this._store && (this._store.updateContent({ ...this._currentSlotContent }), this._lastStoreContent = this._store.activeSlotContents.get());
+	}
+	_removeEvent() {
+		this.dispatchEvent(new CustomEvent("luzmo-remove-slot-content", {
+			bubbles: !0,
+			composed: !0,
+			cancelable: !0,
+			detail: { slotContent: this._currentSlotContent }
+		}));
+	}
+	_toggleIds(a = !0) {
+		this._showIds = !this._showIds, a && this.dispatchEvent(new CustomEvent("luzmo-info-visibility-changed", { detail: {
+			isVisible: this._showIds,
+			slotContent: { ...this._currentSlotContent }
+		} }));
+	}
+	_renderExampleRow() {
+		let a = this.slotType === "numeric" || this.slotType === "mixed" && this._currentSlotContent.type === "numeric", P = this.slotType !== "datetime" && this._currentSlotContent.type === "datetime" && this.areDatetimeOptionsEnabled;
+		if (!(a || P)) return nothing;
+		let F = !this._currentSlotContent.datetimeDisplayMode || this._currentSlotContent.datetimeDisplayMode === "default", I = a ? 1234.56 : F ? /* @__PURE__ */ new Date() : 1, L = formatter({
+			...this._currentSlotContent,
+			type: a ? "numeric" : "datetime"
+		}, {
+			locale: this.contentLanguage,
+			level: this._currentSlotContent.level
+		})(I);
+		return html`<div class="settings-row example-container">
+      <span class="example-label"
+        >${msg("Example", { desc: "Label for example" })}:</span
+      >
+      <span class="example">${L}</span>
+    </div>`;
+	}
+	_renderDisplaySettings() {
+		return html`<div class="settings-container">
+        <div class="settings-row">
+          <div class="setting">
+            <div class="label-container">
+              <luzmo-field-label side-aligned="start" .size=${this.size}
+                >Label:</luzmo-field-label
+              >
+              <luzmo-multi-language-field
+                label="Label"
+                .language=${this.contentLanguage}
+                .value=${this._currentSlotContent.label ?? {}}
+                .size=${this.size}
+                debounce="200"
+                @change=${this._onLabelChange}
+              ></luzmo-multi-language-field>
+            </div>
+            <div class="label-action-container">
+              <luzmo-action-button quiet .size=${this.size} .label=${msg("Show dataset and column IDs", { desc: "Show IDs button label" })} aria-expanded=${this._showIds} @click=${this._toggleIds}>
+                ${luzmoIcon(luzmoInfoCircleOutline)}
+                <luzmo-tooltip self-managed placement="top" size=${this.size}>
+                  ${msg("Show dataset and column IDs", { desc: "Show IDs button label" })}
+                </luzmo-tooltip>
+              </luzmo-action-button>
+              ${this.showRemoveButton ? html`<luzmo-action-button quiet .size=${this.size} .label=${msg("Remove", { desc: "Remove button label" })} @click=${this._removeEvent}>
+                    ${luzmoIcon(luzmoTrashOutline)}
+                    <luzmo-tooltip
+                      self-managed
+                      placement="top"
+                      size=${this.size}
+                    >
+                      ${msg("Remove", { desc: "Remove button label" })}
+                    </luzmo-tooltip>
+                  </luzmo-action-button>` : ""}
+            </div>
+          </div>
+        </div>
+        ${this.areGrandTotalsEnabled ? html`<luzmo-display-settings-grand-totals
+              .language=${this.language}
+              .slotContent=${this._currentSlotContent}
+              .size=${this.size}
+              @luzmo-slot-content-changed=${this._onSlotContentChange}
+            ></luzmo-display-settings-grand-totals>` : ""}
+        ${this.slotType === "numeric" || this.slotType === "mixed" && this._currentSlotContent.type === "numeric" ? html`<luzmo-display-settings-numeric
+              .language=${this.language}
+              .slotContent=${this._currentSlotContent}
+              .size=${this.size}
+              .measureColumns=${this.measureColumns}
+              .isAggregationDisabled=${this.isAggregationDisabled}
+              .isCumulativeSumEnabled=${this.isCumulativeSumEnabled}
+              @luzmo-slot-content-changed=${this._onSlotContentChange}
+            ></luzmo-display-settings-numeric>` : ""}
+        ${this.slotType !== "numeric" && this._currentSlotContent.type === "datetime" && this.areDatetimeOptionsEnabled ? html`<luzmo-display-settings-datetime
+              .language=${this.language}
+              .contentLanguage=${this.contentLanguage}
+              .slotContent=${this._currentSlotContent}
+              .size=${this.size}
+              @luzmo-slot-content-changed=${this._onSlotContentChange}
+            ></luzmo-display-settings-datetime>` : ""}
+        ${!["numeric", "mixed"].includes(this.slotType ?? "") && this._currentSlotContent.type === "numeric" && !this.isBinningDisabled ? html`<luzmo-display-settings-binning
+              .language=${this.language}
+              .slotContent=${this._currentSlotContent}
+              .size=${this.size}
+              @luzmo-slot-content-changed=${this._onSlotContentChange}
+            ></luzmo-display-settings-binning>` : ""}
+        ${this.periodOverPeriodUiType ? html`<luzmo-display-settings-period-over-period
+              .language=${this.language}
+              .slotContent=${this._currentSlotContent}
+              .size=${this.size}
+              .periodOverPeriodUiType=${this.periodOverPeriodUiType}
+              .linkedDatasetDatetimeColumns=${this._datasetDatetimeColumns()}
+              @luzmo-slot-content-changed=${this._onSlotContentChange}
+            ></luzmo-display-settings-period-over-period>` : ""}
+        ${this._renderExampleRow()}
+      </div>
+      ${this._showIds ? html` <luzmo-divider></luzmo-divider>
+            <div class="ids-container">
+              <div>
+                <span class="id-label"
+                  >${this._currentSlotContent.formula ? msg("Formula", { desc: "Label for formula type" }) : msg("Column", { desc: "Label for column type" })}:
+                </span>
+                <span class="id-value">
+                  ${this.formulaOrColumnId}
+                </span>
+              </div>
+              <div>
+                <span class="id-label">Dataset: </span>
+                <span class="id-value">
+                  ${this.datasetId}
+                </span>
+              </div>
+              <div></div>
+            </div>` : ""}`;
+	}
+	render() {
+		return this._loadDisplaySettings.render({
+			pending: () => html`<luzmo-progress-circle
+          indeterminate
+          .label=${msg("Loading", { desc: "Loading spinner label" })}
+          .size=${this.size}
+        ></luzmo-progress-circle>`,
+			complete: () => this._renderDisplaySettings(),
+			error: () => this._renderDisplaySettings()
+		});
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback?.(), this._loadDisplaySettings.abort?.();
+	}
+};
+__decorate([property({ type: String })], LuzmoDisplaySettings.prototype, "language", void 0), __decorate([property({
+	type: String,
+	attribute: "content-language"
+})], LuzmoDisplaySettings.prototype, "contentLanguage", void 0), __decorate([property({
+	type: Boolean,
+	attribute: "hide-display-settings"
+})], LuzmoDisplaySettings.prototype, "hideDisplaySettings", void 0), __decorate([property({ type: Boolean })], LuzmoDisplaySettings.prototype, "isBinningDisabled", void 0), __decorate([property({ type: Boolean })], LuzmoDisplaySettings.prototype, "areDatetimeOptionsEnabled", void 0), __decorate([property({ type: Boolean })], LuzmoDisplaySettings.prototype, "areGrandTotalsEnabled", void 0), __decorate([property({ type: Boolean })], LuzmoDisplaySettings.prototype, "isAggregationDisabled", void 0), __decorate([property({ type: Boolean })], LuzmoDisplaySettings.prototype, "isCumulativeSumEnabled", void 0), __decorate([property({ type: String })], LuzmoDisplaySettings.prototype, "periodOverPeriodUiType", void 0), __decorate([property({
+	type: Boolean,
+	attribute: "show-remove-button"
+})], LuzmoDisplaySettings.prototype, "showRemoveButton", void 0), __decorate([property({
+	type: String,
+	attribute: "slot-type"
+})], LuzmoDisplaySettings.prototype, "slotType", void 0), __decorate([property({
+	type: Object,
+	attribute: !1
+})], LuzmoDisplaySettings.prototype, "slotContent", void 0), __decorate([state()], LuzmoDisplaySettings.prototype, "_showIds", void 0), __decorate([property({
+	type: Array,
+	reflect: !1
+})], LuzmoDisplaySettings.prototype, "measureColumns", void 0), __decorate([query("luzmo-multi-language-field")], LuzmoDisplaySettings.prototype, "_multiLanguageFieldElement", void 0), __decorate([consume({
+	context: slotContext,
+	subscribe: !0
+})], LuzmoDisplaySettings.prototype, "_store", void 0), customElements.get("luzmo-display-settings") || customElements.define("luzmo-display-settings", LuzmoDisplaySettings);
+const convertDataFieldToSlotContent = (a, P) => {
+	let F = {
+		type: a.type,
+		datasetId: a.datasetId,
+		set: a.datasetId
+	};
+	"columnId" in a && !isEmpty(a.columnId) && a.columnId !== "" ? (F.columnId = a.columnId, F.column = a.columnId) : "formulaId" in a && !isEmpty(a.formulaId) && a.formulaId !== "" ? (F.formulaId = a.formulaId, F.formula = a.formulaId) : "formula" in a && typeof a.formula == "string" && a.formula !== "" && (F.formula = a.formula);
+	let I = a.type === "datetime" || a.type === "array[datetime]", L = { ...a.name ?? { en: "Untitled" } }, R = a.level;
+	if (I && (R = R ?? a.lowestLevel ?? 9, P)) {
+		let a = DEFAULT_LOCAL_FORMATS.shortLevels?.filter((a) => a !== "All") ?? [], P = a[Math.max(0, Math.min(a.length - 1, (R ?? 1) - 1))];
+		if (P) {
+			let a = `(${P})`, F = Object.keys(L);
+			for (let P of F) L[P] = `${L[P]} ${a}`;
+		}
+	}
+	return F.label = L, isEmpty(a.subtype) || (F.subtype = a.subtype), "lowestLevel" in a && !isEmpty(a.lowestLevel) && (F.lowestLevel = a.lowestLevel), isEmpty(a.format) || (F.format = a.format), isEmpty(R) || (F.level = R), isEmpty(a.lowestLevel) || (F.lowestLevel = a.lowestLevel), a.type === "numeric" && a.subtype === "currency" && a.currency?.symbol && (F.currency = a.currency.symbol), Array.isArray(a.duration_levels) && a.duration_format && (F.duration = {
+		levels: a.duration_levels,
+		format: a.duration_format
+	}), F;
+}, DEFAULT_ACCEPTABLE_DATA_FIELD_TYPES = [
+	"datetime",
+	"hierarchy",
+	"numeric",
+	"spatial",
+	"array[datetime]",
+	"array[numeric]",
+	"array[hierarchy]",
+	"array[spatial]"
+];
+var SlotStore = class {
+	constructor() {
+		this.slotContents = signal([]), this.slotsContents = signal([]), this.periodOverPeriodUiType = signal(null), this.linkedDataset = signal([]), this._popEnabledChartTypes = [
+			"area-chart",
+			"bar-chart",
+			"combination-chart",
+			"column-chart",
+			"line-chart"
+		], this.activeSlotContents = computed(() => this.slotContents.get()[this.activeIndex.get()]), this.activeIndex = signal(0);
+	}
+	isArrayColumnType(a) {
+		return a.startsWith("array[");
+	}
+	setPeriodOverPeriodCondition(a, P) {
+		if (!P?.periodOverPeriod?.newUi) {
+			this.periodOverPeriodUiType.set(this.oldConditionalLogic(a));
+			return;
+		}
+		this.periodOverPeriodUiType.set(this.getUiConditionToApply(P));
+	}
+	getUiConditionToApply(a) {
+		let P = this.hasDatetimeColumnOnCategoryOrXAxis(), F = a?.periodOverPeriod?.hasConnectedComparisonFilter, I = this.linkedDataset.get().some(({ columns: a }) => a?.some((a) => a.type === "datetime"));
+		return !P && !F && !I ? null : P && F ? PeriodOverPeriodCondition.HasDatetimeColumnAndComparisonFilters : P && !F ? PeriodOverPeriodCondition.HasDatetimeColumnAndNoComparisonFilters : !P && F ? PeriodOverPeriodCondition.NoDatetimeColumnButComparisonFilters : PeriodOverPeriodCondition.NoDatetimeColumnAndNoComparisonFilters;
+	}
+	oldConditionalLogic(a) {
+		let P = this.slotsContents.get() ?? [], F = (P.find((a) => [
+			"y-axis",
+			"x-axis",
+			"row"
+		].includes(a.name))?.content ?? [])?.[0] ?? null, I = P.find((a) => a.name === "measure")?.content ?? [];
+		return F && this._popEnabledChartTypes.includes(a) && F.type === "datetime" && !this.isArrayColumnType(F.type) && !F.datetimeDisplayMode && F.level !== 4 && I.length > 0 ? PeriodOverPeriodCondition.OldImplementation : null;
+	}
+	hasDatetimeColumnOnCategoryOrXAxis() {
+		let a = ((this.slotsContents.get() ?? []).find((a) => ["y-axis", "x-axis"].includes(a.name))?.content ?? [])?.[0] ?? null;
+		return !!(a && a.type === "datetime" && !this.isArrayColumnType(a.type));
+	}
+	setContents(a, P) {
+		if (this.slotContents.set(a), this.activeIndex.get() >= a.length && this.activeIndex.set(a.length > 0 ? a.length - 1 : 0), P) {
+			let F = structuredClone(this.slotsContents.get()) ?? [], I = F.find((a) => a.name === P);
+			I && (I.content = a), this.setFullContents(F);
+		}
+	}
+	setFullContents(a) {
+		this.slotsContents.set(a);
+	}
+	updateActive(a) {
+		a >= 0 && a < this.slotContents.get().length && this.activeIndex.set(a);
+	}
+	updateContent(a, P = this.activeIndex.get()) {
+		if (P < 0 || P >= this.slotContents.get().length) return;
+		let F = [...this.slotContents.get()];
+		F[P] = structuredClone(a), this.slotContents.set(F);
+	}
+	removeContent(a) {
+		if (a < 0 || a >= this.slotContents.get().length) return;
+		let P = this.slotContents.get().filter((P, F) => F !== a);
+		this.slotContents.set(P), this.activeIndex.get() >= P.length && this.activeIndex.set(P.length > 0 ? P.length - 1 : 0);
+	}
+};
+function makeDraggable({ element: a, handle: P, boundary: F = document.documentElement, onDragStart: I, onDragEnd: L }) {
+	if (!a || !P) throw Error("makeDraggable: element and handle are required");
+	let R = a.ownerDocument ?? document, z = -1, B = 0, V = 0, H = 0, U = 0, W = 0, G = 0, K = 0, q = 0, J = (P) => {
+		if (P.pointerId !== z) return;
+		let I = P.clientX - B, L = P.clientY - V, R = (F ?? document.documentElement).getBoundingClientRect(), J = H + I, Y = U + L;
+		J = Math.min(Math.max(J, R.left), R.right - W), Y = Math.min(Math.max(Y, R.top), R.bottom - G);
+		let X = J - H, Z = Y - U, Q = K + X, $ = q + Z;
+		a.style.transform = `translate3d(${Q}px, ${$}px, 0)`;
+	}, Y = (a) => {
+		a.pointerId === z && (R.removeEventListener("pointermove", J), R.removeEventListener("pointerup", Y), z = -1, L?.());
+	}, X = (F) => {
+		if (F.button !== 0) return;
+		z = F.pointerId;
+		let L = a.getBoundingClientRect();
+		H = L.left, U = L.top, W = L.width, G = L.height, B = F.clientX, V = F.clientY;
+		try {
+			let P = R.defaultView?.getComputedStyle(a);
+			if (P) {
+				let a = new DOMMatrixReadOnly(P.transform);
+				K = a.m41, q = a.m42;
+			}
+		} catch {
+			K = 0, q = 0;
+		}
+		P.setPointerCapture(z), R.addEventListener("pointermove", J), R.addEventListener("pointerup", Y), I?.();
+	};
+	return P.addEventListener("pointerdown", X), () => {
+		P.removeEventListener("pointerdown", X), R.removeEventListener("pointermove", J), R.removeEventListener("pointerup", Y);
+	};
+}
+var durations = {
+	none: 0,
+	small: 100,
+	medium: 350,
+	large: 700
+}, EXITING_MOTION_MULTIPLIER = .5;
+durations.none, durations.small * EXITING_MOTION_MULTIPLIER, durations.medium * EXITING_MOTION_MULTIPLIER, durations.large * EXITING_MOTION_MULTIPLIER;
+function triggerPostMoveFlash(a) {
+	a.animate([{ backgroundColor: "var(--ds-background-selected, #E9F2FF)" }, {}], {
+		duration: durations.large,
+		easing: "cubic-bezier(0.25, 0.1, 0.25, 1.0)",
+		iterations: 1
+	});
+}
+function ownKeys(a, P) {
+	var F = Object.keys(a);
+	if (Object.getOwnPropertySymbols) {
+		var I = Object.getOwnPropertySymbols(a);
+		P && (I = I.filter(function(P) {
+			return Object.getOwnPropertyDescriptor(a, P).enumerable;
+		})), F.push.apply(F, I);
+	}
+	return F;
+}
+function _objectSpread(P) {
+	for (var F = 1; F < arguments.length; F++) {
+		var I = arguments[F] == null ? {} : arguments[F];
+		F % 2 ? ownKeys(Object(I), !0).forEach(function(F) {
+			_defineProperty(P, F, I[F]);
+		}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(P, Object.getOwnPropertyDescriptors(I)) : ownKeys(Object(I)).forEach(function(a) {
+			Object.defineProperty(P, a, Object.getOwnPropertyDescriptor(I, a));
+		});
+	}
+	return P;
+}
+var getDistanceToEdge = {
+	top: function(a, P) {
+		return Math.abs(P.y - a.top);
+	},
+	right: function(a, P) {
+		return Math.abs(a.right - P.x);
+	},
+	bottom: function(a, P) {
+		return Math.abs(a.bottom - P.y);
+	},
+	left: function(a, P) {
+		return Math.abs(P.x - a.left);
+	}
+}, uniqueKey = Symbol("closestEdge");
+function attachClosestEdge(P, F) {
+	var I = F.element, L = F.input, R = F.allowedEdges, z = {
+		x: L.clientX,
+		y: L.clientY
+	}, B = I.getBoundingClientRect(), V = R.map(function(a) {
+		return {
+			edge: a,
+			value: getDistanceToEdge[a](B, z)
+		};
+	}).sort(function(a, P) {
+		return a.value - P.value;
+	})[0]?.edge ?? null;
+	return _objectSpread(_objectSpread({}, P), {}, _defineProperty({}, uniqueKey, V));
+}
+function extractClosestEdge(a) {
+	return a[uniqueKey] ?? null;
+}
+var slot_menu_list_module_default = ":host{font-family:var(--luzmo-slot-menu-list-font-family,var(--luzmo-font-family));font-size:var(--luzmo-slot-menu-list-font-size,var(--slot-menu-list-font-size));color:var(--luzmo-slot-menu-listfont-color,var(--luzmo-font-color))}ul{margin:0;padding:0;list-style:none}:host{max-height:var(--luzmo-slot-menu-list-max-height,var(--slot-menu-list-max-height));border-right:var(--luzmo-slot-menu-list-border-right-width,var(--luzmo-border-width))solid var(--luzmo-slot-menu-list-border-right-color,var(--luzmo-border-color));margin:0;padding:0;list-style:none;overflow-y:auto}:host li{cursor:pointer;position:relative}:host li:hover{background-color:var(--luzmo-slot-menu-list-background-color-hover,var(--slot-menu-list-background-color-hover))}:host li{border-bottom:var(--luzmo-slot-menu-list-border-bottom-width,var(--slot-menu-list-border-bottom-width))solid var(--luzmo-slot-menu-list-border-bottom-color,var(--slot-menu-list-border-bottom-color))}:host .active{background-color:var(--luzmo-slot-menu-list-active-background-color,var(--slot-menu-list-active-background-color));color:var(--luzmo-slot-menu-list-active-color,var(--slot-menu-list-active-color))}:host .active:hover{background-color:var(--luzmo-slot-menu-list-active-background-color-hover,var(--slot-menu-list-active-background-color-hover))}:host .active .draggable-slot-content:focus-visible{background-color:var(--luzmo-slot-menu-list-active-background-color-hover,var(--slot-menu-list-active-background-color-hover));outline:none}:host .active .draggable-slot-content-remove:focus-visible{outline-color:var(--luzmo-slot-menu-list-active-color,var(--slot-menu-list-active-color));background-color:var(--luzmo-slot-menu-list-active-background-color-hover,var(--slot-menu-list-active-background-color-hover))}.drop-indicator{height:var(--luzmo-slot-menu-list-drop-indicator-height,var(--slot-menu-list-drop-indicator-height));background-color:var(--luzmo-slot-menu-list-drop-indicator-color,var(--slot-menu-list-drop-indicator-color));position:absolute;left:0;right:0}.drop-indicator:before{content:\"\";border:var(--luzmo-slot-menu-list-drop-indicator-height,var(--slot-menu-list-drop-indicator-height))solid var(--luzmo-slot-menu-list-drop-indicator-color,var(--slot-menu-list-drop-indicator-color));background:var(--luzmo-slot-menu-list-drop-indicator-background,var(--luzmo-background-color));width:100%;left:calc(-.5*(var(--luzmo-slot-menu-list-drop-indicator-circle-size,var(--slot-menu-list-drop-indicator-circle-size)) + var(--luzmo-slot-menu-list-drop-indicator-height,var(--slot-menu-list-drop-indicator-height))));top:calc(-.5*(var(--luzmo-slot-menu-list-drop-indicator-circle-size,var(--slot-menu-list-drop-indicator-circle-size)) + var(--luzmo-slot-menu-list-drop-indicator-height,var(--slot-menu-list-drop-indicator-height))));height:var(--luzmo-slot-menu-list-drop-indicator-circle-size,var(--slot-menu-list-drop-indicator-circle-size));width:var(--luzmo-slot-menu-list-drop-indicator-circle-size,var(--slot-menu-list-drop-indicator-circle-size));border-radius:50%;display:block;position:absolute}.drop-indicator[data-edge=top]{top:calc(-.5*var(--luzmo-slot-menu-list-drop-indicator-height,var(--slot-menu-list-drop-indicator-height)))}.drop-indicator[data-edge=bottom]{bottom:calc(-.5*var(--luzmo-slot-menu-list-drop-indicator-height,var(--slot-menu-list-drop-indicator-height)))}.draggable-slot-content{justify-content:space-between;gap:var(--luzmo-slot-menu-label-to-icon-gap,var(--slot-menu-label-to-icon-gap));touch-action:none;cursor:pointer;align-items:center;display:flex}.draggable-slot-content:focus-visible{background-color:color-mix(in srgb,var(--luzmo-primary)20%,transparent);outline:none}.draggable-slot-content .draggable-slot-content-label{padding-block:var(--luzmo-slot-menu-list-item-vertical-padding,var(--slot-menu-list-item-vertical-padding));text-overflow:ellipsis;white-space:nowrap;font:inherit;color:inherit;cursor:inherit;text-align:start;background:0 0;border:none;flex:auto;padding-inline-start:var(--luzmo-slot-menu-list-item-horizontal-padding,var(--slot-menu-list-item-horizontal-padding));overflow:hidden}.draggable-slot-content .draggable-slot-content-remove{padding:var(--luzmo-spacing-1);font:inherit;color:inherit;cursor:inherit;border-radius:var(--luzmo-border-radius);background:0 0;border:none;flex:none;justify-content:center;align-items:center;margin-inline-end:var(--luzmo-slot-menu-list-item-horizontal-padding,var(--slot-menu-list-item-horizontal-padding));display:flex}.draggable-slot-content .draggable-slot-content-remove:focus-visible{outline:var(--luzmo-indicator-width)solid var(--luzmo-indicator-color);outline-offset:1px}:host{--slot-menu-list-active-background-color:var(--luzmo-primary);--slot-menu-list-active-background-color-hover:var(--luzmo-primary-hover);--slot-menu-list-active-color:var(--luzmo-primary-inverse-color);--slot-menu-list-background-color-hover:var(--luzmo-background-color-hover);--slot-menu-list-drop-indicator-color:var(--luzmo-font-color-down);--slot-menu-list-drop-indicator-height:2px;--slot-menu-list-drop-indicator-circle-size:4px;--slot-menu-list-border-bottom-width:0px;--slot-menu-list-border-bottom-color:transparent;--slot-menu-list-max-height:calc(var(--luzmo-component-height)*4);--slot-menu-display-settings-min-width:19rem;--slot-menu-min-height:calc(var(--luzmo-component-height)*2);--slot-menu-font-size:var(--luzmo-font-size);--slot-menu-list-item-horizontal-padding:var(--luzmo-spacing-4);--slot-menu-list-item-vertical-padding:var(--luzmo-spacing-3);--slot-menu-label-to-icon-gap:var(--luzmo-spacing-3)}:host([size=s]){--slot-menu-display-settings-min-width:16rem;--slot-menu-min-height:calc(var(--luzmo-component-height-s)*2);--slot-menu-font-size:var(--luzmo-font-size-s);--slot-menu-list-item-horizontal-padding:var(--luzmo-spacing-3);--slot-menu-list-item-vertical-padding:var(--luzmo-spacing-3);--slot-menu-label-to-icon-gap:var(--luzmo-spacing-2)}:host([size=l]){--slot-menu-display-settings-min-width:23rem;--slot-menu-min-height:calc(var(--luzmo-component-height-l)*2);--slot-menu-font-size:var(--luzmo-font-size-l);--slot-menu-list-item-horizontal-padding:var(--luzmo-spacing-5);--slot-menu-list-item-vertical-padding:var(--luzmo-spacing-3);--slot-menu-label-to-icon-gap:var(--luzmo-spacing-4)}:host([size=xl]){--slot-menu-display-settings-min-width:26rem;--slot-menu-min-height:calc(var(--luzmo-component-height-xl)*2);--slot-menu-font-size:var(--luzmo-font-size-xl);--slot-menu-list-item-horizontal-padding:var(--luzmo-spacing-5);--slot-menu-list-item-vertical-padding:var(--luzmo-spacing-4);--slot-menu-label-to-icon-gap:var(--luzmo-spacing-5)}", LuzmoSlotMenuList = class extends SizedMixin(LuzmoElement, { validSizes: Object.values(ElementSizes) }) {
+	constructor(...a) {
+		super(...a), this.language = "en", this.contentLanguage = "en", this.slotContents = [], this.activeIndex = 0, this._sendChangeEvent = () => {
+			this.dispatchEvent(new CustomEvent("luzmo-slot-list-changed", {
+				bubbles: !0,
+				composed: !0,
+				cancelable: !0,
+				detail: {
+					slotContents: structuredClone(this.slotContents),
+					activeIndex: this.activeIndex
+				}
+			}));
+		}, this._cleanupFns = [], this._attachAll = () => {
+			[...this._draggableSlotContentElements]?.forEach((a) => {
+				let R = this._sendChangeEvent.bind(this), z = this, B = draggable({
+					element: a,
+					onGenerateDragPreview({ nativeSetDragImage: P }) {
+						setCustomNativeDragPreview({
+							nativeSetDragImage: P,
+							render({ container: P }) {
+								let F = document.createElement("div");
+								F.classList.add("drag-preview");
+								let I = {};
+								[
+									[
+										"borderColor",
+										"--luzmo-slot-menu-list-border-color",
+										"--luzmo-border-color"
+									],
+									[
+										"backgroundColor",
+										"--luzmo-slot-menu-list-background-color",
+										"--luzmo-background-color"
+									],
+									[
+										"color",
+										"--luzmo-slot-menu-list-font-color",
+										"--slot-menu-list-font-color"
+									],
+									[
+										"fontSize",
+										"--luzmo-slot-menu-list-font-size",
+										"--slot-menu-list-font-size"
+									],
+									[
+										"horizontalPadding",
+										"--luzmo-slot-menu-list-item-horizontal-padding",
+										"--slot-menu-list-item-horizontal-padding"
+									],
+									[
+										"verticalPadding",
+										"--luzmo-slot-menu-list-item-vertical-padding",
+										"--slot-menu-list-item-vertical-padding"
+									],
+									[
+										"borderRadius",
+										"--luzmo-slot-menu-list-border-radius",
+										"--luzmo-border-radius"
+									],
+									[
+										"fontFamily",
+										"--luzmo-slot-menu-list-font-family",
+										"--luzmo-font-family"
+									]
+								].forEach(([P, F, R]) => {
+									I[P] = getCssVariableValue(a, F) || getCssVariableValue(a, R);
+								}), F.textContent = a.querySelector("[data-task-content]")?.textContent ?? a.textContent, Object.assign(F.style, {
+									border: `1px solid ${I.borderColor}`,
+									backgroundColor: I.backgroundColor,
+									borderRadius: I.borderRadius,
+									fontFamily: I.fontFamily,
+									fontSize: I.fontSize,
+									color: I.color,
+									paddingInline: `${I.horizontalPadding}`,
+									paddingBlock: `${I.verticalPadding}`
+								}), P.append(F);
+							}
+						});
+					},
+					getInitialData() {
+						let P = a.parentElement, F = 0;
+						return P && (F = [...P.parentElement?.children ?? []].indexOf(P)), { index: F };
+					},
+					onDragStart() {
+						a.style.opacity = "0.5";
+					},
+					onDrop() {
+						a.style.opacity = "1";
+					}
+				});
+				this._cleanupFns.push(B);
+				let V = dropTargetForElements({
+					element: a,
+					canDrop({ source: P }) {
+						return P.element === a ? !1 : P?.element?.classList.contains("draggable-slot-content");
+					},
+					getData(P) {
+						return attachClosestEdge({}, {
+							element: a,
+							input: P.input,
+							allowedEdges: ["top", "bottom"]
+						});
+					},
+					getIsSticky() {
+						return !0;
+					},
+					onDragEnter({ self: P }) {
+						let F = extractClosestEdge(P.data);
+						if (!F) return;
+						let I = document.createElement("div");
+						I.classList.add("drop-indicator"), I.dataset.edge = F, a.after(I);
+					},
+					onDrag({ self: P }) {
+						let F = extractClosestEdge(P.data);
+						if (!F) {
+							a.nextElementSibling?.remove();
+							return;
+						}
+						if (a.nextElementSibling?.getAttribute("data-edge") === F) return;
+						a.nextElementSibling?.remove();
+						let I = document.createElement("div");
+						I.classList.add("drop-indicator"), I.dataset.edge = F, a.after(I);
+					},
+					onDragLeave() {
+						a.nextElementSibling?.remove();
+					},
+					onDrop({ self: P, source: F }) {
+						a.nextElementSibling?.remove();
+						let I = extractClosestEdge(P.data), L = P.element.parentElement;
+						if (typeof F.data.index == "number" && L) {
+							let a = [...L.parentElement?.children ?? []].indexOf(L);
+							I === "bottom" && F.data.index >= a && a < (L?.parentElement?.children?.length ?? 0) - 1 ? a += 1 : I === "top" && a > F.data.index && --a;
+							let P = z.activeIndex, R = F.data.index, B = a, V = z.slotContents[R];
+							z.slotContents.splice(R, 1), z.slotContents.splice(B, 0, V), R === P ? z.activeIndex = B : R < P && B >= P ? z.activeIndex = P - 1 : R > P && B <= P && (z.activeIndex = P + 1);
+						}
+						I && (triggerPostMoveFlash(F.element), z.requestUpdate(), R());
+					}
+				});
+				this._cleanupFns.push(V);
+			});
+		}, this._detachAll = () => {
+			this._cleanupFns.forEach((a) => a()), this._cleanupFns = [];
+		};
+	}
+	static get styles() {
+		return [unsafeCSS(slot_menu_list_module_default)];
+	}
+	willUpdate() {
+		this._detachAll();
+	}
+	updated() {
+		this._attachAll();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this._detachAll();
+	}
+	setActiveIndex(a) {
+		this.activeIndex = a, this._sendChangeEvent();
+	}
+	removeSlotContent(a) {
+		this.slotContents = this.slotContents.filter((P, F) => F !== a), this.activeIndex = this.slotContents.length === 0 ? 0 : Math.min(this.activeIndex, this.slotContents.length - 1), this._sendChangeEvent();
+	}
+	_moveItem(a, P) {
+		let F = this.slotContents[a], I = [...this.slotContents];
+		I.splice(a, 1), I.splice(P, 0, F), this.slotContents = I, this.activeIndex === a ? this.activeIndex = P : a < this.activeIndex && P >= this.activeIndex ? --this.activeIndex : a > this.activeIndex && P <= this.activeIndex && (this.activeIndex += 1), this._sendChangeEvent(), this.updateComplete.then(() => this._draggableSlotContentElements[P]?.focus());
+	}
+	_handleContentKeydown(a, P) {
+		switch (P.key) {
+			case " ":
+			case "Enter":
+				P.preventDefault(), this.setActiveIndex(a);
+				break;
+			case "ArrowUp":
+				P.preventDefault(), P.altKey && a > 0 ? this._moveItem(a, a - 1) : !P.altKey && a > 0 && this._draggableSlotContentElements[a - 1]?.focus();
+				break;
+			case "ArrowDown":
+				P.preventDefault(), P.altKey && a < this.slotContents.length - 1 ? this._moveItem(a, a + 1) : !P.altKey && a < this.slotContents.length - 1 && this._draggableSlotContentElements[a + 1]?.focus();
+				break;
+		}
+	}
+	_handleTrashClick(a, P) {
+		P.stopPropagation(), this.removeSlotContent(a);
+	}
+	_handleTrashKeydown(a) {
+		(a.key === " " || a.key === "Enter") && a.stopPropagation();
+	}
+	render() {
+		let a = this.slotContents.map((a, P) => {
+			let F = localize(a.label ?? {}, this.contentLanguage), I = P === this.activeIndex;
+			return html`<li class=${I ? "active" : ""}>
+          <div class="draggable-slot-content"
+            tabindex="0"
+            role="option"
+            aria-selected=${I ? "true" : "false"}
+            @click=${this.setActiveIndex.bind(this, P)}
+            @keydown=${this._handleContentKeydown.bind(this, P)}
+          >
+            <span class="draggable-slot-content-label" data-task-content>${F}</span>
+            <button
+              class="draggable-slot-content-remove"
+              aria-label=${msg("Remove", { desc: "Remove button label" })}
+              @click=${this._handleTrashClick.bind(this, P)}
+              @keydown=${this._handleTrashKeydown}
+            >
+              ${luzmoIcon(luzmoTrashOutline)}
+            </button>
+          </div>
+        </li>`;
+		});
+		return html`<ul role="listbox" aria-label=${msg("Slot contents", { desc: "Accessible label for slot menu content list" })}>${a}</ul>`;
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: !0
+})], LuzmoSlotMenuList.prototype, "language", void 0), __decorate([property({
+	type: String,
+	attribute: "content-language",
+	reflect: !0
+})], LuzmoSlotMenuList.prototype, "contentLanguage", void 0), __decorate([queryAll(".draggable-slot-content")], LuzmoSlotMenuList.prototype, "_draggableSlotContentElements", void 0), __decorate([property({ type: Array })], LuzmoSlotMenuList.prototype, "slotContents", void 0), __decorate([property({ type: Number })], LuzmoSlotMenuList.prototype, "activeIndex", void 0), customElements.get("luzmo-slot-menu-list") || customElements.define("luzmo-slot-menu-list", LuzmoSlotMenuList);
+var slot_menu_module_default = ":host{font-family:var(--luzmo-slot-menu-font-family,var(--luzmo-font-family));font-size:var(--luzmo-slot-menu-font-size,var(--slot-menu-font-size));color:var(--luzmo-slot-menu-font-color,var(--luzmo-font-color));width:fit-content;display:block}luzmo-slot-menu-list{min-width:var(--luzmo-slot-menu-list-min-width,var(--slot-menu-list-min-width));max-width:var(--luzmo-slot-menu-list-max-width,var(--slot-menu-list-max-width));background-color:var(--luzmo-slot-menu-list-background-color,var(--slot-menu-list-background-color));border-bottom-left-radius:var(--luzmo-slot-menu-list-border-radius,var(--slot-menu-list-border-radius))}.slot-contents-container{border:var(--luzmo-slot-menu-border-width,var(--luzmo-border-width))solid var(--luzmo-slot-menu-border-color,var(--luzmo-border-color));border-radius:var(--luzmo-slot-menu-border-radius,var(--luzmo-border-radius));background:var(--luzmo-slot-menu-background-color,var(--luzmo-background-color));--slot-menu-popup-filter:drop-shadow(var(--luzmo-slot-menu-popup-shadow-horizontal,var(--slot-menu-popup-shadow-horizontal))var(--luzmo-slot-menu-popup-shadow-vertical,var(--slot-menu-popup-shadow-vertical))var(--luzmo-slot-menu-popup-shadow-blur,var(--slot-menu-popup-shadow-blur))var(--luzmo-slot-menu-popup-shadow-color,var(--slot-menu-popup-shadow-color)));filter:var(--luzmo-slot-menu-popup-filter,var(--slot-menu-popup-filter));border-top-left-radius:0;position:relative}.slot-contents-container .inner-container{display:flex}.slot-contents-container .inner-container luzmo-display-settings{min-width:var(--luzmo-slot-menu-display-settings-min-width,var(--slot-menu-display-settings-min-width));padding:var(--luzmo-slot-menu-display-settings-vertical-padding,var(--slot-menu-display-settings-vertical-padding))var(--luzmo-slot-menu-display-settings-horizontal-padding,var(--slot-menu-display-settings-horizontal-padding))}:host([variant=popup]) .slot-contents-container{border-top-left-radius:var(--luzmo-slot-menu-border-radius,var(--luzmo-border-radius));overflow:hidden}.slot-menu-top-menu{border-radius:var(--luzmo-slot-menu-border-radius,var(--luzmo-border-radius));border-bottom-right-radius:0;border-bottom-left-radius:0;align-items:center;width:fit-content;display:flex;overflow:hidden}.drag-handle{background-color:var(--luzmo-slot-menu-drag-handle-background-color,var(--luzmo-background-color-highlight));cursor:move;border:var(--luzmo-slot-menu-drag-handle-border-width,var(--slot-menu-drag-handle-border-width))solid var(--luzmo-slot-menu-border-color,var(--luzmo-background-color-highlight));width:fit-content;font-size:var(--luzmo-slot-menu-drag-handle-size,var(--slot-menu-drag-handle-size));padding:var(--luzmo-slot-menu-drag-handle-vertical-padding,var(--slot-menu-drag-handle-vertical-padding))var(--luzmo-slot-menu-drag-handle-horizontal-padding,var(--slot-menu-drag-handle-horizontal-padding))}.drag-handle:hover{background-color:var(--luzmo-slot-menu-drag-handle-background-color-hover,var(--luzmo-background-color-highlight-hover))}.drag-handle:focus-visible{box-shadow:0 0 0 var(--luzmo-indicator-width)var(--luzmo-indicator-color)}.slot-content-action{max-width:var(--luzmo-slot-menu-top-menu-label-max-width,var(--slot-menu-top-menu-label-max-width));gap:var(--luzmo-slot-menu-label-to-icon-gap,var(--slot-menu-label-to-icon-gap));background-color:var(--luzmo-slot-menu-content-label-background-color,var(--luzmo-primary));color:var(--luzmo-slot-menu-content-label-color,var(--luzmo-primary-inverse-color));border:var(--luzmo-slot-menu-border-width,var(--luzmo-border-width))solid var(--luzmo-slot-menu-content-label-border-color,var(--luzmo-primary));padding:var(--luzmo-slot-menu-drag-handle-vertical-padding,var(--slot-menu-drag-handle-vertical-padding))var(--luzmo-slot-menu-drag-handle-horizontal-padding,var(--slot-menu-drag-handle-horizontal-padding));flex:0 auto;display:flex}.slot-content-action:hover{background-color:var(--luzmo-slot-menu-content-label-background-color-hover,var(--luzmo-primary-hover))}.slot-content-action:focus{background-color:var(--luzmo-slot-menu-content-label-background-color-focus,var(--luzmo-primary-focus))}.slot-content-action .slot-content-label{white-space:nowrap;text-overflow:ellipsis;flex:auto;overflow:hidden}.slot-content-action .slot-content-remove{cursor:pointer;border-radius:var(--luzmo-slot-menu-border-radius,var(--luzmo-border-radius));font:inherit;color:inherit;background:0 0;border:none;flex:none;padding:0}.slot-content-action .slot-content-remove:focus-visible{background-color:var(--luzmo-slot-menu-content-label-background-color-focus,var(--luzmo-primary-focus));box-shadow:0 0 0 var(--luzmo-indicator-width)var(--luzmo-slot-menu-content-label-color,var(--luzmo-primary-inverse-color));outline:none}.close{font:inherit;color:inherit;right:var(--luzmo-slot-menu-close-icon-right,var(--slot-menu-close-icon-right));cursor:pointer;top:calc(-2*var(--luzmo-slot-menu-border-width,var(--luzmo-border-width)));background:0 0;background-color:var(--luzmo-slot-menu-close-button-background-color,var(--luzmo-background-color-highlight));font-size:var(--luzmo-slot-menu-close-button-size,var(--slot-menu-close-button-size));border:none;border:var(--luzmo-slot-menu-border-width,var(--luzmo-border-width))solid var(--luzmo-slot-menu-border-color,var(--luzmo-border-color));border-radius:var(--luzmo-slot-menu-border-radius,var(--luzmo-border-radius));padding:0;padding:var(--luzmo-slot-menu-close-button-vertical-padding,var(--slot-menu-close-button-vertical-padding))var(--luzmo-slot-menu-close-button-horizontal-padding,var(--slot-menu-close-button-horizontal-padding));border-top-left-radius:0;border-top-right-radius:0;position:absolute}.close:hover{background-color:var(--luzmo-slot-menu-close-button-background-color-hover,var(--luzmo-background-color-highlight-hover))}.close:focus-visible{border-color:var(--luzmo-indicator-color);outline:none}:host{--slot-menu-display-settings-min-width:19rem;--slot-menu-min-height:calc(var(--luzmo-component-height)*2);--slot-menu-font-size:var(--luzmo-font-size);--slot-menu-display-settings-horizontal-padding:var(--luzmo-spacing-5);--slot-menu-display-settings-vertical-padding:var(--luzmo-spacing-4);--slot-menu-top-menu-label-max-width:12rem;--slot-menu-list-min-width:8rem;--slot-menu-list-max-width:12rem;--slot-menu-label-to-icon-gap:var(--luzmo-spacing-3);--slot-menu-drag-handle-size:var(--luzmo-font-size);--slot-menu-drag-handle-vertical-padding:var(--luzmo-spacing-2);--slot-menu-drag-handle-horizontal-padding:var(--luzmo-spacing-3);--slot-menu-drag-handle-border-width:var(--luzmo-border-width)--slot-menu-close-button-size: var(--luzmo-font-size-s);--slot-menu-close-button-vertical-padding:var(--luzmo-spacing-2);--slot-menu-close-button-horizontal-padding:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--slot-menu-popup-shadow-horizontal:0;--slot-menu-popup-shadow-vertical:1px;--slot-menu-popup-shadow-blur:4px;--slot-menu-popup-shadow-color:var(--luzmo-border-color);--slot-menu-popup-box-shadow:var(--slot-menu-popup-shadow-horizontal)var(--slot-menu-popup-shadow-vertical)var(--slot-menu-popup-shadow-blur)var(--slot-menu-popup-shadow-color);--slot-menu-close-icon-right:1rem;--slot-menu-list-border-radius:var(--luzmo-border-radius)}:host([size=s]){--slot-menu-display-settings-min-width:16rem;--slot-menu-min-height:calc(var(--luzmo-component-height-s)*2);--slot-menu-font-size:var(--luzmo-font-size-s);--slot-menu-display-settings-horizontal-padding:var(--luzmo-spacing-4);--slot-menu-display-settings-vertical-padding:var(--luzmo-spacing-3);--slot-menu-top-menu-label-max-width:10rem;--slot-menu-list-min-width:6rem;--slot-menu-list-max-width:10rem;--slot-menu-label-to-icon-gap:var(--luzmo-spacing-2);--slot-menu-drag-handle-size:var(--luzmo-font-size-s);--slot-menu-drag-handle-vertical-padding:var(--luzmo-spacing-2);--slot-menu-drag-handle-horizontal-padding:var(--luzmo-spacing-3);--slot-menu-close-button-size:var(--luzmo-font-size-xs);--slot-menu-close-button-vertical-padding:var(--luzmo-spacing-2);--slot-menu-close-button-horizontal-padding:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1))}:host([size=l]){--slot-menu-display-settings-min-width:23rem;--slot-menu-min-height:calc(var(--luzmo-component-height-l)*2);--slot-menu-font-size:var(--luzmo-font-size-l);--slot-menu-display-settings-horizontal-padding:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--slot-menu-display-settings-vertical-padding:var(--luzmo-spacing-5);--slot-menu-top-menu-label-max-width:14rem;--slot-menu-list-min-width:9rem;--slot-menu-list-max-width:14rem;--slot-menu-label-to-icon-gap:var(--luzmo-spacing-4);--slot-menu-drag-handle-size:var(--luzmo-font-size-l);--slot-menu-drag-handle-vertical-padding:var(--luzmo-spacing-3);--slot-menu-drag-handle-horizontal-padding:var(--luzmo-spacing-3);--slot-menu-close-button-size:var(--luzmo-font-size);--slot-menu-close-button-vertical-padding:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--slot-menu-close-button-horizontal-padding:var(--luzmo-spacing-3)}:host([size=xl]){--slot-menu-display-settings-min-width:26rem;--slot-menu-min-height:calc(var(--luzmo-component-height-xl)*2);--slot-menu-font-size:var(--luzmo-font-size-xl);--slot-menu-display-settings-horizontal-padding:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-2));--slot-menu-display-settings-vertical-padding:var(--luzmo-spacing-5);--slot-menu-top-menu-label-max-width:16rem;--slot-menu-list-min-width:10rem;--slot-menu-list-max-width:16rem;--slot-menu-label-to-icon-gap:var(--luzmo-spacing-5);--slot-menu-drag-handle-size:var(--luzmo-font-size-xl);--slot-menu-drag-handle-vertical-padding:var(--luzmo-spacing-3);--slot-menu-drag-handle-horizontal-padding:var(--luzmo-spacing-4);--slot-menu-close-button-size:var(--luzmo-font-size-l);--slot-menu-close-button-vertical-padding:var(--luzmo-spacing-3);--slot-menu-close-button-horizontal-padding:var(--luzmo-spacing-3)}", LuzmoSlotMenu = class extends SignalWatcher(SizedMixin(LuzmoElement, { validSizes: Object.values(ElementSizes) })) {
+	constructor(...a) {
+		super(...a), this.language = "en", this.contentLanguage = "en", this.slotType = "numeric", this.variant = "draggable", this._periodOverPeriodUiType = null, this.measureColumns = [], this.apiUrl = "https://api.luzmo.com", this.authKey = "", this.authToken = "", this._slotContents = [], this._activeIndex = this.slotIndex ?? 0, this._linkedDatasetsIds = [];
+	}
+	static get styles() {
+		return [unsafeCSS(slot_menu_module_default)];
+	}
+	get _store() {
+		return this._consumedStore ? this._consumedStore : (this._ownStore || (this._ownStore = new SlotStore(), new ContextProvider(this, {
+			context: slotContext,
+			initialValue: this._ownStore
+		})), this._ownStore);
+	}
+	get _currentSlotContent() {
+		return this._slotContents[this.slotIndex ?? this._activeIndex] ?? {};
+	}
+	get _currentLabel() {
+		return localize(this._currentSlotContent.label, this.contentLanguage) ?? "Untitled";
+	}
+	connectedCallback() {
+		let a = {};
+		this.apiUrl && (a.apiUrl = this.apiUrl), this.authKey && this.authToken && (a.authKey = this.authKey, a.authToken = this.authToken), dataBroker.configure(a), super.connectedCallback(), this._attachDragHandle();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this._cleanupDrag &&= (this._cleanupDrag(), void 0);
+	}
+	_attachDragHandle() {
+		if (this._cleanupDrag || this.variant !== "draggable" || this.noDrag) return;
+		let a = this.renderRoot.querySelector(".drag-handle");
+		if (!a) return;
+		let P = this.dragBoundary ? document.querySelector(this.dragBoundary) : document.documentElement;
+		this._cleanupDrag = makeDraggable({
+			element: this,
+			handle: a,
+			boundary: P
+		});
+	}
+	_sendChangeEvent() {
+		let a = this._store.slotContents.get();
+		this.dispatchEvent(new CustomEvent("luzmo-slot-contents-changed", {
+			bubbles: !0,
+			composed: !0,
+			cancelable: !0,
+			detail: {
+				slotContents: structuredClone(a),
+				linkedDatasetsIds: [...this._linkedDatasetsIds]
+			}
+		}));
+	}
+	resetInfoVisibility() {
+		this.displaySettingsElement?.resetInfoVisibility && this.displaySettingsElement.resetInfoVisibility(!1);
+	}
+	_sendCloseEvent() {
+		this.dispatchEvent(new CustomEvent("luzmo-close", {
+			bubbles: !0,
+			composed: !0,
+			cancelable: !0
+		}));
+	}
+	isArrayColumnType(a) {
+		return a.startsWith("array[");
+	}
+	async willUpdate(a) {
+		let P = this._store, F = P.slotContents.get(), I = a.has("slotContents");
+		Array.isArray(this.slotContents) && (F.length === 0 || I) && P.setContents(structuredClone(this.slotContents), this.slotName);
+		let L = P.slotContents.get();
+		if (L !== this._slotContents) {
+			this._slotContents = L;
+			let { set: a, column: F } = this._currentSlotContent;
+			if (a && validate_default(a) && a !== this._lastFetchedDatasetId) {
+				if (this._lastFetchedDatasetId = a, await dataBroker.fetchDatasetsRecursive([a]), !this.isConnected) return;
+				this._linkedDatasetsIds = dataBroker.getLinkedDatasetsIds(a);
+			}
+			let I = dataBroker.getAvailableDatasets();
+			this.measureColumns = I.map((a) => ({
+				datasetId: a.id,
+				datasetName: a.name,
+				columns: a.columns?.filter((a) => a.type === "numeric" && a.id !== F)
+			})), P.activeIndex.get() !== this._activeIndex && P.updateActive(this._activeIndex), this.slotName === "measure" && (P.linkedDataset.set(I.filter((P) => P.id === a)), P.setPeriodOverPeriodCondition(this.itemType, this._currentSlotContent), this._periodOverPeriodUiType = this._currentSlotContent.subtype === "duration" && this.isArrayColumnType(this._currentSlotContent.type) ? null : P.periodOverPeriodUiType.get());
+		}
+	}
+	updated() {
+		this.displaySettingsElement && (this.displaySettingsElement.periodOverPeriodUiType = this._periodOverPeriodUiType, this.displaySettingsElement.measureColumns = this.measureColumns, this.displaySettingsElement.showRemoveButton = this.variant === "popup" && (typeof this.slotIndex == "number" || this._slotContents?.length === 1));
+	}
+	_handleSlotListChange(a) {
+		let P = this._store, F = structuredClone(a.detail.slotContents), I = a.detail.activeIndex;
+		I !== this._activeIndex && (this._activeIndex = I, P.updateActive(I)), P.setContents(F, this.slotName), this._slotContents = P.slotContents.get();
+		let L = this._slotContents[this._activeIndex], R = L?.column ?? L?.columnId, z = L?.set ?? L?.datasetId, B = L?.formula;
+		(R || B) && z && (this.dispatchEvent(new CustomEvent("luzmo-slot-menu-active", {
+			bubbles: !0,
+			composed: !0,
+			detail: { datasetId: z }
+		})), setTimeout(() => {
+			this.dispatchEvent(new CustomEvent("luzmo-slot-menu-highlight", {
+				bubbles: !0,
+				composed: !0,
+				detail: {
+					datasetId: z,
+					level: L?.level ?? 0,
+					...R && { columnId: R },
+					...B && { formulaId: B }
+				}
+			}));
+		})), this._slotContents.length <= 1 && this.requestUpdate(), this._sendChangeEvent();
+	}
+	_handleSlotContentChange(a) {
+		let P = this._store, F = this.slotIndex ?? this._activeIndex;
+		P.updateContent(structuredClone(a.detail.slotContent), F), this._slotContents = P.slotContents.get(), this.slotMenuListElement && (this.slotMenuListElement.slotContents = this._slotContents), this._sendChangeEvent();
+	}
+	removeSlotContent(a) {
+		let P = this._store;
+		P.removeContent(a), this._slotContents = P.slotContents.get(), this._slotContents.length === 0 && this.dispatchEvent(new CustomEvent("luzmo-slot-menu-inactive", {
+			bubbles: !0,
+			composed: !0
+		})), this._sendChangeEvent(), this.close(), this.requestUpdate();
+	}
+	close() {
+		this._sendCloseEvent(), this.resetInfoVisibility();
+	}
+	_removeActiveSlotContent() {
+		this.removeSlotContent(this.slotIndex ?? this._activeIndex);
+	}
+	_handleInfoVisibilityChanged(a) {
+		this.dispatchEvent(new CustomEvent("luzmo-info-visibility-changed", { detail: a.detail }));
+	}
+	render() {
+		let a = `${this.slotType}-${this._currentSlotContent?.type ?? ""}`;
+		return html`<div class="slot-menu-top-menu" role="region" aria-label=${msg("Slot menu", { desc: "Accessible label for slot menu region" })}>
+        ${this.variant === "draggable" ? html`<div class="drag-handle">${luzmoIcon(luzmoArrows)}</div>` : ""}
+        ${this._slotContents && this._slotContents.length === 1 && this.variant !== "popup" ? html` <div class="slot-content-action">
+              <div class="slot-content-label">${this._currentLabel}</div>
+              <button
+                class="slot-content-remove"
+                aria-label=${msg("Remove", { desc: "Remove button label" })}
+                @click=${this.removeSlotContent.bind(this, 0)}
+              >
+                ${luzmoIcon(luzmoTrashOutline)}
+              </button>
+            </div>` : ""}
+      </div>
+      <div
+        class="slot-contents-container ${this._slotContents?.length > 1 ? "multiple" : ""}"
+      >
+        ${this.variant === "popup" ? "" : html`<button class="close" aria-label=${msg("Close", {
+			id: "close-action",
+			desc: "Close button label"
+		})} @click=${this.close}>
+              ${luzmoIcon(luzmoClose12)}
+            </button>`}
+        <div class="inner-container">
+          ${this._slotContents?.length > 1 && typeof this.slotIndex != "number" ? html`<luzmo-slot-menu-list
+                .slotContents=${this._slotContents}
+                .contentLanguage=${this.contentLanguage}
+                .activeIndex=${this.slotIndex ?? this._activeIndex}
+                @luzmo-slot-list-changed=${this._handleSlotListChange}
+              ></luzmo-slot-menu-list>` : ""}
+          ${guard([
+			this.variant,
+			this.language,
+			this.contentLanguage,
+			this._periodOverPeriodUiType,
+			this._activeIndex,
+			this.size,
+			a
+		], () => html`<luzmo-display-settings
+                .size=${this.size}
+                .language=${this.language}
+                .contentLanguage=${this.contentLanguage}
+                .slotType=${this.slotType}
+                .measureColumns=${this.measureColumns}
+                .showRemoveButton=${this.variant === "popup" && (typeof this.slotIndex == "number" || this._slotContents?.length === 1)}
+                .slotContent=${this._currentSlotContent}
+                .areGrandTotalsEnabled=${this.areGrandTotalsEnabled}
+                .areDatetimeOptionsEnabled=${this.areDatetimeOptionsEnabled}
+                .isBinningDisabled=${this.isBinningDisabled}
+                .isAggregationDisabled=${this.isAggregationDisabled}
+                .isCumulativeSumEnabled=${this.isCumulativeSumEnabled}
+                @luzmo-slot-content-changed=${this._handleSlotContentChange}
+                @luzmo-remove-slot-content=${this._removeActiveSlotContent}
+                @luzmo-info-visibility-changed=${this._handleInfoVisibilityChanged}
+              ></luzmo-display-settings>`)}
+        </div>
+      </div>`;
+	}
+	firstUpdated() {
+		this._attachDragHandle();
+	}
+	resetPosition() {
+		this.style.transform = "";
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: !0
+})], LuzmoSlotMenu.prototype, "language", void 0), __decorate([property({
+	type: String,
+	attribute: "content-language",
+	reflect: !0
+})], LuzmoSlotMenu.prototype, "contentLanguage", void 0), __decorate([property({
+	type: String,
+	attribute: "slot-type",
+	reflect: !0
+})], LuzmoSlotMenu.prototype, "slotType", void 0), __decorate([property({
+	type: String,
+	attribute: "slot-name",
+	reflect: !0
+})], LuzmoSlotMenu.prototype, "slotName", void 0), __decorate([property({
+	type: String,
+	attribute: "item-type",
+	reflect: !0
+})], LuzmoSlotMenu.prototype, "itemType", void 0), __decorate([property({
+	type: Boolean,
+	attribute: "no-drag",
+	reflect: !0
+})], LuzmoSlotMenu.prototype, "noDrag", void 0), __decorate([property({
+	type: Boolean,
+	attribute: "no-close",
+	reflect: !0
+})], LuzmoSlotMenu.prototype, "noClose", void 0), __decorate([property({
+	type: String,
+	reflect: !0
+})], LuzmoSlotMenu.prototype, "variant", void 0), __decorate([property({
+	type: Boolean,
+	attribute: "no-top-menu-label",
+	reflect: !0
+})], LuzmoSlotMenu.prototype, "noTopMenuLabel", void 0), __decorate([consume({
+	context: slotContext,
+	subscribe: !0
+})], LuzmoSlotMenu.prototype, "_consumedStore", void 0), __decorate([property({
+	type: String,
+	attribute: "drag-boundary",
+	reflect: !1
+})], LuzmoSlotMenu.prototype, "dragBoundary", void 0), __decorate([property({ type: Boolean })], LuzmoSlotMenu.prototype, "areGrandTotalsEnabled", void 0), __decorate([property({ type: Boolean })], LuzmoSlotMenu.prototype, "areDatetimeOptionsEnabled", void 0), __decorate([property({ type: Boolean })], LuzmoSlotMenu.prototype, "isBinningDisabled", void 0), __decorate([property({ type: Boolean })], LuzmoSlotMenu.prototype, "isAggregationDisabled", void 0), __decorate([property({ type: Boolean })], LuzmoSlotMenu.prototype, "isCumulativeSumEnabled", void 0), __decorate([property({
+	type: Array,
+	reflect: !1,
+	attribute: "slot-contents"
+})], LuzmoSlotMenu.prototype, "slotContents", void 0), __decorate([state()], LuzmoSlotMenu.prototype, "_periodOverPeriodUiType", void 0), __decorate([state()], LuzmoSlotMenu.prototype, "measureColumns", void 0), __decorate([property({
+	type: Number,
+	reflect: !1,
+	attribute: "slot-index"
+})], LuzmoSlotMenu.prototype, "slotIndex", void 0), __decorate([query("luzmo-display-settings")], LuzmoSlotMenu.prototype, "displaySettingsElement", void 0), __decorate([query("luzmo-slot-menu-list")], LuzmoSlotMenu.prototype, "slotMenuListElement", void 0), __decorate([property({
+	type: String,
+	attribute: "api-url",
+	reflect: !0
+})], LuzmoSlotMenu.prototype, "apiUrl", void 0), __decorate([property({
+	type: String,
+	attribute: "auth-key",
+	reflect: !0
+})], LuzmoSlotMenu.prototype, "authKey", void 0), __decorate([property({
+	type: String,
+	attribute: "auth-token",
+	reflect: !0
+})], LuzmoSlotMenu.prototype, "authToken", void 0), __decorate([state()], LuzmoSlotMenu.prototype, "_slotContents", void 0), customElements.get("luzmo-slot-menu") || customElements.define("luzmo-slot-menu", LuzmoSlotMenu);
+export { convertDataFieldToSlotContent as a, DEFAULT_ACCEPTABLE_DATA_FIELD_TYPES as i, LuzmoSlotMenuList as n, LuzmoDisplaySettings as o, SlotStore as r, slotContext as s, LuzmoSlotMenu as t };