@luzmo/analytics-components-kit 1.0.1-alpha.97 → 1.0.1-alpha.99

package/components/droppable-slot/index.js

@@ -17,23 +17,22 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { a as w } from "../get-css-variable-Bb7TxJdX.js";
-import { ContextProvider as k } from "@lit/context";
-import { msg as m, localized as S } from "@lit/localize";
-import { Task as A } from "@lit/task";
-import { luzmoIcon as z, luzmoCog as E, luzmoTrashOutline as L } from "@luzmo/icons";
+import { a as x } from "../get-css-variable-DgTBQV3c.js";
+import { ContextProvider as w } from "@lit/context";
+import { msg as m, localized as k } from "@lit/localize";
+import { Task as D } from "@lit/task";
+import { luzmoIcon as g, luzmoCog as S, luzmoTrashOutline as E } from "@luzmo/icons";
 import "@luzmo/lucero/tooltip";
-import { d as y } from "../index-DNPULp4A.js";
-import { i as c, l as I } from "../localize-CcDpq940.js";
-import { D as $ } from "../en-D3ihEGXg.js";
-import { html as d, unsafeCSS as O } from "lit";
-import { property as n, query as _, state as x } from "lit/decorators.js";
-import { L as T } from "../focusable-BS2pbY7w.js";
-import { S as M } from "../sized-mixin-cJbo3PKR.js";
-import { s as U } from "../index-CqKpf0B8.js";
-import { signal as h, computed as F } from "@lit-labs/signals";
-import { P as g } from "../types-RxAJdtVT.js";
-import { g as P, t as B, s as G } from "../set-locale-hKTMz37h.js";
+import { d as f } from "../index-BikhVAa1.js";
+import { i as c, l as L } from "../localize-CcDpq940.js";
+import { D as A } from "../en-D3ihEGXg.js";
+import { html as d, unsafeCSS as $ } from "lit";
+import { property as n, query as v, state as y } from "lit/decorators.js";
+import { L as I } from "../focusable-BS2pbY7w.js";
+import { S as T } from "../sized-mixin-cJbo3PKR.js";
+import { s as M } from "../index-CqKpf0B8.js";
+import { S as O } from "../slot-store-CRfN0nD3.js";
+import { g as G, t as U, s as B } from "../set-locale-B5562CBM.js";
 import "../slot-menu/index.js";
 (function() {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
@@ -49,96 +48,21 @@ const R = (o, t) => {
     // TODO: Remove this once column/set -> columnId/datasetId migration is fully done.
   };
   "columnId" in o && !c(o.columnId) && o.columnId !== "" ? (e.columnId = o.columnId, e.column = o.columnId) : "formulaId" in o && !c(o.formulaId) && o.formulaId !== "" && (e.formulaId = o.formulaId, e.formula = o.formulaId);
-  const l = o.type === "datetime" || o.type === "array[datetime]", r = { ...o.name ?? { en: "Untitled" } };
+  const s = o.type === "datetime" || o.type === "array[datetime]", l = { ...o.name ?? { en: "Untitled" } };
   let i = o.level;
-  if (l && (i = i ?? o.lowestLevel ?? 9, t)) {
-    const p = $.shortLevels?.filter((b) => b !== "All") ?? [], u = Math.max(0, Math.min(p.length - 1, (i ?? 1) - 1)), f = p[u];
-    if (f) {
-      const b = `(${f})`, D = Object.keys(r);
-      for (const v of D)
-        r[v] = `${r[v]} ${b}`;
+  if (s && (i = i ?? o.lowestLevel ?? 9, t)) {
+    const p = A.shortLevels?.filter((u) => u !== "All") ?? [], _ = Math.max(0, Math.min(p.length - 1, (i ?? 1) - 1)), b = p[_];
+    if (b) {
+      const u = `(${b})`, C = Object.keys(l);
+      for (const h of C)
+        l[h] = `${l[h]} ${u}`;
     }
   }
-  return e.label = r, c(o.subtype) || (e.subtype = o.subtype), "lowestLevel" in o && !c(o.lowestLevel) && (e.lowestLevel = o.lowestLevel), c(o.format) || (e.format = o.format), c(i) || (e.level = i), c(o.lowestLevel) || (e.lowestLevel = o.lowestLevel), o.type === "numeric" && o.subtype === "currency" && o.currency?.symbol && (e.currency = o.currency.symbol), Array.isArray(o.duration_levels) && o.duration_format && (e.duration = {
+  return e.label = l, c(o.subtype) || (e.subtype = o.subtype), "lowestLevel" in o && !c(o.lowestLevel) && (e.lowestLevel = o.lowestLevel), c(o.format) || (e.format = o.format), c(i) || (e.level = i), c(o.lowestLevel) || (e.lowestLevel = o.lowestLevel), o.type === "numeric" && o.subtype === "currency" && o.currency?.symbol && (e.currency = o.currency.symbol), Array.isArray(o.duration_levels) && o.duration_format && (e.duration = {
     levels: o.duration_levels,
     format: o.duration_format
   }), e;
-};
-class N {
-  constructor() {
-    this.slotContents = h([]), this.slotsContents = h([]), this.periodOverPeriodUiType = h(
-      null
-    ), this.linkedDataset = h(
-      []
-    ), this._popEnabledChartTypes = [
-      "area-chart",
-      "bar-chart",
-      "combination-chart",
-      "column-chart",
-      "line-chart"
-    ], this.activeSlotContents = F(() => this.slotContents.get()[this.activeIndex.get()]), this.activeIndex = h(0);
-  }
-  isArrayColumnType(t) {
-    return t.startsWith("array[");
-  }
-  setPeriodOverPeriodCondition(t, e) {
-    if (!e?.periodOverPeriod?.newUi) {
-      this.periodOverPeriodUiType.set(this.oldConditionalLogic(t));
-      return;
-    }
-    this.periodOverPeriodUiType.set(
-      this.getUiConditionToApply(e)
-    );
-  }
-  getUiConditionToApply(t) {
-    const e = this.hasDatetimeColumnOnCategoryOrXAxis(), l = t?.periodOverPeriod?.hasConnectedComparisonFilter, r = this.linkedDataset.get().some(
-      ({ columns: i }) => i?.some((p) => p.type === "datetime")
-    );
-    return !e && !l && !r ? null : e && l ? g.HasDatetimeColumnAndComparisonFilters : e && !l ? g.HasDatetimeColumnAndNoComparisonFilters : !e && l ? g.NoDatetimeColumnButComparisonFilters : g.NoDatetimeColumnAndNoComparisonFilters;
-  }
-  oldConditionalLogic(t) {
-    const e = this.slotsContents.get() ?? [], r = (e.find(
-      (u) => ["y-axis", "x-axis", "row"].includes(u.name)
-    )?.content ?? [])?.[0] ?? null, i = e.find((u) => u.name === "measure")?.content ?? [];
-    return r && this._popEnabledChartTypes.includes(t) && r.type === "datetime" && !this.isArrayColumnType(r.type) && !r.datetimeDisplayMode && r.level !== 4 && i.length > 0 ? g.OldImplementation : null;
-  }
-  /**
-   * Detects if there's a datetime column on Category or X-axis slots
-   */
-  hasDatetimeColumnOnCategoryOrXAxis() {
-    const l = ((this.slotsContents.get() ?? []).find(
-      (r) => ["y-axis", "x-axis"].includes(r.name)
-    )?.content ?? [])?.[0] ?? null;
-    return !!(l && l.type === "datetime" && !this.isArrayColumnType(l.type));
-  }
-  /** Replace the full list (e.g. after dropping or re-ordering). */
-  setContents(t, e) {
-    if (this.slotContents.set(t), this.activeIndex.get() >= t.length && this.activeIndex.set(t.length > 0 ? t.length - 1 : 0), e) {
-      const l = structuredClone(this.slotsContents.get()) ?? [], r = l.find((i) => i.name === e);
-      r && (r.content = t), this.setFullContents(l);
-    }
-  }
-  setFullContents(t) {
-    this.slotsContents.set(t);
-  }
-  /** Change which item is considered active (e.g. user clicked in list). */
-  updateActive(t) {
-    t >= 0 && t < this.slotContents.get().length && this.activeIndex.set(t);
-  }
-  /** Update / overwrite a single content entry. */
-  updateContent(t, e = this.activeIndex.get()) {
-    if (e < 0 || e >= this.slotContents.get().length) return;
-    const l = [...this.slotContents.get()];
-    l[e] = structuredClone(t), this.slotContents.set(l);
-  }
-  /** Remove one content entry by index. */
-  removeContent(t) {
-    if (t < 0 || t >= this.slotContents.get().length) return;
-    const e = this.slotContents.get().filter((l, r) => r !== t);
-    this.slotContents.set(e), this.activeIndex.get() >= e.length && this.activeIndex.set(e.length > 0 ? e.length - 1 : 0);
-  }
-}
-const j = ":host{font-family:var(--luzmo-droppable-slot-font-family, var(--luzmo-font-family));--slot-height: var( --luzmo-droppable-slot-height, var(--droppable-slot-height) )}.droppable-slot-wrapper{position:relative;width:var(--slot-height);min-width:var(--slot-height);height:auto;overflow:visible}.droppable-slot[filled]{border:var(--luzmo-droppable-slot-filled-border-width, var(--droppable-slot-filled-border-width)) var(--luzmo-droppable-slot-filled-border-style, var(--droppable-slot-filled-border-style)) var(--luzmo-droppable-slot-filled-border-color, var(--droppable-slot-filled-border-color));background-color:var(--luzmo-droppable-slot-filled-background-color, var(--droppable-slot-filled-background-color));color:var(--luzmo-droppable-slot-filled-color, var(--droppable-slot-filled-color));padding-right:0;gap:var(--luzmo-droppable-slot-filled-gap, var(--droppable-slot-filled-gap))}.droppable-slot[filled]>*:not(luzmo-overlay){cursor:pointer}.droppable-slot{background-color:var(--luzmo-droppable-slot-background-color, var(--droppable-slot-background-color));color:var(--luzmo-droppable-slot-font-color, var(--droppable-slot-font-color));border:var(--luzmo-droppable-slot-border-width, var(--droppable-slot-border-width)) var(--luzmo-droppable-slot-border-style, var(--droppable-slot-border-style)) var(--luzmo-droppable-slot-border-color, var(--droppable-slot-border-color));display:flex;justify-content:space-between;align-items:center;padding-left:var(--luzmo-droppable-slot-edge-to-label, var(--droppable-slot-edge-to-label));padding-right:var(--luzmo-droppable-slot-label-to-controls, var(--droppable-slot-label-to-controls));border-radius:var(--luzmo-droppable-slot-border-radius, var(--droppable-slot-border-radius));height:var(--luzmo-droppable-slot-height, var(--droppable-slot-height))}:host(.pulse) .droppable-slot{animation:dropelementpulse 1s infinite ease-in-out}:host([accept-drag]) .droppable-slot{background-color:var(--luzmo-droppable-slot-accept-drag-background-color, var(--droppable-slot-accept-drag-background-color));color:var(--luzmo-droppable-slot-accept-drag-font-color, var(--droppable-slot-accept-drag-font-color));border-color:var(--luzmo-droppable-slot-accept-drag-border-color, var(--droppable-slot-accept-drag-border-color));animation:dropelementpulse 1s infinite ease-in-out}:host([accept-drag]) .controls{background-color:var(--luzmo-droppable-slot-accept-drag-controls-background-color, var(--droppable-slot-accept-drag-controls-background-color));color:var(--luzmo-droppable-slot-accept-drag-controls-color, var(--droppable-slot-accept-drag-controls-color))}:host([would-accept-drag]) .droppable-slot:not([filled]){animation:var(--luzmo-slot-would-accept-drop-animation, none)}@keyframes dropelementpulse{0%{box-shadow:0 0 0 0 var(--luzmo-droppable-slot-pulse-color, var(--droppable-slot-pulse-color)),0 0 0 0 var(--luzmo-droppable-slot-pulse-color, var(--droppable-slot-pulse-color))}to{box-shadow:0 0 0 1rem transparent,0 0 0 1rem transparent}}:host([disabled]) .droppable-slot{background-color:var(--luzmo-droppable-slot-background-color-disabled, var(--droppable-slot-background-color-disabled));color:var(--luzmo-droppable-slot-color-disabled, var(--droppable-slot-color-disabled));cursor:not-allowed}:host([disabled]) .drag-handle-icon{opacity:.25;font-size:12px}.drag-handle-icon{opacity:.5;font-size:12px}.droppable-slot-label{font-size:var(--luzmo-droppable-slot-label-font-size, var(--droppable-slot-label-font-size));padding-top:var(--luzmo-droppable-slot-label-padding-top, var(--droppable-slot-label-padding-top));padding-bottom:var(--luzmo-droppable-slot-label-padding-bottom, var(--droppable-slot-label-padding-bottom));flex-grow:1;max-width:var(--luzmo-droppable-slot-label-max-width);margin-right:var(--luzmo-droppable-slot-text-to-controls, var(--droppable-slot-text-to-controls));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.controls{height:100%;display:flex;align-items:center;gap:var(--luzmo-droppable-slot-controls-gap, var(--droppable-slot-controls-gap));background-color:var(--luzmo-droppable-slot-controls-background-color, var(--droppable-slot-controls-background-color));color:var(--luzmo-droppable-slot-controls-color, var(--droppable-slot-controls-color));margin-right:var(--luzmo-droppable-slot-controls-to-edge, var(--droppable-slot-controls-to-edge));padding:0 var(--luzmo-droppable-slot-controls-horizontal-padding, var(--droppable-slot-controls-horizontal-padding));font-size:var(--luzmo-droppable-slot-controls-font-size)}.controls div{cursor:pointer;height:100%;display:flex;align-items:center;padding:0 var(--luzmo-droppable-slot-controls-control-horizontal-padding, var(--droppable-slot-controls-control-horizontal-padding))}.droppable-slot.rotate{position:absolute;top:0;left:50%;transform-origin:center;max-width:15rem;transform:translate(-50%) rotate(-90deg)}luzmo-slot-menu[placement=bottom],luzmo-slot-menu[placement=top],luzmo-slot-menu[placement=bottom-start],luzmo-slot-menu[placement=top-start],luzmo-slot-menu[placement=bottom-end],luzmo-slot-menu[placement=top-end]{margin:var(--luzmo-droppable-slot-overlay-vertical-gap, var(--droppable-slot-overlay-vertical-gap)) 0}luzmo-slot-menu[placement=left],luzmo-slot-menu[placement=right],luzmo-slot-menu[placement=left-start],luzmo-slot-menu[placement=right-start],luzmo-slot-menu[placement=left-end],luzmo-slot-menu[placement=right-end]{margin:0 var(--luzmo-droppable-slot-overlay-horizontal-gap, var(--droppable-slot-overlay-horizontal-gap))}:host{--droppable-slot-border-width: var(--luzmo-border-width);--droppable-slot-border-style: dashed;--droppable-slot-border-color: var(--luzmo-border-color);--droppable-slot-background-color: transparent;--droppable-slot-accept-drag-background-color: var(--luzmo-positive-color);--droppable-slot-accept-drag-color: white;--droppable-slot-accept-drag-border-color: var(--luzmo-positive-color-down);--droppable-slot-accept-drag-font-color: white;--droppable-slot-font-color: var(--luzmo-font-color);--droppable-slot-controls-background-color: var(--luzmo-primary-down);--droppable-slot-controls-color: var(--luzmo-primary-inverse-color);--droppable-slot-accept-drag-controls-background-color: var( --luzmo-positive-color-down );--droppable-slot-accept-drag-controls-color: white;--droppable-slot-text-to-controls: var(--luzmo-spacing-3);--droppable-slot-controls-to-edge: 0;--droppable-slot-controls-gap: var(--luzmo-spacing-2);--droppable-slot-controls-horizontal-padding: var(--luzmo-spacing-2);--droppable-slot-controls-control-horizontal-padding: var(--luzmo-spacing-3);--droppable-slot-filled-background-color: var(--luzmo-primary);--droppable-slot-filled-color: var(--luzmo-primary-inverse-color);--droppable-slot-filled-border-width: var(--luzmo-border-width);--droppable-slot-filled-border-style: solid;--droppable-slot-filled-border-color: var(--luzmo-primary-down);--droppable-slot-height: var( --luzmo-droppable-slot-height, var(--luzmo-component-height) );--droppable-slot-label-font-size: var(--luzmo-font-size);--droppable-slot-icon-type-font-size: var(--luzmo-font-size);--droppable-slot-edge-to-label: var(--luzmo-spacing-5);--droppable-slot-label-to-controls: var(--luzmo-spacing-5);--droppable-slot-color-disabled: var(--luzmo-color-disabled);--droppable-slot-background-color-disabled: var( --luzmo-background-color-disabled );--droppable-slot-pulse-color: rgba(var(--luzmo-positive-color-rgb), .2);--droppable-slot-border-radius: var(--luzmo-border-radius);--droppable-slot-filled-gap: var(--luzmo-spacing-5)}:host{--droppable-slot-height: var( --luzmo-droppable-slot-height, var(--luzmo-component-height) );--droppable-slot-label-font-size: var(--luzmo-font-size);--droppable-slot-icon-type-font-size: var(--luzmo-font-size);--droppable-slot-horizontal-padding: var(--luzmo-spacing-4);--droppable-slot-overlay-horizontal-gap: var(--luzmo-spacing-4);--droppable-slot-overlay-vertical-gap: var(--luzmo-spacing-4)}:host([size=s]){--droppable-slot-height: var( --luzmo-droppable-slot-height, var(--luzmo-component-height-s) );--droppable-slot-label-font-size: var(--luzmo-font-size-s);--droppable-slot-icon-type-font-size: var(--luzmo-font-size-s);--droppable-slot-horizontal-padding: var(--luzmo-spacing-4);--droppable-slot-overlay-horizontal-gap: var(--luzmo-spacing-4);--droppable-slot-overlay-vertical-gap: var(--luzmo-spacing-4)}:host([size=l]){--droppable-slot-height: var( --luzmo-droppable-slot-height, var(--luzmo-component-height-l) );--droppable-slot-label-font-size: var(--luzmo-font-size-l);--droppable-slot-icon-type-font-size: var(--luzmo-font-size-l);--droppable-slot-horizontal-padding: var(--luzmo-spacing-5);--droppable-slot-overlay-horizontal-gap: var(--luzmo-spacing-5);--droppable-slot-overlay-vertical-gap: var(--luzmo-spacing-5)}:host([size=xl]){--droppable-slot-height: var( --luzmo-droppable-slot-height, var(--luzmo-component-height-xl) );--droppable-slot-label-font-size: var(--luzmo-font-size-xl);--droppable-slot-icon-type-font-size: var(--luzmo-font-size-xl);--droppable-slot-horizontal-padding: var(--luzmo-spacing-5);--droppable-slot-overlay-horizontal-gap: var(--luzmo-spacing-5);--droppable-slot-overlay-vertical-gap: var(--luzmo-spacing-5)}:host{box-sizing:border-box}", C = {
+}, N = ":host{font-family:var(--luzmo-droppable-slot-font-family, var(--luzmo-font-family));--slot-height: var( --luzmo-droppable-slot-height, var(--droppable-slot-height) )}.droppable-slot-wrapper{position:relative;width:var(--slot-height);min-width:var(--slot-height);height:auto;overflow:visible}.droppable-slot[filled]{border:var(--luzmo-droppable-slot-filled-border-width, var(--droppable-slot-filled-border-width)) var(--luzmo-droppable-slot-filled-border-style, var(--droppable-slot-filled-border-style)) var(--luzmo-droppable-slot-filled-border-color, var(--droppable-slot-filled-border-color));background-color:var(--luzmo-droppable-slot-filled-background-color, var(--droppable-slot-filled-background-color));color:var(--luzmo-droppable-slot-filled-color, var(--droppable-slot-filled-color));padding-right:0;gap:var(--luzmo-droppable-slot-filled-gap, var(--droppable-slot-filled-gap))}.droppable-slot[filled]>*:not(luzmo-overlay){cursor:pointer}.droppable-slot{background-color:var(--luzmo-droppable-slot-background-color, var(--droppable-slot-background-color));color:var(--luzmo-droppable-slot-font-color, var(--droppable-slot-font-color));border:var(--luzmo-droppable-slot-border-width, var(--droppable-slot-border-width)) var(--luzmo-droppable-slot-border-style, var(--droppable-slot-border-style)) var(--luzmo-droppable-slot-border-color, var(--droppable-slot-border-color));display:flex;justify-content:space-between;align-items:center;padding-left:var(--luzmo-droppable-slot-edge-to-label, var(--droppable-slot-edge-to-label));padding-right:var(--luzmo-droppable-slot-label-to-controls, var(--droppable-slot-label-to-controls));border-radius:var(--luzmo-droppable-slot-border-radius, var(--droppable-slot-border-radius));height:var(--luzmo-droppable-slot-height, var(--droppable-slot-height))}:host(.pulse) .droppable-slot{animation:dropelementpulse 1s infinite ease-in-out}:host([accept-drag]) .droppable-slot{background-color:var(--luzmo-droppable-slot-accept-drag-background-color, var(--droppable-slot-accept-drag-background-color));color:var(--luzmo-droppable-slot-accept-drag-font-color, var(--droppable-slot-accept-drag-font-color));border-color:var(--luzmo-droppable-slot-accept-drag-border-color, var(--droppable-slot-accept-drag-border-color));animation:dropelementpulse 1s infinite ease-in-out}:host([accept-drag]) .controls{background-color:var(--luzmo-droppable-slot-accept-drag-controls-background-color, var(--droppable-slot-accept-drag-controls-background-color));color:var(--luzmo-droppable-slot-accept-drag-controls-color, var(--droppable-slot-accept-drag-controls-color))}:host([would-accept-drag]) .droppable-slot:not([filled]){animation:var(--luzmo-slot-would-accept-drop-animation, none)}@keyframes dropelementpulse{0%{box-shadow:0 0 0 0 var(--luzmo-droppable-slot-pulse-color, var(--droppable-slot-pulse-color)),0 0 0 0 var(--luzmo-droppable-slot-pulse-color, var(--droppable-slot-pulse-color))}to{box-shadow:0 0 0 1rem transparent,0 0 0 1rem transparent}}:host([disabled]) .droppable-slot{background-color:var(--luzmo-droppable-slot-background-color-disabled, var(--droppable-slot-background-color-disabled));color:var(--luzmo-droppable-slot-color-disabled, var(--droppable-slot-color-disabled));cursor:not-allowed}:host([disabled]) .drag-handle-icon{opacity:.25;font-size:12px}.drag-handle-icon{opacity:.5;font-size:12px}.droppable-slot-label{font-size:var(--luzmo-droppable-slot-label-font-size, var(--droppable-slot-label-font-size));padding-top:var(--luzmo-droppable-slot-label-padding-top, var(--droppable-slot-label-padding-top));padding-bottom:var(--luzmo-droppable-slot-label-padding-bottom, var(--droppable-slot-label-padding-bottom));flex-grow:1;max-width:var(--luzmo-droppable-slot-label-max-width);margin-right:var(--luzmo-droppable-slot-text-to-controls, var(--droppable-slot-text-to-controls));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.controls{height:100%;display:flex;align-items:center;gap:var(--luzmo-droppable-slot-controls-gap, var(--droppable-slot-controls-gap));background-color:var(--luzmo-droppable-slot-controls-background-color, var(--droppable-slot-controls-background-color));color:var(--luzmo-droppable-slot-controls-color, var(--droppable-slot-controls-color));margin-right:var(--luzmo-droppable-slot-controls-to-edge, var(--droppable-slot-controls-to-edge));padding:0 var(--luzmo-droppable-slot-controls-horizontal-padding, var(--droppable-slot-controls-horizontal-padding));font-size:var(--luzmo-droppable-slot-controls-font-size)}.controls div{cursor:pointer;height:100%;display:flex;align-items:center;padding:0 var(--luzmo-droppable-slot-controls-control-horizontal-padding, var(--droppable-slot-controls-control-horizontal-padding))}.droppable-slot.rotate{position:absolute;top:0;left:50%;transform-origin:center;max-width:15rem;transform:translate(-50%) rotate(-90deg)}luzmo-slot-menu[placement=bottom],luzmo-slot-menu[placement=top],luzmo-slot-menu[placement=bottom-start],luzmo-slot-menu[placement=top-start],luzmo-slot-menu[placement=bottom-end],luzmo-slot-menu[placement=top-end]{margin:var(--luzmo-droppable-slot-overlay-vertical-gap, var(--droppable-slot-overlay-vertical-gap)) 0}luzmo-slot-menu[placement=left],luzmo-slot-menu[placement=right],luzmo-slot-menu[placement=left-start],luzmo-slot-menu[placement=right-start],luzmo-slot-menu[placement=left-end],luzmo-slot-menu[placement=right-end]{margin:0 var(--luzmo-droppable-slot-overlay-horizontal-gap, var(--droppable-slot-overlay-horizontal-gap))}:host{--droppable-slot-border-width: var(--luzmo-border-width);--droppable-slot-border-style: dashed;--droppable-slot-border-color: var(--luzmo-border-color);--droppable-slot-background-color: transparent;--droppable-slot-accept-drag-background-color: var(--luzmo-positive-color);--droppable-slot-accept-drag-color: white;--droppable-slot-accept-drag-border-color: var(--luzmo-positive-color-down);--droppable-slot-accept-drag-font-color: white;--droppable-slot-font-color: var(--luzmo-font-color);--droppable-slot-controls-background-color: var(--luzmo-primary-down);--droppable-slot-controls-color: var(--luzmo-primary-inverse-color);--droppable-slot-accept-drag-controls-background-color: var( --luzmo-positive-color-down );--droppable-slot-accept-drag-controls-color: white;--droppable-slot-text-to-controls: var(--luzmo-spacing-3);--droppable-slot-controls-to-edge: 0;--droppable-slot-controls-gap: var(--luzmo-spacing-2);--droppable-slot-controls-horizontal-padding: var(--luzmo-spacing-2);--droppable-slot-controls-control-horizontal-padding: var(--luzmo-spacing-3);--droppable-slot-filled-background-color: var(--luzmo-primary);--droppable-slot-filled-color: var(--luzmo-primary-inverse-color);--droppable-slot-filled-border-width: var(--luzmo-border-width);--droppable-slot-filled-border-style: solid;--droppable-slot-filled-border-color: var(--luzmo-primary-down);--droppable-slot-height: var( --luzmo-droppable-slot-height, var(--luzmo-component-height) );--droppable-slot-label-font-size: var(--luzmo-font-size);--droppable-slot-icon-type-font-size: var(--luzmo-font-size);--droppable-slot-edge-to-label: var(--luzmo-spacing-5);--droppable-slot-label-to-controls: var(--luzmo-spacing-5);--droppable-slot-color-disabled: var(--luzmo-color-disabled);--droppable-slot-background-color-disabled: var( --luzmo-background-color-disabled );--droppable-slot-pulse-color: rgba(var(--luzmo-positive-color-rgb), .2);--droppable-slot-border-radius: var(--luzmo-border-radius);--droppable-slot-filled-gap: var(--luzmo-spacing-5)}:host{--droppable-slot-height: var( --luzmo-droppable-slot-height, var(--luzmo-component-height) );--droppable-slot-label-font-size: var(--luzmo-font-size);--droppable-slot-icon-type-font-size: var(--luzmo-font-size);--droppable-slot-horizontal-padding: var(--luzmo-spacing-4);--droppable-slot-overlay-horizontal-gap: var(--luzmo-spacing-4);--droppable-slot-overlay-vertical-gap: var(--luzmo-spacing-4)}:host([size=s]){--droppable-slot-height: var( --luzmo-droppable-slot-height, var(--luzmo-component-height-s) );--droppable-slot-label-font-size: var(--luzmo-font-size-s);--droppable-slot-icon-type-font-size: var(--luzmo-font-size-s);--droppable-slot-horizontal-padding: var(--luzmo-spacing-4);--droppable-slot-overlay-horizontal-gap: var(--luzmo-spacing-4);--droppable-slot-overlay-vertical-gap: var(--luzmo-spacing-4)}:host([size=l]){--droppable-slot-height: var( --luzmo-droppable-slot-height, var(--luzmo-component-height-l) );--droppable-slot-label-font-size: var(--luzmo-font-size-l);--droppable-slot-icon-type-font-size: var(--luzmo-font-size-l);--droppable-slot-horizontal-padding: var(--luzmo-spacing-5);--droppable-slot-overlay-horizontal-gap: var(--luzmo-spacing-5);--droppable-slot-overlay-vertical-gap: var(--luzmo-spacing-5)}:host([size=xl]){--droppable-slot-height: var( --luzmo-droppable-slot-height, var(--luzmo-component-height-xl) );--droppable-slot-label-font-size: var(--luzmo-font-size-xl);--droppable-slot-icon-type-font-size: var(--luzmo-font-size-xl);--droppable-slot-horizontal-padding: var(--luzmo-spacing-5);--droppable-slot-overlay-horizontal-gap: var(--luzmo-spacing-5);--droppable-slot-overlay-vertical-gap: var(--luzmo-spacing-5)}:host{box-sizing:border-box}", z = {
   Category: () => m("Category", { desc: "Category label" }),
   Measure: () => m("Measure", { desc: "Measure label" }),
   Legend: () => m("Legend", { desc: "Legend label" }),
@@ -146,17 +70,17 @@ const j = ":host{font-family:var(--luzmo-droppable-slot-font-family, var(--luzmo
   "X-Axis": () => m("X-Axis", { desc: "X-Axis label" }),
   "Group by": () => m("Group by", { desc: "Group by label" })
 };
-var H = Object.defineProperty, V = Object.getOwnPropertyDescriptor, a = (o, t, e, l) => {
-  for (var r = l > 1 ? void 0 : l ? V(t, e) : t, i = o.length - 1, p; i >= 0; i--)
-    (p = o[i]) && (r = (l ? p(t, e, r) : p(r)) || r);
-  return l && r && H(t, e, r), r;
+var F = Object.defineProperty, j = Object.getOwnPropertyDescriptor, a = (o, t, e, s) => {
+  for (var l = s > 1 ? void 0 : s ? j(t, e) : t, i = o.length - 1, p; i >= 0; i--)
+    (p = o[i]) && (l = (s ? p(t, e, l) : p(l)) || l);
+  return s && l && F(t, e, l), l;
 };
-let s = class extends M(T, {
+let r = class extends T(I, {
   validSizes: ["s", "m", "l", "xl"],
   noDefaultSize: !0
 }) {
   constructor() {
-    super(), this._loadSlotsConfig = new A(this, {
+    super(), this._loadSlotsConfig = new D(this, {
       task: async ([o]) => {
         if (o && o !== this._itemTypeLoaded) {
           const t = /* @__PURE__ */ Object.assign({
@@ -207,14 +131,14 @@ let s = class extends M(T, {
             "../../item-definitions/wordcloud-chart/wordcloud-chart-slots.config.ts": () => import("../wordcloud-chart-slots.config-BS4sOOHt.js")
           }), e = `../../item-definitions/${o}/${o}-slots.config.ts`;
           if (t[e]) {
-            const l = await t[e]();
-            this._itemTypeLoaded = o, this._slotsConfig = l?.default ?? {};
+            const s = await t[e]();
+            this._itemTypeLoaded = o, this._slotsConfig = s?.default ?? {};
           }
           return this._slotsConfig;
         }
       },
       args: () => [this.itemType, this.language]
-    }), this._slotsConfig = [], this.slotConfiguration = {}, this.slotsContents = [], this.language = "en", this.rotate = !1, this.apiUrl = "https://api.luzmo.com", this.authKey = "", this.authToken = "", this.menu = "default", this.placement = "bottom-end", this._slotContents = [], this._overlayReady = !1, this._store = new N(), this._currentSlotContents = [], this._lastFetchedDatasetId = null, this._linkedDatasetsIds = [], this._acceptableColumnTypes = [
+    }), this._slotsConfig = [], this.slotConfiguration = {}, this.slotsContents = [], this.language = "en", this.rotate = !1, this.apiUrl = "https://api.luzmo.com", this.authKey = "", this.authToken = "", this.menu = "default", this.placement = "bottom-end", this._slotContents = [], this._overlayReady = !1, this._store = new O(), this._currentSlotContents = [], this._lastFetchedDatasetId = null, this._linkedDatasetsIds = [], this._acceptableColumnTypes = [
       "datetime",
       "hierarchy",
       "numeric",
@@ -224,11 +148,11 @@ let s = class extends M(T, {
       "array[hierarchy]",
       "array[spatial]"
     ], this._attachDroppable = () => {
-      this._cleanupDroppable || (this._cleanupDroppable = w({
+      this._cleanupDroppable || (this._cleanupDroppable = x({
         element: this,
         onDrop: async (o) => {
-          const t = { ...o.source?.data }, e = o?.source?.element?.hasAttribute("sublevel") ?? !1, l = this._slotContents?.length === 0, r = t.datasetId, i = R(t, e);
-          this._slotContents = this.slotConfiguration?.canAcceptMultipleDataItems ? [...this._slotContents ?? [], i] : [i], this.removeAttribute("accept-drag"), r && r !== this._lastFetchedDatasetId && (this._lastFetchedDatasetId = r, await y.fetchDatasetsRecursive([r]), this._linkedDatasetsIds = y.getLinkedDatasetsIds(r)), l ? (this._overlayReady = !1, setTimeout(() => {
+          const t = { ...o.source?.data }, e = o?.source?.element?.hasAttribute("sublevel") ?? !1, s = this._slotContents?.length === 0, l = t.datasetId, i = R(t, e);
+          this._slotContents = this.slotConfiguration?.canAcceptMultipleDataItems ? [...this._slotContents ?? [], i] : [i], this.removeAttribute("accept-drag"), l && l !== this._lastFetchedDatasetId && (this._lastFetchedDatasetId = l, await f.fetchDatasetsRecursive([l]), this._linkedDatasetsIds = f.getLinkedDatasetsIds(l)), s ? (this._overlayReady = !1, setTimeout(() => {
             this._overlayReady = !0;
           }, 200)) : this._overlayReady = !0, this.changedSlotContents(this._slotContents, this._linkedDatasetsIds), this.classList.remove("pulse");
         },
@@ -247,8 +171,8 @@ let s = class extends M(T, {
         "LUZMO-DRAGGABLE-DATA-ITEM"
       ].includes(o.element?.tagName) || !this.slotConfiguration?.canAcceptFormula && (o?.data?.formulaId || o?.data?.formula || o?.data?.entity === "formula"))
         return !1;
-      const { acceptableDataItemTypes: t, acceptableColumnSubtypes: e } = this.slotConfiguration ?? {}, l = Array.isArray(t) && t.length > 0 ? t : this._acceptableColumnTypes;
-      return o?.data?.type && !l.includes(o?.data?.type) ? !1 : !(o?.data?.subtype && Array.isArray(e) && e.length > 0 && !e.includes(o?.data?.subtype));
+      const { acceptableDataItemTypes: t, acceptableColumnSubtypes: e } = this.slotConfiguration ?? {}, s = Array.isArray(t) && t.length > 0 ? t : this._acceptableColumnTypes;
+      return o?.data?.type && !s.includes(o?.data?.type) ? !1 : !(o?.data?.subtype && Array.isArray(e) && e.length > 0 && !e.includes(o?.data?.subtype));
     }, this.changedSlotContents = (o, t = []) => {
       this._store?.setContents(o, this.slotName), this.dispatchEvent(
         new CustomEvent("slot-contents-changed", {
@@ -264,19 +188,19 @@ let s = class extends M(T, {
     }, this._handleDragStart = (o) => {
       const t = o, e = t.detail?.data;
       if (this._overlayElement && (this._overlayElement.open = !1), !e) return;
-      const l = {
+      const s = {
         data: e,
         element: {
           tagName: t.target instanceof HTMLElement && t.target.tagName === "LUZMO-DRAGGABLE-DATA-ITEM-LEVEL" ? "LUZMO-DRAGGABLE-DATA-ITEM-LEVEL" : "LUZMO-DRAGGABLE-DATA-ITEM"
         }
       };
-      this._canDropItem({ source: l }) && this.setAttribute("would-accept-drag", "");
+      this._canDropItem({ source: s }) && this.setAttribute("would-accept-drag", "");
     }, this._handleDragEnd = () => {
       this.removeAttribute("would-accept-drag");
     }, this._handleOverlayClick = (o) => {
       o.detail > 0 && o.target === this._overlayElement ? this._overlayElement.open = !1 : o.stopPropagation();
-    }, new k(this, {
-      context: U,
+    }, new w(this, {
+      context: M,
       initialValue: this._store
     });
   }
@@ -293,7 +217,7 @@ let s = class extends M(T, {
     o.preventDefault(), o.stopPropagation(), this._slotContents = [], this.changedSlotContents([]);
   }
   willUpdate(o) {
-    o.has("slotConfiguration") && (this._cleanupDroppable && (this._cleanupDroppable(), this._cleanupDroppable = void 0), this._attachDroppable()), o.has("slotsContents") && this._processSlotsContents(), o.has("language") && this.language !== P() && ([...B].includes(this.language ?? "en") || this.language === "en") && G(this.language);
+    o.has("slotConfiguration") && (this._cleanupDroppable && (this._cleanupDroppable(), this._cleanupDroppable = void 0), this._attachDroppable()), o.has("slotsContents") && this._processSlotsContents(), o.has("language") && this.language !== G() && ([...U].includes(this.language ?? "en") || this.language === "en") && B(this.language);
   }
   _processSlotsContents() {
     this._store?.setFullContents(this.slotsContents), this._slotContents = this.slotsContents?.find(
@@ -320,10 +244,10 @@ let s = class extends M(T, {
   _onOverlayOpened(o) {
     const t = o.overlay;
     if (this._slotMenuElement && t === this._overlayElement) {
-      const e = this._store?.activeIndex.get?.() ?? 0, l = this._slotContents?.[e] ?? this._slotContents?.[0];
-      if (!l) return;
-      const r = l?.column ?? l?.columnId, i = l?.set ?? l?.datasetId, p = l?.formula;
-      (r || p) && i && (this.dispatchEvent(
+      const e = this._store?.activeIndex.get?.() ?? 0, s = this._slotContents?.[e] ?? this._slotContents?.[0];
+      if (!s) return;
+      const l = s?.column ?? s?.columnId, i = s?.set ?? s?.datasetId, p = s?.formula;
+      (l || p) && i && (this.dispatchEvent(
         new CustomEvent("slot-menu-active", {
           bubbles: !0,
           composed: !0,
@@ -338,8 +262,8 @@ let s = class extends M(T, {
             composed: !0,
             detail: {
               datasetId: i,
-              level: l?.level ?? 0,
-              ...r && { columnId: r },
+              level: s?.level ?? 0,
+              ...l && { columnId: l },
               ...p && { formulaId: p }
             }
           })
@@ -354,8 +278,8 @@ let s = class extends M(T, {
   }
   get _fullLabel() {
     let o = "";
-    const t = C[this.slotConfiguration?.label] ? C[this.slotConfiguration?.label]() : this.slotConfiguration?.label;
-    this._currentSlotContents?.length === 1 ? o = I(
+    const t = z[this.slotConfiguration?.label] ? z[this.slotConfiguration?.label]() : this.slotConfiguration?.label;
+    this._currentSlotContents?.length === 1 ? o = L(
       this._currentSlotContents?.[0]?.label,
       this.language
     ) ?? "Untitled" : this._currentSlotContents?.length > 1 && (o = `${this._currentSlotContents.length} items`);
@@ -372,7 +296,7 @@ let s = class extends M(T, {
         <div class="droppable-slot-label">${this._fullLabel}</div>
         ${this._slotContents?.length > 0 && !(this.hideConfiguration && this.hideDelete) ? d`<div class="controls">
               ${this.hideConfiguration ? "" : d`<div>
-                    ${z(E)}
+                    ${g(S)}
                     <luzmo-tooltip
                       self-managed
                       placement=${this.rotate ? "right" : "top"}
@@ -382,7 +306,7 @@ let s = class extends M(T, {
                     </luzmo-tooltip>
                   </div> `}
               ${this.hideDelete ? "" : d`<div @click=${this.emptySlotContents}>
-                    ${z(L)}
+                    ${g(E)}
                     <luzmo-tooltip
                       self-managed
                       placement=${this.rotate ? "right" : "top"}
@@ -444,68 +368,68 @@ let s = class extends M(T, {
     });
   }
 };
-s.styles = O(j);
+r.styles = $(N);
 a([
   n({ type: String, reflect: !0, attribute: "item-type" })
-], s.prototype, "itemType", 2);
+], r.prototype, "itemType", 2);
 a([
   n({ type: String, reflect: !0, attribute: "slot-name" })
-], s.prototype, "slotName", 2);
+], r.prototype, "slotName", 2);
 a([
   n({ type: Object })
-], s.prototype, "slotConfiguration", 2);
+], r.prototype, "slotConfiguration", 2);
 a([
   n({ type: Object })
-], s.prototype, "slotsContents", 2);
+], r.prototype, "slotsContents", 2);
 a([
   n({ type: String, reflect: !0 })
-], s.prototype, "label", 2);
+], r.prototype, "label", 2);
 a([
   n({ type: String, reflect: !0 })
-], s.prototype, "language", 2);
+], r.prototype, "language", 2);
 a([
   n({ type: String, reflect: !0, attribute: "drag-boundary" })
-], s.prototype, "dragBoundary", 2);
+], r.prototype, "dragBoundary", 2);
 a([
   n({ type: Boolean, reflect: !0 })
-], s.prototype, "rotate", 2);
+], r.prototype, "rotate", 2);
 a([
   n({ type: String, attribute: "api-url", reflect: !0 })
-], s.prototype, "apiUrl", 2);
+], r.prototype, "apiUrl", 2);
 a([
   n({ type: String, attribute: "auth-key", reflect: !0 })
-], s.prototype, "authKey", 2);
+], r.prototype, "authKey", 2);
 a([
   n({ type: String, attribute: "auth-token", reflect: !0 })
-], s.prototype, "authToken", 2);
+], r.prototype, "authToken", 2);
 a([
   n({ type: String, reflect: !0 })
-], s.prototype, "menu", 2);
+], r.prototype, "menu", 2);
 a([
   n({ type: String, reflect: !0 })
-], s.prototype, "placement", 2);
+], r.prototype, "placement", 2);
 a([
   n({ type: Boolean, reflect: !0, attribute: "hide-delete" })
-], s.prototype, "hideDelete", 2);
+], r.prototype, "hideDelete", 2);
 a([
   n({ type: Boolean, reflect: !0, attribute: "hide-configuration" })
-], s.prototype, "hideConfiguration", 2);
+], r.prototype, "hideConfiguration", 2);
 a([
-  _("luzmo-slot-menu")
-], s.prototype, "_slotMenuElement", 2);
+  v("luzmo-slot-menu")
+], r.prototype, "_slotMenuElement", 2);
 a([
-  _("luzmo-overlay")
-], s.prototype, "_overlayElement", 2);
+  v("luzmo-overlay")
+], r.prototype, "_overlayElement", 2);
 a([
-  x()
-], s.prototype, "_slotContents", 2);
+  y()
+], r.prototype, "_slotContents", 2);
 a([
-  x()
-], s.prototype, "_overlayReady", 2);
-s = a([
-  S()
-], s);
-customElements.get("luzmo-droppable-slot") || customElements.define("luzmo-droppable-slot", s);
+  y()
+], r.prototype, "_overlayReady", 2);
+r = a([
+  k()
+], r);
+customElements.get("luzmo-droppable-slot") || customElements.define("luzmo-droppable-slot", r);
 export {
-  s as LuzmoDroppableSlot
+  r as LuzmoDroppableSlot
 };

package/components/edit-filters/edit-filters.d.ts

@@ -0,0 +1,79 @@
+import '@luzmo/lucero/action-button';
+import '@luzmo/lucero/button';
+import '@luzmo/lucero/icon';
+import { LuzmoElement } from '@luzmo/lucero/utils';
+import { CSSResultArray, PropertyValues, TemplateResult } from 'lit';
+import '../filter-item';
+import type { FilterGroup } from './types';
+declare const LuzmoEditFilters_base: typeof LuzmoElement & {
+    new (...args: any[]): import("@luzmo/lucero").SizedElementInterface;
+    prototype: import("@luzmo/lucero").SizedElementInterface;
+};
+/**
+ * @element luzmo-edit-filters
+ * @fires filters-changed - Announces that the filters have changed
+ */
+export declare class LuzmoEditFilters extends LuzmoEditFilters_base {
+    static get styles(): CSSResultArray;
+    /**
+     * The API URL of the databroker
+     * @default https://api.luzmo.com
+     */
+    apiUrl?: string;
+    /**
+     * The auth key of the databroker
+     */
+    authKey?: string;
+    /**
+     * The auth token of the databroker
+     */
+    authToken?: string;
+    /**
+     * The cache time of the databroker
+     */
+    cacheTime?: number;
+    /**
+     * The language of the settings interface
+     */
+    language: string;
+    /**
+     * The language to use for locale-aware formatting and labels
+     */
+    contentLanguage: string;
+    /**
+     * The time zone to use for the date picker
+     */
+    timeZone?: string;
+    /**
+     * The dataset ids to fetch columns & formulas
+     */
+    datasetIds?: string[];
+    /**
+     * The filter group structure to display
+     */
+    filters: FilterGroup | null;
+    private _internalFilterGroup;
+    /**
+     * Get a smaller size for the condition badges
+     */
+    private get _oneSizeSmaller();
+    protected willUpdate(changedProperties: PropertyValues): void;
+    private _generateEmptyGroup;
+    private _generateEmptyFilter;
+    private _cleanFilterGroupForExport;
+    private _sendChangeEvent;
+    private _isGroup;
+    private _toggleCondition;
+    private _addFilter;
+    private _addSubGroup;
+    private _removeFilter;
+    private _updateFilter;
+    private _addGroup;
+    private _renderFilterItem;
+    private _renderGroup;
+    private _findParentGroup;
+    private _collapseIfNeeded;
+    private _collapseGroupsAfterDelete;
+    protected render(): TemplateResult;
+}
+export {};