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

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

@@ -17,22 +17,25 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { msg as f, localized as z } from "@lit/localize";
-import { Task as b } from "@lit/task";
-import { luzmoIcon as m, luzmoPlus as v, luzmoCog as d, luzmoTrashOutline as p } from "@luzmo/icons";
+import { ContextProvider as z } from "@lit/context";
+import { msg as b, localized as v } from "@lit/localize";
+import { Task as y } from "@lit/task";
+import { luzmoIcon as m, luzmoPlus as C, luzmoCog as h, luzmoTrashOutline as d } from "@luzmo/icons";
 import "@luzmo/lucero/action-button";
 import "@luzmo/lucero/field-label";
 import "@luzmo/lucero/overlay";
 import "@luzmo/lucero/select";
 import "@luzmo/lucero/tooltip";
-import { c as h } from "../calculate-data-item-icon-DMDhKq_m.js";
+import { c as f } from "../calculate-data-item-icon-DMDhKq_m.js";
 import { l as g } from "../localize-CcDpq940.js";
-import { html as a, unsafeCSS as y } from "lit";
-import { property as c, state as C } from "lit/decorators.js";
-import { L as S } from "../focusable-BS2pbY7w.js";
-import { S as _ } from "../sized-mixin-cJbo3PKR.js";
-import { g as k, t as x, s as $ } from "../set-locale-hKTMz37h.js";
-import "../index-CqKpf0B8.js";
+import { html as c, unsafeCSS as _ } from "lit";
+import { property as a, state as S } from "lit/decorators.js";
+import { ifDefined as u } from "lit/directives/if-defined.js";
+import { L as k } from "../focusable-BS2pbY7w.js";
+import { S as x } from "../sized-mixin-cJbo3PKR.js";
+import { g as $, t as I, s as w } from "../set-locale-B5562CBM.js";
+import { s as D } from "../index-CqKpf0B8.js";
+import { S as E } from "../slot-store-CRfN0nD3.js";
 import "../slot-menu/index.js";
 (function() {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
@@ -40,18 +43,18 @@ import "../slot-menu/index.js";
     o.setAttribute("data-luzmo-vars", ""), o.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-background-color-alt-1: rgb(250, 250, 250);--luzmo-background-color-alt-2: rgb(239, 239, 239);--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-secondary-outline: rgba(255, 0, 255, 0.2);--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(o);
   }
 })();
-const I = ":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 w = Object.defineProperty, D = Object.getOwnPropertyDescriptor, n = (t, o, e, l) => {
-  for (var i = l > 1 ? void 0 : l ? D(o, e) : o, r = t.length - 1, u; r >= 0; r--)
-    (u = t[r]) && (i = (l ? u(o, e, i) : u(i)) || i);
-  return l && i && w(o, e, i), i;
+const O = ":host{font-family:var(--luzmo-slot-contents-picker-font-family, var(--luzmo-font-family))}.container{flex-grow:1;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;flex-grow:1;align-items:center}luzmo-select{flex-grow:var(--luzmo-slot-contents-picker-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 L = Object.defineProperty, M = Object.getOwnPropertyDescriptor, r = (t, o, i, l) => {
+  for (var e = l > 1 ? void 0 : l ? M(o, i) : o, n = t.length - 1, p; n >= 0; n--)
+    (p = t[n]) && (e = (l ? p(o, i, e) : p(e)) || e);
+  return l && e && L(o, i, e), e;
 };
-let s = class extends _(S, {
+let s = class extends x(k, {
   validSizes: ["s", "m", "l", "xl"],
   noDefaultSize: !0
 }) {
   constructor() {
-    super(...arguments), this._loadSlotsConfig = new b(this, {
+    super(), this._loadSlotsConfig = new y(this, {
       task: async ([t]) => {
         if (t && t !== this._itemTypeLoaded) {
           const o = /* @__PURE__ */ Object.assign({
@@ -102,14 +105,14 @@ let s = class extends _(S, {
             "../../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 e = await o[`../../item-definitions/${t}/${t}-slots.config.ts`]();
-            this._slotsConfig = e?.default ?? {};
+            const i = await o[`../../item-definitions/${t}/${t}-slots.config.ts`]();
+            this._slotsConfig = i?.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.slotConfiguration = {}, this.slotContents = [], this.language = "en", this.disabled = !1, this.menu = "default", this.hasLabel = !1, this.selects = "multiple", this.search = "auto", this.icons = "menu-only", this.datasetsDataItems = [], this.placement = "bottom-end", this.hideDelete = !0, this.hideClear = !1, this._hasExtraEmptySelects = !1, this._currentSlotContents = [], this._selectOptions = [], this._slotContentOptions = [], this._store = new E(), this._changedSlotContents = (t) => {
       this.dispatchEvent(
         new CustomEvent("slot-contents-changed", {
           bubbles: !0,
@@ -120,46 +123,49 @@ let s = class extends _(S, {
           }
         })
       );
-    };
+    }, new z(this, {
+      context: D,
+      initialValue: this._store
+    });
   }
   _emptySlotContents(t) {
     typeof t != "number" ? (this.slotContents = [], this._currentSlotContents = [], this._changedSlotContents([])) : (this._currentSlotContents = this._currentSlotContents.filter(
-      (e, l) => l !== t
+      (i, l) => l !== t
     ), this._changedSlotContents(this._currentSlotContents));
   }
   willUpdate(t) {
-    const o = t.has("slotContents"), e = t.has("datasetsDataItems"), l = t.has("language");
-    o && (this._currentSlotContents = structuredClone(this.slotContents)), e && (this._selectOptions = this._createSelectOptions(), this._slotContentOptions = this._createSlotContentOptions()), l && this.language !== k() && ([...x].includes(this.language ?? "en") || this.language === "en") && $(this.language);
+    const o = t.has("slotContents"), i = t.has("datasetsDataItems"), l = t.has("language");
+    o && (this._currentSlotContents = structuredClone(this.slotContents ?? []), this._store?.setContents(this._currentSlotContents ?? [], this.slotName)), i && (this._selectOptions = this._createSelectOptions(), this._slotContentOptions = this._createSlotContentOptions()), l && this.language !== $() && ([...I].includes(this.language ?? "en") || this.language === "en") && w(this.language);
   }
   _onSlotMenuChanges(t) {
-    t.preventDefault(), t.stopPropagation(), this.slotContents.length === t.detail.slotContents?.length ? (this._currentSlotContents = t.detail.slotContents, this._changedSlotContents(this._currentSlotContents)) : (this.slotContents = t.detail.slotContents, this._changedSlotContents(this.slotContents));
+    t.preventDefault(), t.stopPropagation(), (this.slotContents?.length ?? 0) === (t.detail.slotContents?.length ?? 0) ? (this._currentSlotContents = structuredClone(t.detail.slotContents ?? []), this.slotContents = structuredClone(t.detail.slotContents ?? []), this._store?.setContents(this._currentSlotContents ?? [], this.slotName), this._changedSlotContents(this._currentSlotContents)) : (this.slotContents = t.detail.slotContents ?? [], this._store?.setContents(this.slotContents ?? [], this.slotName), this._changedSlotContents(this.slotContents));
   }
   _setSlotContentAtIndex(t, o) {
-    const e = t?.detail?.value?.[0];
+    const i = t?.detail?.value?.[0], l = t?.detail?.value?.length === 0;
     o >= this._currentSlotContents.length && this._removeEmptySelect();
-    for (let l = this._currentSlotContents.length; l <= o; l++)
-      this._currentSlotContents[l] || this._currentSlotContents.push({});
-    if (e && !(e === this._currentSlotContents[o]?.columnId || e === this._currentSlotContents[o]?.column || e === this._currentSlotContents[o]?.formulaId || e === this._currentSlotContents[o]?.formula)) {
-      const l = this._slotContentOptions.find(
-        (i) => i.columnId === e || i.formulaId === e
+    for (let e = this._currentSlotContents.length; e <= o; e++)
+      this._currentSlotContents[e] || this._currentSlotContents.push({});
+    if (i && !(i === this._currentSlotContents[o]?.columnId || i === this._currentSlotContents[o]?.column || i === this._currentSlotContents[o]?.formulaId || i === this._currentSlotContents[o]?.formula)) {
+      const e = this._slotContentOptions.find(
+        (n) => n.columnId === i || n.formulaId === i
       );
-      l && (this._currentSlotContents[o] = structuredClone(l));
-    }
+      e && (this._currentSlotContents[o] = structuredClone(e));
+    } else l && this._currentSlotContents.splice(o, 1);
     this.slotContents = structuredClone(
       this._currentSlotContents.filter(
-        (l) => l.columnId || l.formulaId || l.column || l.formula
+        (e) => e.columnId || e.formulaId || e.column || e.formula
       )
     ), this._changedSlotContents(this.slotContents);
   }
   _setSlotContents(t) {
     let o = t.detail.value;
-    this.slotConfiguration?.canAcceptMultipleDataItems && o.length > 1 || (o = o.slice(0, 1)), this._currentSlotContents = this._currentSlotContents?.filter((e) => o.includes(e.columnId ?? e.formulaId)) ?? [], o.forEach((e) => {
+    this.slotConfiguration?.canAcceptMultipleDataItems && o.length > 1 || (o = o.slice(0, 1)), this._currentSlotContents = this._currentSlotContents?.filter((i) => o.includes(i.columnId ?? i.formulaId)) ?? [], o.forEach((i) => {
       if (this._currentSlotContents.some(
-        (i) => i.columnId === e || i.formulaId === e
+        (e) => e.columnId === i || e.formulaId === i
       ))
         return;
       const l = this._slotContentOptions.find(
-        (i) => i.columnId === e || i.formulaId === e
+        (e) => e.columnId === i || e.formulaId === i
       );
       l && this._currentSlotContents.push(structuredClone(l));
     }), this.slotContents = structuredClone(this._currentSlotContents), this._changedSlotContents(this._currentSlotContents);
@@ -167,8 +173,8 @@ let s = class extends _(S, {
   _createSlotContentOptions() {
     const t = [];
     for (const o of this.datasetsDataItems ?? []) {
-      const e = o?.columns ?? [], l = o?.formulas ?? [];
-      for (const i of e)
+      const i = o?.columns ?? [], l = o?.formulas ?? [];
+      for (const e of i)
         if ((this.slotConfiguration?.acceptableDataItemTypes ?? [
           "hierarchy",
           "numeric",
@@ -176,14 +182,14 @@ let s = class extends _(S, {
           "array[hierarchy]",
           "array[numeric]",
           "array[datetime]"
-        ]).includes(i.type)) {
-          const r = structuredClone(i);
-          r.columnId = i.id, r.datasetId = o.id, r.label = i.name, delete r.name, delete r.id, t.push(r);
+        ]).includes(e.type)) {
+          const n = structuredClone(e);
+          n.columnId = e.id, n.datasetId = o.id, n.label = e.name, delete n.name, delete n.id, t.push(n);
         }
       if (this.slotConfiguration?.canAcceptFormula)
-        for (const i of l) {
-          const r = structuredClone(i);
-          r.formulaId = i.id, r.datasetId = o.id, r.label = i.name, delete r.name, delete r.id, t.push(r);
+        for (const e of l) {
+          const n = structuredClone(e);
+          n.formulaId = e.id, n.datasetId = o.id, n.label = e.name, delete n.name, delete n.id, t.push(n);
         }
     }
     return t;
@@ -191,8 +197,8 @@ let s = class extends _(S, {
   _createSelectOptions() {
     const t = [];
     for (const o of this.datasetsDataItems ?? []) {
-      const e = o?.columns ?? [], l = o?.formulas ?? [];
-      for (const i of e)
+      const i = o?.columns ?? [], l = o?.formulas ?? [];
+      for (const e of i)
         (this.slotConfiguration?.acceptableDataItemTypes ?? [
           "hierarchy",
           "numeric",
@@ -200,24 +206,24 @@ let s = class extends _(S, {
           "array[hierarchy]",
           "array[numeric]",
           "array[datetime]"
-        ]).includes(i.type) && t.push({
-          value: i.id,
-          label: g(i?.name ?? {}, this.language),
-          icon: h(i, this.size)
+        ]).includes(e.type) && t.push({
+          value: e.id,
+          label: g(e?.name ?? {}, this.language),
+          icon: f(e, this.size)
         });
       if (this.slotConfiguration?.canAcceptFormula)
-        for (const i of l)
+        for (const e of l)
           t.push({
-            value: i.id,
-            label: g(i?.name ?? {}, this.language),
-            icon: h(i, this.size)
+            value: e.id,
+            label: g(e?.name ?? {}, this.language),
+            icon: f(e, this.size)
           });
     }
     return t;
   }
   _renderFieldLabel() {
-    return a`<luzmo-field-label for="data-item" size=${this.size}
-      >${this.label ?? f("Select...")}
+    return c`<luzmo-field-label for="data-item" size=${this.size}
+      >${this.label ?? b("Select...")}
     </luzmo-field-label>`;
   }
   _removeEmptySelect() {
@@ -227,13 +233,13 @@ let s = class extends _(S, {
     this._hasExtraEmptySelects = !0;
   }
   _renderExtraDataItemButton() {
-    return a`<div class="extra-data-item-button-container">
+    return c`<div class="extra-data-item-button-container">
       <luzmo-action-button
         size="xs"
         @click=${this._addDataItem}
         ?disabled=${this._hasExtraEmptySelects}
       >
-        ${m(v)}
+        ${m(C)}
       </luzmo-action-button>
       <luzmo-tooltip self-managed placement="top" size=${this.size}>
         Add data item
@@ -242,16 +248,16 @@ let s = class extends _(S, {
   }
   _renderSingleSelect() {
     const t = this._renderFieldLabel(), o = this._currentSlotContents.map(
-      (e, l) => a` <div class="select-container">
+      (i, l) => c` <div class="select-container">
           ${this.hasLabel && l === 0 ? t : ""}
           ${this._renderSelectMenu(l)}
-          ${this.slotContents?.length > 0 && !(this.hideConfiguration && this.hideDelete) ? a`<div class="controls">
-                ${this.hideConfiguration ? "" : a`<luzmo-action-button
+          ${this.slotContents?.length > 0 && !(this.hideConfiguration && this.hideDelete) ? c`<div class="controls">
+                ${this.hideConfiguration ? "" : c`<luzmo-action-button
                       .size=${this.size}
                       quiet
                       id=${`trigger-${l}`}
                     >
-                      ${m(d)}
+                      ${m(h)}
                       <luzmo-tooltip
                         self-managed
                         placement="top"
@@ -260,10 +266,10 @@ let s = class extends _(S, {
                         edit
                       </luzmo-tooltip>
                     </luzmo-action-button>`}
-                ${this.hideDelete ? "" : a`<div
+                ${this.hideDelete ? "" : c`<div
                       @click=${this._emptySlotContents.bind(this, l)}
                     >
-                      ${m(p)}
+                      ${m(d)}
                       <luzmo-tooltip
                         self-managed
                         placement="top"
@@ -273,7 +279,7 @@ let s = class extends _(S, {
                       </luzmo-tooltip>
                     </div>`}
               </div>` : ""}
-          ${this.slotContents?.length > 0 ? a`<luzmo-overlay
+          ${this.slotContents?.length > 0 ? c`<luzmo-overlay
                 trigger=${`trigger-${l}@click`}
                 .placement=${this.placement}
               >
@@ -281,7 +287,8 @@ let s = class extends _(S, {
                   language=${this.language}
                   content-language=${this.language}
                   slot-type=${this.slotConfiguration?.type}
-                  .slotContents=${this._currentSlotContents}
+                  slot-name=${u(this.slotName)}
+                  item-type=${u(this.itemType)}
                   .slotIndex=${this.slotConfiguration?.canAcceptMultipleDataItems ? l : void 0}
                   variant="popup"
                   .size=${this.size}
@@ -291,7 +298,7 @@ let s = class extends _(S, {
         </div>`
     );
     return this._hasExtraEmptySelects && o.push(
-      a`<div class="select-container">
+      c`<div class="select-container">
           ${this._renderSelectMenu(this._currentSlotContents.length)}
           <div class="controls">
             <luzmo-action-button
@@ -299,7 +306,7 @@ let s = class extends _(S, {
               quiet
               @click=${this._removeEmptySelect}
             >
-              ${m(p)}
+              ${m(d)}
               <luzmo-tooltip self-managed placement="top" size=${this.size}>
                 Delete
               </luzmo-tooltip>
@@ -310,23 +317,23 @@ let s = class extends _(S, {
   }
   _renderMultipleSelect() {
     const t = this._renderFieldLabel();
-    return a`<div class="select-container">
+    return c`<div class="select-container">
       ${this.hasLabel ? t : ""} ${this._renderSelectMenu()}
-      ${this.slotContents?.length > 0 && !(this.hideConfiguration && this.hideDelete) ? a`<div class="controls">
-            ${this.hideConfiguration ? "" : a`<luzmo-action-button .size=${this.size} quiet id="trigger">
-                  ${m(d)}
+      ${this.slotContents?.length > 0 && !(this.hideConfiguration && this.hideDelete) ? c`<div class="controls">
+            ${this.hideConfiguration ? "" : c`<luzmo-action-button .size=${this.size} quiet id="trigger">
+                  ${m(h)}
                   <luzmo-tooltip self-managed placement="top" size=${this.size}>
                     edit
                   </luzmo-tooltip>
                 </luzmo-action-button>`}
-            ${this.hideDelete ? "" : a`<div @click=${this._emptySlotContents}>
-                  ${m(p)}
+            ${this.hideDelete ? "" : c`<div @click=${this._emptySlotContents}>
+                  ${m(d)}
                   <luzmo-tooltip self-managed placement="top" size=${this.size}>
                     Delete
                   </luzmo-tooltip>
                 </div>`}
           </div>` : ""}
-      ${this.slotContents?.length > 0 ? a`<luzmo-overlay
+      ${this.slotContents?.length > 0 ? c`<luzmo-overlay
             trigger="trigger@click"
             .placement=${this.placement}
           >
@@ -334,7 +341,8 @@ let s = class extends _(S, {
               language=${this.language}
               content-language=${this.language}
               slot-type=${this.slotConfiguration?.type}
-              .slotContents=${this._currentSlotContents}
+              slot-name=${u(this.slotName)}
+              item-type=${u(this.itemType)}
               variant="popup"
               .size=${this.size}
               @slot-contents-changed=${this._onSlotMenuChanges}
@@ -344,16 +352,18 @@ let s = class extends _(S, {
   }
   _renderSelectMenu(t) {
     let o;
-    return t && t >= this._currentSlotContents.length ? o = [] : (o = this._currentSlotContents?.map((e) => e.columnId ?? e.formulaId ?? e.column ?? e.formula), this.selects === "single" && o?.length > 0 && (o = [o[t ?? 0]])), a`<luzmo-select
+    return t && t >= this._currentSlotContents.length ? o = [] : (o = this._currentSlotContents?.map((i) => i.columnId ?? i.formulaId ?? i.column ?? i.formula), this.selects === "single" && o?.length > 0 && (o = [o[t ?? 0]])), c`<luzmo-select
+      .search=${this.search}
       label="Select..."
       id="expression"
       size=${this.size}
       variant="highlight"
       .language=${this.language}
-      placement="bottom-start"
+      .placement=${this.placement}
       ?disabled=${this.disabled}
       .options=${this._selectOptions}
       .value=${o}
+      ?clearable=${!this.hideClear}
       selects=${this.selects === "multiple" && this.slotConfiguration?.canAcceptMultipleDataItems ? "multiple" : "single"}
       data-index=${t ?? 0}
       @change=${this._handleSelectChange}
@@ -362,13 +372,13 @@ let s = class extends _(S, {
   }
   _handleSelectChange(t) {
     if (this.selects === "single") {
-      const e = t.currentTarget?.dataset?.index, l = e ? Number.parseInt(e, 10) : 0;
+      const i = t.currentTarget?.dataset?.index, l = i ? Number.parseInt(i, 10) : 0;
       this._setSlotContentAtIndex(t, Number.isNaN(l) ? 0 : l);
     } else
       this._setSlotContents(t);
   }
   _slotContentsPickerMarkup() {
-    return a`
+    return c`
       <div class="container">
         ${this.selects === "multiple" ? this._renderMultipleSelect() : this._renderSingleSelect()}
       </div>
@@ -376,17 +386,17 @@ let s = class extends _(S, {
   }
   render() {
     return this._loadSlotsConfig.render({
-      pending: () => a`<p>Loading...</p>`,
+      pending: () => c`<p>Loading...</p>`,
       complete: (t) => {
         if (this.slotName && this.itemType && t) {
           const o = t.find(
-            (e) => e.name === this.slotName
+            (i) => i.name === this.slotName
           );
           o && (this.slotConfiguration = o);
         }
         return this._slotContentsPickerMarkup();
       },
-      error: (t) => a`
+      error: (t) => c`
         <div>
           Could not load slot-contents-picker: '${this.slotName}' of chart
           '${this.itemType}': ${t}.
@@ -395,63 +405,66 @@ let s = class extends _(S, {
     });
   }
 };
-s.styles = y(I);
-n([
-  c({ type: String, reflect: !0, attribute: "item-type" })
+s.styles = _(O);
+r([
+  a({ type: String, reflect: !0, attribute: "item-type" })
 ], s.prototype, "itemType", 2);
-n([
-  c({ type: String, reflect: !0, attribute: "slot-name" })
+r([
+  a({ type: String, reflect: !0, attribute: "slot-name" })
 ], s.prototype, "slotName", 2);
-n([
-  c({ type: Object })
+r([
+  a({ type: Object })
 ], s.prototype, "slotConfiguration", 2);
-n([
-  c({ type: Object })
+r([
+  a({ type: Object })
 ], s.prototype, "slotContents", 2);
-n([
-  c({ type: String, reflect: !0 })
+r([
+  a({ type: String, reflect: !0 })
 ], s.prototype, "language", 2);
-n([
-  c({ type: Boolean, attribute: "disabled", reflect: !0 })
+r([
+  a({ type: Boolean, attribute: "disabled", reflect: !0 })
 ], s.prototype, "disabled", 2);
-n([
-  c({ type: String, reflect: !0 })
+r([
+  a({ type: String, reflect: !0 })
 ], s.prototype, "menu", 2);
-n([
-  c({ type: Boolean, attribute: "has-label", reflect: !0 })
+r([
+  a({ type: Boolean, attribute: "has-label", reflect: !0 })
 ], s.prototype, "hasLabel", 2);
-n([
-  c({ type: String, reflect: !0 })
+r([
+  a({ type: String, reflect: !0 })
 ], s.prototype, "label", 2);
-n([
-  c({ type: String, reflect: !0 })
+r([
+  a({ type: String, reflect: !0 })
 ], s.prototype, "selects", 2);
-n([
-  c({ type: String, reflect: !0 })
+r([
+  a({ type: String, reflect: !0 })
+], s.prototype, "search", 2);
+r([
+  a({ type: String, reflect: !0 })
 ], s.prototype, "icons", 2);
-n([
-  c({ type: String, attribute: "placeholder", reflect: !0 })
+r([
+  a({ type: String, attribute: "placeholder", reflect: !0 })
 ], s.prototype, "placeholder", 2);
-n([
-  c({ type: Array, reflect: !1 })
+r([
+  a({ type: Array, reflect: !1 })
 ], s.prototype, "datasetsDataItems", 2);
-n([
-  c({ type: String, reflect: !0 })
+r([
+  a({ type: String, reflect: !0 })
 ], s.prototype, "placement", 2);
-n([
-  c({ type: Boolean, reflect: !0, attribute: "hide-delete" })
+r([
+  a({ type: Boolean, reflect: !0, attribute: "hide-delete" })
 ], s.prototype, "hideDelete", 2);
-n([
-  c({ type: Boolean, reflect: !0, attribute: "hide-configuration" })
+r([
+  a({ type: Boolean, reflect: !0, attribute: "hide-configuration" })
 ], s.prototype, "hideConfiguration", 2);
-n([
-  C()
+r([
+  a({ type: Boolean, reflect: !0, attribute: "hide-clear" })
+], s.prototype, "hideClear", 2);
+r([
+  S()
 ], s.prototype, "_hasExtraEmptySelects", 2);
-n([
-  c({ type: Boolean, reflect: !0 })
-], s.prototype, "stretch", 2);
-s = n([
-  z()
+s = r([
+  v()
 ], s);
 customElements.get("luzmo-slot-contents-picker") || customElements.define("luzmo-slot-contents-picker", s);
 export {

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

@@ -1,4 +1,5 @@
 import { Placement } from '@floating-ui/dom';
+import { SlotName, VizItemType } from '@luzmo/dashboard-contents-types';
 import '@luzmo/lucero/action-button';
 import '@luzmo/lucero/field-label';
 import '@luzmo/lucero/overlay';
@@ -24,11 +25,11 @@ export declare class LuzmoSlotContentsPicker extends LuzmoSlotContentsPicker_bas
     /**
      * The type of the item
      */
-    itemType?: string;
+    itemType?: VizItemType;
     /**
      * The name of the slot
      */
-    slotName?: string;
+    slotName?: SlotName;
     /**
      * (Optional) The configuration of the slot, overrides the slot configuration loaded from the item type & slot name.
      */
@@ -58,13 +59,19 @@ export declare class LuzmoSlotContentsPicker extends LuzmoSlotContentsPicker_bas
      */
     label?: string;
     /**
-     * Whether the picker allows multiple selections. Only relevant if the slot configuration allows multiple data items.
+     * Whether the picker allows single or multiple selections. Only relevant if the slot configuration allows multiple data items.
+     * @default 'multiple'
      */
     selects: 'single' | 'multiple';
+    /**
+     * @attr search - Whether the search input is visible.
+     * @default 'auto'
+     */
+    search?: 'on' | 'off' | 'auto';
     /**
      * Where to show icons
      */
-    icons?: 'none' | 'only-menu' | 'all';
+    icons?: 'none' | 'menu-only' | 'all';
     /**
      * The placeholder text for the picker is no value selected.
      */
@@ -84,13 +91,27 @@ export declare class LuzmoSlotContentsPicker extends LuzmoSlotContentsPicker_bas
      * Placement of the slot menu. Only relevant for 'popup' and 'draggable' menu type
      */
     placement: Placement;
+    /**
+     * Whether to hide the delete button
+     * @default true
+     */
     hideDelete: boolean;
+    /**
+     * Whether to hide the configuration button
+     * @default false
+     */
     hideConfiguration?: boolean;
+    /**
+     * Whether to hide the clear button op a select
+     * @default false
+     */
+    hideClear: boolean;
     private _hasExtraEmptySelects;
     private _currentSlotContents;
     private _selectOptions;
     private _slotContentOptions;
-    stretch: boolean;
+    private readonly _store;
+    constructor();
     private _changedSlotContents;
     private _emptySlotContents;
     protected willUpdate(changedProperties: PropertyValues): void;