@luzmo/analytics-components-kit 1.0.1-alpha.40 → 1.0.1-alpha.41

package/components/slot-contents-picker/index.js

@@ -0,0 +1,461 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2025 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 { g as C, t as _, s as S, m as k } from "../set-locale-DbEAMqUs.js";
+import { l as x } from "../localized-decorator-DNr1P1m0.js";
+import { h as $ } from "../task-PQaVY8Iw.js";
+import { a3 as d, a7 as I, a8 as z, a6 as h } from "../luzmo-icons-v9hKZ3HV.js";
+import "../index-rQxtPaJl.js";
+import "../index-CsDgk_sj.js";
+import "../index-DUF6bALI.js";
+import "../index-ChDwMQlU.js";
+import "../index-BmshD32H.js";
+import { c as b } from "../calculate-data-item-icon-B9B0iLjm.js";
+import { l as v } from "../localize-BX7q0S0M.js";
+import { x as c, r as w, n as m } from "../property-Dn4zSyxu.js";
+import { r as D } from "../state-vVJlsarL.js";
+import { L as E } from "../focusable-BXhQz3_k.js";
+import { S as O } from "../sized-mixin-BR_Ii7le.js";
+import "../display-settings/index.js";
+import "../slot-menu/index.js";
+const y = () => {
+  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+    const t = document.createElement("style");
+    t.setAttribute("data-luzmo-vars", ""), t.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-color-disabled);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-color-informative: #1a77e9;--luzmo-color-informative-rgb: 26, 119, 233;--luzmo-color-disabled: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(t);
+  }
+};
+y();
+const L = ":host{font-family:var(--luzmo-slot-contents-picker-font-family, var(--luzmo-font-family))}.container{width:fit-content;display:flex;flex-direction:column;gap:var(--luzmo-slot-contents-picker-gap, var(--slot-contents-picker-gap, var(--luzmo-spacing-5)))}.select-container{display:flex;align-items:center}:host([stretch]) .container{width:100%}:host([stretch]) .select-container{width:100%}:host([stretch]) luzmo-select{flex-grow:1}.extra-data-item-button-container{display:flex;align-items:center;justify-content:center}.slot-contents-picker-label{font-size:var(--luzmo-slot-contents-picker-label-font-size, var(--slot-contents-picker-label-font-size));flex-grow:1;margin-right:var(--luzmo-slot-contents-picker-text-to-controls, var(--slot-contents-picker-text-to-controls));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.controls{height:100%;display:flex;align-items:center;gap:var(--luzmo-slot-contents-picker-controls-gap, var(--slot-contents-picker-controls-gap));background-color:var(--luzmo-slot-contents-picker-controls-background-color, var(--slot-contents-picker-controls-background-color));color:var(--luzmo-slot-contents-picker-controls-color, var(--slot-contents-picker-controls-color));margin-right:var(--luzmo-slot-contents-picker-controls-to-edge, var(--slot-contents-picker-controls-to-edge));padding:0 var(--luzmo-slot-contents-picker-controls-horizontal-padding, var(--slot-contents-picker-controls-horizontal-padding))}.controls div{cursor:pointer;height:100%;display:flex;align-items:center;padding:0 var(--luzmo-slot-contents-picker-controls-control-horizontal-padding, var(--slot-contents-picker-controls-control-horizontal-padding))}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-slot-contents-picker-overlay-vertical-gap, var(--slot-contents-picker-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-slot-contents-picker-overlay-horizontal-gap, var(--slot-contents-picker-overlay-horizontal-gap))}:host{--slot-contents-picker-border-width: var(--luzmo-border-width);--slot-contents-picker-border-style: dashed;--slot-contents-picker-border-color: var(--luzmo-border-color);--slot-contents-picker-accept-drag-controls-background-color: transparent;--slot-contents-picker-font-color: var(--luzmo-font-color);--slot-contents-picker-controls-background-color: transparent;--slot-contents-picker-text-to-controls: var(--luzmo-spacing-3);--slot-contents-picker-controls-to-edge: 0;--slot-contents-picker-controls-gap: var(--luzmo-spacing-2);--slot-contents-picker-controls-horizontal-padding: var(--luzmo-spacing-2);--slot-contents-picker-controls-control-horizontal-padding: var( --luzmo-spacing-3 );--slot-contents-picker-label-font-size: var(--luzmo-font-size)}:host{--slot-contents-picker-horizontal-padding: var(--luzmo-spacing-4);--slot-contents-picker-overlay-horizontal-gap: var(--luzmo-spacing-4);--slot-contents-picker-overlay-vertical-gap: var(--luzmo-spacing-4)}:host([size=s]){--slot-contents-picker-horizontal-padding: var(--luzmo-spacing-4);--slot-contents-picker-overlay-horizontal-gap: var(--luzmo-spacing-4);--slot-contents-picker-overlay-vertical-gap: var(--luzmo-spacing-4)}:host([size=l]){--slot-contents-picker-horizontal-padding: var(--luzmo-spacing-5);--slot-contents-picker-overlay-horizontal-gap: var(--luzmo-spacing-5);--slot-contents-picker-overlay-vertical-gap: var(--luzmo-spacing-5)}:host([size=xl]){--slot-contents-picker-horizontal-padding: var(--luzmo-spacing-5);--slot-contents-picker-overlay-horizontal-gap: var(--luzmo-spacing-5);--slot-contents-picker-overlay-vertical-gap: var(--luzmo-spacing-5)}:host{box-sizing:border-box}";
+var M = Object.defineProperty, A = Object.getOwnPropertyDescriptor, a = (t, o, l, e) => {
+  for (var s = e > 1 ? void 0 : e ? A(o, l) : o, u = t.length - 1, i; u >= 0; u--)
+    (i = t[u]) && (s = (e ? i(o, l, s) : i(s)) || s);
+  return e && s && M(o, l, s), s;
+};
+let n = class extends O(E, {
+  validSizes: ["s", "m", "l", "xl"],
+  noDefaultSize: !0
+}) {
+  constructor() {
+    super(...arguments), this._loadSlotsConfig = new $(this, {
+      task: async ([t]) => {
+        if (t && t !== this._itemTypeLoaded) {
+          const o = /* @__PURE__ */ Object.assign({
+            "../../item-definitions/area-chart/area-chart-slots.config.ts": () => import("../area-chart-slots.config-DoytjTpw.js"),
+            "../../item-definitions/bar-chart/bar-chart-slots.config.ts": () => import("../bar-chart-slots.config-Dn0IV43j.js"),
+            "../../item-definitions/box-plot/box-plot-slots.config.ts": () => import("../box-plot-slots.config-FI5Id-7p.js"),
+            "../../item-definitions/bubble-chart/bubble-chart-slots.config.ts": () => import("../bubble-chart-slots.config-Bbh94VgZ.js"),
+            "../../item-definitions/bullet-chart/bullet-chart-slots.config.ts": () => import("../bullet-chart-slots.config-BlWTleBt.js"),
+            "../../item-definitions/choropleth-map/choropleth-map-slots.config.ts": () => import("../choropleth-map-slots.config-DStOyVgQ.js"),
+            "../../item-definitions/circle-pack-chart/circle-pack-chart-slots.config.ts": () => import("../circle-pack-chart-slots.config-lV4uNMcp.js"),
+            "../../item-definitions/circular-gauge/circular-gauge-slots.config.ts": () => import("../circular-gauge-slots.config-DA-ZAc5d.js"),
+            "../../item-definitions/column-chart/column-chart-slots.config.ts": () => import("../column-chart-slots.config-epF0y5yo.js"),
+            "../../item-definitions/combination-chart/combination-chart-slots.config.ts": () => import("../combination-chart-slots.config-DRKSJyCC.js"),
+            "../../item-definitions/conditional-number/conditional-number-slots.config.ts": () => import("../conditional-number-slots.config-L3t5pb1-.js"),
+            "../../item-definitions/date-filter/date-filter-slots.config.ts": () => import("../date-filter-slots.config-DIjChKTZ.js"),
+            "../../item-definitions/donut-chart/donut-chart-slots.config.ts": () => import("../donut-chart-slots.config-CHLEBSDg.js"),
+            "../../item-definitions/dropdown-filter/dropdown-filter-slots.config.ts": () => import("../dropdown-filter-slots.config-D2J9Z5aQ.js"),
+            "../../item-definitions/evolution-number/evolution-number-slots.config.ts": () => import("../evolution-number-slots.config-CSDEf5Lv.js"),
+            "../../item-definitions/funnel-chart/funnel-chart-slots.config.ts": () => import("../funnel-chart-slots.config-B-72sm5j.js"),
+            "../../item-definitions/heat-map/heat-map-slots.config.ts": () => import("../heat-map-slots.config-CAj40INL.js"),
+            "../../item-definitions/heat-table/heat-table-slots.config.ts": () => import("../heat-table-slots.config-DJkP72oT.js"),
+            "../../item-definitions/hexbin-map/hexbin-map-slots.config.ts": () => import("../hexbin-map-slots.config-CAj40INL.js"),
+            "../../item-definitions/image/image-slots.config.ts": () => import("../image-slots.config-IpwUxDyU.js"),
+            "../../item-definitions/line-chart/line-chart-slots.config.ts": () => import("../line-chart-slots.config-DoytjTpw.js"),
+            "../../item-definitions/marker-map/marker-map-slots.config.ts": () => import("../marker-map-slots.config-CAj40INL.js"),
+            "../../item-definitions/ohlc-chart/ohlc-chart-slots.config.ts": () => import("../ohlc-chart-slots.config-Cvy5n1xv.js"),
+            "../../item-definitions/parallel-coordinates-plot/parallel-coordinates-plot-slots.config.ts": () => import("../parallel-coordinates-plot-slots.config-BjRcJdWM.js"),
+            "../../item-definitions/pivot-table/pivot-table-slots.config.ts": () => import("../pivot-table-slots.config-CGU7IyDG.js"),
+            "../../item-definitions/pyramid-chart/pyramid-chart-slots.config.ts": () => import("../pyramid-chart-slots.config-lfxmIAy_.js"),
+            "../../item-definitions/radar-chart/radar-chart-slots.config.ts": () => import("../radar-chart-slots.config-CuQvda0y.js"),
+            "../../item-definitions/regular-table/regular-table-slots.config.ts": () => import("../regular-table-slots.config-eQ8HccjY.js"),
+            "../../item-definitions/route-map/route-map-slots.config.ts": () => import("../route-map-slots.config-B9dcwOXi.js"),
+            "../../item-definitions/sankey-diagram/sankey-diagram-slots.config.ts": () => import("../sankey-diagram-slots.config-DmqnP_mH.js"),
+            "../../item-definitions/scatter-plot/scatter-plot-slots.config.ts": () => import("../scatter-plot-slots.config-DjURFO07.js"),
+            "../../item-definitions/search-filter/search-filter-slots.config.ts": () => import("../search-filter-slots.config-CCEWnbiJ.js"),
+            "../../item-definitions/slicer-filter/slicer-filter-slots.config.ts": () => import("../slicer-filter-slots.config-AOwwW5Ut.js"),
+            "../../item-definitions/slider-filter/slider-filter-slots.config.ts": () => import("../slider-filter-slots.config-D7cv_Ky4.js"),
+            "../../item-definitions/speedometer-chart/speedometer-chart-slots.config.ts": () => import("../speedometer-chart-slots.config-DA-ZAc5d.js"),
+            "../../item-definitions/spike-map/spike-map-slots.config.ts": () => import("../spike-map-slots.config-Bq0WfdI4.js"),
+            "../../item-definitions/strip-plot/strip-plot-slots.config.ts": () => import("../strip-plot-slots.config-B1OLcL4K.js"),
+            "../../item-definitions/sunburst-chart/sunburst-chart-slots.config.ts": () => import("../sunburst-chart-slots.config-lV4uNMcp.js"),
+            "../../item-definitions/symbol-map/symbol-map-slots.config.ts": () => import("../symbol-map-slots.config-DT5lvWh_.js"),
+            "../../item-definitions/text/text-slots.config.ts": () => import("../text-slots.config-Hy5yNIAX.js"),
+            "../../item-definitions/treemap-chart/treemap-chart-slots.config.ts": () => import("../treemap-chart-slots.config-xLD22K9V.js"),
+            "../../item-definitions/venn-diagram/venn-diagram-slots.config.ts": () => import("../venn-diagram-slots.config-BPxkBFb6.js"),
+            "../../item-definitions/video/video-slots.config.ts": () => import("../video-slots.config-IpwUxDyU.js"),
+            "../../item-definitions/wordcloud-chart/wordcloud-chart-slots.config.ts": () => import("../wordcloud-chart-slots.config-BS4sOOHt.js")
+          });
+          if (o[`../../item-definitions/${t}/${t}-slots.config.ts`]) {
+            const l = await o[`../../item-definitions/${t}/${t}-slots.config.ts`]();
+            this._slotsConfig = (l == null ? void 0 : l.default) ?? {};
+          }
+          return this._slotsConfig;
+        }
+      },
+      args: () => [this.itemType, this.language]
+    }), this.slotConfiguration = {}, this.slotContents = [], this.language = "en", this.disabled = !1, this.menu = "default", this.hasLabel = !1, this.selects = "multiple", this.icons = "only-menu", this.datasetsDataItems = [], this.placement = "bottom-end", this.hideDelete = !0, this._hasExtraEmptySelects = !1, this._currentSlotContents = [], this._selectOptions = [], this._slotContentOptions = [], this.stretch = !1, this._changedSlotContents = (t) => {
+      this.dispatchEvent(
+        new CustomEvent("slot-contents-changed", {
+          bubbles: !0,
+          composed: !0,
+          cancelable: !0,
+          detail: {
+            slotContents: t
+          }
+        })
+      );
+    };
+  }
+  _emptySlotContents(t) {
+    typeof t != "number" ? (this.slotContents = [], this._currentSlotContents = [], this._changedSlotContents([])) : (this._currentSlotContents = this._currentSlotContents.filter(
+      (l, e) => e !== t
+    ), this._changedSlotContents(this._currentSlotContents));
+  }
+  willUpdate(t) {
+    const o = t.has("slotContents"), l = t.has("datasetsDataItems"), e = t.has("language");
+    o && (this._currentSlotContents = structuredClone(this.slotContents)), l && (this._selectOptions = this._createSelectOptions(), this._slotContentOptions = this._createSlotContentOptions()), e && this.language !== C() && ([..._].includes(this.language ?? "en") || this.language === "en") && S(this.language);
+  }
+  _onSlotMenuChanges(t) {
+    var o;
+    t.preventDefault(), t.stopPropagation(), this.slotContents.length === ((o = t.detail.slotContents) == null ? void 0 : o.length) ? (this._currentSlotContents = t.detail.slotContents, this._changedSlotContents(this._currentSlotContents)) : (this.slotContents = t.detail.slotContents, this._changedSlotContents(this.slotContents));
+  }
+  _setSlotContentAtIndex(t, o) {
+    var e, s, u, i, r, f;
+    const l = (s = (e = t == null ? void 0 : t.detail) == null ? void 0 : e.value) == null ? void 0 : s[0];
+    o >= this._currentSlotContents.length && this._removeEmptySelect();
+    for (let p = this._currentSlotContents.length; p <= o; p++)
+      this._currentSlotContents[p] || this._currentSlotContents.push({});
+    if (l && !(l === ((u = this._currentSlotContents[o]) == null ? void 0 : u.columnId) || l === ((i = this._currentSlotContents[o]) == null ? void 0 : i.column) || l === ((r = this._currentSlotContents[o]) == null ? void 0 : r.formulaId) || l === ((f = this._currentSlotContents[o]) == null ? void 0 : f.formula))) {
+      const p = this._slotContentOptions.find(
+        (g) => g.columnId === l || g.formulaId === l
+      );
+      p && (this._currentSlotContents[o] = structuredClone(p));
+    }
+    this.slotContents = structuredClone(
+      this._currentSlotContents.filter(
+        (p) => p.columnId || p.formulaId || p.column || p.formula
+      )
+    ), this._changedSlotContents(this.slotContents);
+  }
+  _setSlotContents(t) {
+    var l, e;
+    let o = t.detail.value;
+    (l = this.slotConfiguration) != null && l.canAcceptMultipleDataItems && o.length > 1 || (o = o.slice(0, 1)), this._currentSlotContents = ((e = this._currentSlotContents) == null ? void 0 : e.filter((s) => o.includes(s.columnId ?? s.formulaId))) ?? [], o.forEach((s) => {
+      if (this._currentSlotContents.some(
+        (i) => i.columnId === s || i.formulaId === s
+      ))
+        return;
+      const u = this._slotContentOptions.find(
+        (i) => i.columnId === s || i.formulaId === s
+      );
+      u && this._currentSlotContents.push(structuredClone(u));
+    }), this.slotContents = structuredClone(this._currentSlotContents), this._changedSlotContents(this._currentSlotContents);
+  }
+  _createSlotContentOptions() {
+    var o, l;
+    const t = [];
+    for (const e of this.datasetsDataItems ?? []) {
+      const s = (e == null ? void 0 : e.columns) ?? [], u = (e == null ? void 0 : e.formulas) ?? [];
+      for (const i of s)
+        if ((((o = this.slotConfiguration) == null ? void 0 : o.acceptableDataItemTypes) ?? [
+          "hierarchy",
+          "numeric",
+          "datetime",
+          "array[hierarchy]",
+          "array[numeric]",
+          "array[datetime]"
+        ]).includes(i.type)) {
+          const r = structuredClone(i);
+          r.columnId = i.id, r.datasetId = e.id, r.label = i.name, delete r.name, delete r.id, t.push(r);
+        }
+      if ((l = this.slotConfiguration) != null && l.canAcceptFormula)
+        for (const i of u) {
+          const r = structuredClone(i);
+          r.formulaId = i.id, r.datasetId = e.id, r.label = i.name, delete r.name, delete r.id, t.push(r);
+        }
+    }
+    return t;
+  }
+  _createSelectOptions() {
+    var o, l;
+    const t = [];
+    for (const e of this.datasetsDataItems ?? []) {
+      const s = (e == null ? void 0 : e.columns) ?? [], u = (e == null ? void 0 : e.formulas) ?? [];
+      for (const i of s)
+        (((o = this.slotConfiguration) == null ? void 0 : o.acceptableDataItemTypes) ?? [
+          "hierarchy",
+          "numeric",
+          "datetime",
+          "array[hierarchy]",
+          "array[numeric]",
+          "array[datetime]"
+        ]).includes(i.type) && t.push({
+          value: i.id,
+          label: v((i == null ? void 0 : i.name) ?? {}, this.language),
+          icon: b(i, this.size)
+        });
+      if ((l = this.slotConfiguration) != null && l.canAcceptFormula)
+        for (const i of u)
+          t.push({
+            value: i.id,
+            label: v((i == null ? void 0 : i.name) ?? {}, this.language),
+            icon: b(i, this.size)
+          });
+    }
+    return t;
+  }
+  _renderFieldLabel() {
+    return c`<luzmo-field-label for="data-item" size=${this.size}
+      >${this.label ?? k("Select...")}
+    </luzmo-field-label>`;
+  }
+  _removeEmptySelect() {
+    this._hasExtraEmptySelects = !1;
+  }
+  _addDataItem() {
+    this._hasExtraEmptySelects = !0;
+  }
+  _renderExtraDataItemButton() {
+    return c`<div class="extra-data-item-button-container">
+      <luzmo-action-button
+        size="xs"
+        @click=${this._addDataItem}
+        ?disabled=${this._hasExtraEmptySelects}
+      >
+        ${d(I)}
+      </luzmo-action-button>
+      <luzmo-tooltip self-managed placement="top" size=${this.size}>
+        Add data item
+      </luzmo-tooltip>
+    </div>`;
+  }
+  _renderSingleSelect() {
+    const t = this._renderFieldLabel(), o = this._currentSlotContents.map(
+      (l, e) => {
+        var s, u, i, r;
+        return c` <div class="select-container">
+          ${this.hasLabel && e === 0 ? t : ""}
+          ${this._renderSelectMenu(e)}
+          ${((s = this.slotContents) == null ? void 0 : s.length) > 0 && !(this.hideConfiguration && this.hideDelete) ? c`<div class="controls">
+                ${this.hideConfiguration ? "" : c`<luzmo-action-button
+                      .size=${this.size}
+                      quiet
+                      id=${`trigger-${e}`}
+                    >
+                      ${d(z)}
+                      <luzmo-tooltip
+                        self-managed
+                        placement="top"
+                        size=${this.size}
+                      >
+                        edit
+                      </luzmo-tooltip>
+                    </luzmo-action-button>`}
+                ${this.hideDelete ? "" : c`<div
+                      @click=${this._emptySlotContents.bind(this, e)}
+                    >
+                      ${d(h)}
+                      <luzmo-tooltip
+                        self-managed
+                        placement="top"
+                        size=${this.size}
+                      >
+                        Delete
+                      </luzmo-tooltip>
+                    </div>`}
+              </div>` : ""}
+          ${((u = this.slotContents) == null ? void 0 : u.length) > 0 ? c`<luzmo-overlay
+                trigger=${`trigger-${e}@click`}
+                .placement=${this.placement}
+              >
+                <luzmo-slot-menu
+                  language=${this.language}
+                  content-language=${this.language}
+                  slot-type=${(i = this.slotConfiguration) == null ? void 0 : i.type}
+                  .slotContents=${this._currentSlotContents}
+                  .slotIndex=${(r = this.slotConfiguration) != null && r.canAcceptMultipleDataItems ? e : void 0}
+                  variant="popup"
+                  .size=${this.size}
+                  @slot-contents-changed=${this._onSlotMenuChanges}
+                ></luzmo-slot-menu>
+              </luzmo-overlay>` : ""}
+        </div>`;
+      }
+    );
+    return this._hasExtraEmptySelects && o.push(
+      c`<div class="select-container">
+          ${this._renderSelectMenu(this._currentSlotContents.length)}
+          <div class="controls">
+            <luzmo-action-button
+              .size=${this.size}
+              quiet
+              @click=${this._removeEmptySelect}
+            >
+              ${d(h)}
+              <luzmo-tooltip self-managed placement="top" size=${this.size}>
+                Delete
+              </luzmo-tooltip>
+            </luzmo-action-button>
+          </div>
+        </div>`
+    ), o.push(this._renderExtraDataItemButton()), o;
+  }
+  _renderMultipleSelect() {
+    var o, l, e;
+    const t = this._renderFieldLabel();
+    return c`<div class="select-container">
+      ${this.hasLabel ? t : ""} ${this._renderSelectMenu()}
+      ${((o = this.slotContents) == null ? void 0 : o.length) > 0 && !(this.hideConfiguration && this.hideDelete) ? c`<div class="controls">
+            ${this.hideConfiguration ? "" : c`<luzmo-action-button .size=${this.size} quiet id="trigger">
+                  ${d(z)}
+                  <luzmo-tooltip self-managed placement="top" size=${this.size}>
+                    edit
+                  </luzmo-tooltip>
+                </luzmo-action-button>`}
+            ${this.hideDelete ? "" : c`<div @click=${this._emptySlotContents}>
+                  ${d(h)}
+                  <luzmo-tooltip self-managed placement="top" size=${this.size}>
+                    Delete
+                  </luzmo-tooltip>
+                </div>`}
+          </div>` : ""}
+      ${((l = this.slotContents) == null ? void 0 : l.length) > 0 ? c`<luzmo-overlay
+            trigger="trigger@click"
+            .placement=${this.placement}
+          >
+            <luzmo-slot-menu
+              language=${this.language}
+              content-language=${this.language}
+              slot-type=${(e = this.slotConfiguration) == null ? void 0 : e.type}
+              .slotContents=${this._currentSlotContents}
+              variant="popup"
+              .size=${this.size}
+              @slot-contents-changed=${this._onSlotMenuChanges}
+            ></luzmo-slot-menu>
+          </luzmo-overlay>` : ""}
+    </div>`;
+  }
+  _renderSelectMenu(t) {
+    var l, e;
+    let o;
+    return t && t >= this._currentSlotContents.length ? o = [] : (o = (l = this._currentSlotContents) == null ? void 0 : l.map((s) => s.columnId ?? s.formulaId ?? s.column ?? s.formula), this.selects === "single" && (o == null ? void 0 : o.length) > 0 && (o = [o[t ?? 0]])), c`<luzmo-select
+      label="Select..."
+      id="expression"
+      size=${this.size}
+      variant="highlight"
+      .language=${this.language}
+      placement="bottom-start"
+      ?disabled=${this.disabled}
+      .options=${this._selectOptions}
+      .value=${o}
+      selects=${this.selects === "multiple" && ((e = this.slotConfiguration) != null && e.canAcceptMultipleDataItems) ? "multiple" : "single"}
+      @change=${(s) => this.selects === "single" ? this._setSlotContentAtIndex(s, t ?? 0) : this._setSlotContents(s)}
+    >
+    </luzmo-select>`;
+  }
+  _slotContentsPickerMarkup() {
+    return c`
+      <div class="container">
+        ${this.selects === "multiple" ? this._renderMultipleSelect() : this._renderSingleSelect()}
+      </div>
+    `;
+  }
+  render() {
+    return this._loadSlotsConfig.render({
+      pending: () => c`<p>Loading...</p>`,
+      complete: (t) => {
+        if (this.slotName && this.itemType && t) {
+          const o = t.find(
+            (l) => l.name === this.slotName
+          );
+          o && (this.slotConfiguration = o);
+        }
+        return this._slotContentsPickerMarkup();
+      },
+      error: (t) => c`
+        <div>
+          Could not load slot-contents-picker: '${this.slotName}' of chart
+          '${this.itemType}': ${t}.
+        </div>
+      `
+    });
+  }
+};
+n.styles = w(L);
+a([
+  m({ type: String, reflect: !0, attribute: "item-type" })
+], n.prototype, "itemType", 2);
+a([
+  m({ type: String, reflect: !0, attribute: "slot-name" })
+], n.prototype, "slotName", 2);
+a([
+  m({ type: Object })
+], n.prototype, "slotConfiguration", 2);
+a([
+  m({ type: Object })
+], n.prototype, "slotContents", 2);
+a([
+  m({ type: String, reflect: !0 })
+], n.prototype, "language", 2);
+a([
+  m({ type: Boolean, attribute: "disabled", reflect: !0 })
+], n.prototype, "disabled", 2);
+a([
+  m({ type: String, reflect: !0 })
+], n.prototype, "menu", 2);
+a([
+  m({ type: Boolean, attribute: "has-label", reflect: !0 })
+], n.prototype, "hasLabel", 2);
+a([
+  m({ type: String, reflect: !0 })
+], n.prototype, "label", 2);
+a([
+  m({ type: String, reflect: !0 })
+], n.prototype, "selects", 2);
+a([
+  m({ type: String, reflect: !0 })
+], n.prototype, "icons", 2);
+a([
+  m({ type: String, attribute: "placeholder", reflect: !0 })
+], n.prototype, "placeholder", 2);
+a([
+  m({ type: Array, reflect: !1 })
+], n.prototype, "datasetsDataItems", 2);
+a([
+  m({ type: String, reflect: !0 })
+], n.prototype, "placement", 2);
+a([
+  m({ type: Boolean, reflect: !0, attribute: "hide-delete" })
+], n.prototype, "hideDelete", 2);
+a([
+  m({ type: Boolean, reflect: !0, attribute: "hide-configuration" })
+], n.prototype, "hideConfiguration", 2);
+a([
+  D()
+], n.prototype, "_hasExtraEmptySelects", 2);
+a([
+  m({ type: Boolean, reflect: !0 })
+], n.prototype, "stretch", 2);
+n = a([
+  x()
+], n);
+customElements.get("luzmo-slot-contents-picker") || customElements.define("luzmo-slot-contents-picker", n);
+export {
+  n as LuzmoSlotContentsPicker
+};

package/components/slot-contents-picker/slot-contents-picker.d.ts

@@ -0,0 +1,112 @@
+import { Placement } from '@floating-ui/dom';
+import '@luzmo/lucero/action-button';
+import '@luzmo/lucero/field-label';
+import '@luzmo/lucero/overlay';
+import '@luzmo/lucero/select';
+import '@luzmo/lucero/tooltip';
+import { PropertyValues } from 'lit';
+import { LuzmoElement } from '../../utils/base';
+import './../display-settings';
+import './../slot-menu';
+declare const LuzmoSlotContentsPicker_base: typeof LuzmoElement & {
+    new (...args: any[]): import("../../utils/base/sized-mixin").SizedElementInterface;
+    prototype: import("../../utils/base/sized-mixin").SizedElementInterface;
+};
+/**
+ * @element luzmo-slot-contents-picker
+ * @fires slot-contents-changed - Announces that the slot contents has changed
+ */
+export declare class LuzmoSlotContentsPicker extends LuzmoSlotContentsPicker_base {
+    static styles: import("lit").CSSResult;
+    private _loadSlotsConfig;
+    private _itemTypeLoaded?;
+    private _slotsConfig?;
+    /**
+     * The type of the item
+     */
+    itemType?: string;
+    /**
+     * The name of the slot
+     */
+    slotName?: string;
+    /**
+     * (Optional) The configuration of the slot, overrides the slot configuration loaded from the item type & slot name.
+     */
+    slotConfiguration: any;
+    /**
+     * The contents of the slot
+     */
+    slotContents: any;
+    /**
+     * The language of the slot-menu
+     */
+    language: string;
+    /**
+     * Whether the picker is disabled
+     */
+    disabled: boolean;
+    /**
+     * The type of config interaction
+     */
+    menu: 'default' | 'draggable' | 'event-only';
+    /**
+     * Whether the picker has a label
+     */
+    hasLabel: boolean;
+    /**
+     * The label for the picker, if hasLabel is true
+     */
+    label?: string;
+    /**
+     * Whether the picker allows multiple selections. Only relevant if the slot configuration allows multiple data items.
+     */
+    selects: 'single' | 'multiple';
+    /**
+     * Where to show icons
+     */
+    icons?: 'none' | 'only-menu' | 'all';
+    /**
+     * The placeholder text for the picker is no value selected.
+     */
+    placeholder?: string;
+    /**
+     * The datasets and their dataItems to display
+     */
+    datasetsDataItems: {
+        id: string;
+        name: {
+            [key: string]: string;
+        };
+        columns: any[];
+        formulas: any[];
+    }[];
+    /**
+     * Placement of the slot menu. Only relevant for 'popup' and 'draggable' menu type
+     */
+    placement: Placement;
+    hideDelete: boolean;
+    hideConfiguration?: boolean;
+    private _hasExtraEmptySelects;
+    private _currentSlotContents;
+    private _selectOptions;
+    private _slotContentOptions;
+    stretch: boolean;
+    private _changedSlotContents;
+    private _emptySlotContents;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    private _onSlotMenuChanges;
+    private _setSlotContentAtIndex;
+    private _setSlotContents;
+    private _createSlotContentOptions;
+    private _createSelectOptions;
+    private _renderFieldLabel;
+    private _removeEmptySelect;
+    private _addDataItem;
+    private _renderExtraDataItemButton;
+    private _renderSingleSelect;
+    private _renderMultipleSelect;
+    private _renderSelectMenu;
+    private _slotContentsPickerMarkup;
+    render(): import("lit-html").TemplateResult<1> | undefined;
+}
+export {};