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

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

@@ -17,44 +17,47 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { msg as y, localized as C } from "@lit/localize";
-import { Task as S } from "@lit/task";
-import { luzmoIcon as d, luzmoPlus as _, luzmoCog as z, luzmoTrashOutline as h } 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 b } from "../calculate-data-item-icon-DjlZwMdO.js";
-import { l as v } from "../localize-BX7q0S0M.js";
-import { html as c, unsafeCSS as k } from "lit";
-import { property as m, state as x } from "lit/decorators.js";
-import { L as $ } from "../focusable-DCIFkpiW.js";
-import { S as I } from "../sized-mixin-cJbo3PKR.js";
-import { g as w, t as D, s as E } from "../set-locale-Dp3N_gXN.js";
-import "../index-Do7O9azB.js";
+import { c as f } from "../calculate-data-item-icon-DMDhKq_m.js";
+import { l as g } from "../localize-CcDpq940.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]")) {
-    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-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(t);
+    const o = document.createElement("style");
+    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 O = ":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 L = Object.defineProperty, M = Object.getOwnPropertyDescriptor, a = (o, t, i, e) => {
-  for (var s = e > 1 ? void 0 : e ? M(t, i) : t, u = o.length - 1, l; u >= 0; u--)
-    (l = o[u]) && (s = (e ? l(t, i, s) : l(s)) || s);
-  return e && s && L(t, i, s), s;
+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 n = class extends I($, {
+let s = class extends x(k, {
   validSizes: ["s", "m", "l", "xl"],
   noDefaultSize: !0
 }) {
   constructor() {
-    super(...arguments), this._loadSlotsConfig = new S(this, {
-      task: async ([o]) => {
-        if (o && o !== this._itemTypeLoaded) {
-          const t = /* @__PURE__ */ Object.assign({
+    super(), this._loadSlotsConfig = new y(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"),
@@ -101,128 +104,126 @@ let n = class extends I($, {
             "../../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 (t[`../../item-definitions/${o}/${o}-slots.config.ts`]) {
-            const i = await t[`../../item-definitions/${o}/${o}-slots.config.ts`]();
-            this._slotsConfig = (i == null ? void 0 : i.default) ?? {};
+          if (o[`../../item-definitions/${t}/${t}-slots.config.ts`]) {
+            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 = (o) => {
+    }), 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,
           composed: !0,
           cancelable: !0,
           detail: {
-            slotContents: o
+            slotContents: t
           }
         })
       );
-    };
+    }, new z(this, {
+      context: D,
+      initialValue: this._store
+    });
   }
-  _emptySlotContents(o) {
-    typeof o != "number" ? (this.slotContents = [], this._currentSlotContents = [], this._changedSlotContents([])) : (this._currentSlotContents = this._currentSlotContents.filter(
-      (i, e) => e !== o
+  _emptySlotContents(t) {
+    typeof t != "number" ? (this.slotContents = [], this._currentSlotContents = [], this._changedSlotContents([])) : (this._currentSlotContents = this._currentSlotContents.filter(
+      (i, l) => l !== t
     ), this._changedSlotContents(this._currentSlotContents));
   }
-  willUpdate(o) {
-    const t = o.has("slotContents"), i = o.has("datasetsDataItems"), e = o.has("language");
-    t && (this._currentSlotContents = structuredClone(this.slotContents)), i && (this._selectOptions = this._createSelectOptions(), this._slotContentOptions = this._createSlotContentOptions()), e && this.language !== w() && ([...D].includes(this.language ?? "en") || this.language === "en") && E(this.language);
+  willUpdate(t) {
+    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(o) {
-    var t;
-    o.preventDefault(), o.stopPropagation(), this.slotContents.length === ((t = o.detail.slotContents) == null ? void 0 : t.length) ? (this._currentSlotContents = o.detail.slotContents, this._changedSlotContents(this._currentSlotContents)) : (this.slotContents = o.detail.slotContents, this._changedSlotContents(this.slotContents));
+  _onSlotMenuChanges(t) {
+    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(o, t) {
-    var e, s, u, l, r, g;
-    const i = (s = (e = o == null ? void 0 : o.detail) == null ? void 0 : e.value) == null ? void 0 : s[0];
-    t >= this._currentSlotContents.length && this._removeEmptySelect();
-    for (let p = this._currentSlotContents.length; p <= t; p++)
-      this._currentSlotContents[p] || this._currentSlotContents.push({});
-    if (i && !(i === ((u = this._currentSlotContents[t]) == null ? void 0 : u.columnId) || i === ((l = this._currentSlotContents[t]) == null ? void 0 : l.column) || i === ((r = this._currentSlotContents[t]) == null ? void 0 : r.formulaId) || i === ((g = this._currentSlotContents[t]) == null ? void 0 : g.formula))) {
-      const p = this._slotContentOptions.find(
-        (f) => f.columnId === i || f.formulaId === i
+  _setSlotContentAtIndex(t, o) {
+    const i = t?.detail?.value?.[0], l = t?.detail?.value?.length === 0;
+    o >= this._currentSlotContents.length && this._removeEmptySelect();
+    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
       );
-      p && (this._currentSlotContents[t] = structuredClone(p));
-    }
+      e && (this._currentSlotContents[o] = structuredClone(e));
+    } else l && this._currentSlotContents.splice(o, 1);
     this.slotContents = structuredClone(
       this._currentSlotContents.filter(
-        (p) => p.columnId || p.formulaId || p.column || p.formula
+        (e) => e.columnId || e.formulaId || e.column || e.formula
       )
     ), this._changedSlotContents(this.slotContents);
   }
-  _setSlotContents(o) {
-    var i, e;
-    let t = o.detail.value;
-    (i = this.slotConfiguration) != null && i.canAcceptMultipleDataItems && t.length > 1 || (t = t.slice(0, 1)), this._currentSlotContents = ((e = this._currentSlotContents) == null ? void 0 : e.filter((s) => t.includes(s.columnId ?? s.formulaId))) ?? [], t.forEach((s) => {
+  _setSlotContents(t) {
+    let o = t.detail.value;
+    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(
-        (l) => l.columnId === s || l.formulaId === s
+        (e) => e.columnId === i || e.formulaId === i
       ))
         return;
-      const u = this._slotContentOptions.find(
-        (l) => l.columnId === s || l.formulaId === s
+      const l = this._slotContentOptions.find(
+        (e) => e.columnId === i || e.formulaId === i
       );
-      u && this._currentSlotContents.push(structuredClone(u));
+      l && this._currentSlotContents.push(structuredClone(l));
     }), this.slotContents = structuredClone(this._currentSlotContents), this._changedSlotContents(this._currentSlotContents);
   }
   _createSlotContentOptions() {
-    var t, i;
-    const o = [];
-    for (const e of this.datasetsDataItems ?? []) {
-      const s = (e == null ? void 0 : e.columns) ?? [], u = (e == null ? void 0 : e.formulas) ?? [];
-      for (const l of s)
-        if ((((t = this.slotConfiguration) == null ? void 0 : t.acceptableDataItemTypes) ?? [
+    const t = [];
+    for (const o of this.datasetsDataItems ?? []) {
+      const i = o?.columns ?? [], l = o?.formulas ?? [];
+      for (const e of i)
+        if ((this.slotConfiguration?.acceptableDataItemTypes ?? [
           "hierarchy",
           "numeric",
           "datetime",
           "array[hierarchy]",
           "array[numeric]",
           "array[datetime]"
-        ]).includes(l.type)) {
-          const r = structuredClone(l);
-          r.columnId = l.id, r.datasetId = e.id, r.label = l.name, delete r.name, delete r.id, o.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 ((i = this.slotConfiguration) != null && i.canAcceptFormula)
-        for (const l of u) {
-          const r = structuredClone(l);
-          r.formulaId = l.id, r.datasetId = e.id, r.label = l.name, delete r.name, delete r.id, o.push(r);
+      if (this.slotConfiguration?.canAcceptFormula)
+        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 o;
+    return t;
   }
   _createSelectOptions() {
-    var t, i;
-    const o = [];
-    for (const e of this.datasetsDataItems ?? []) {
-      const s = (e == null ? void 0 : e.columns) ?? [], u = (e == null ? void 0 : e.formulas) ?? [];
-      for (const l of s)
-        (((t = this.slotConfiguration) == null ? void 0 : t.acceptableDataItemTypes) ?? [
+    const t = [];
+    for (const o of this.datasetsDataItems ?? []) {
+      const i = o?.columns ?? [], l = o?.formulas ?? [];
+      for (const e of i)
+        (this.slotConfiguration?.acceptableDataItemTypes ?? [
           "hierarchy",
           "numeric",
           "datetime",
           "array[hierarchy]",
           "array[numeric]",
           "array[datetime]"
-        ]).includes(l.type) && o.push({
-          value: l.id,
-          label: v((l == null ? void 0 : l.name) ?? {}, this.language),
-          icon: b(l, this.size)
+        ]).includes(e.type) && t.push({
+          value: e.id,
+          label: g(e?.name ?? {}, this.language),
+          icon: f(e, this.size)
         });
-      if ((i = this.slotConfiguration) != null && i.canAcceptFormula)
-        for (const l of u)
-          o.push({
-            value: l.id,
-            label: v((l == null ? void 0 : l.name) ?? {}, this.language),
-            icon: b(l, this.size)
+      if (this.slotConfiguration?.canAcceptFormula)
+        for (const e of l)
+          t.push({
+            value: e.id,
+            label: g(e?.name ?? {}, this.language),
+            icon: f(e, this.size)
           });
     }
-    return o;
+    return t;
   }
   _renderFieldLabel() {
     return c`<luzmo-field-label for="data-item" size=${this.size}
-      >${this.label ?? y("Select...")}
+      >${this.label ?? b("Select...")}
     </luzmo-field-label>`;
   }
   _removeEmptySelect() {
@@ -238,7 +239,7 @@ let n = class extends I($, {
         @click=${this._addDataItem}
         ?disabled=${this._hasExtraEmptySelects}
       >
-        ${d(_)}
+        ${m(C)}
       </luzmo-action-button>
       <luzmo-tooltip self-managed placement="top" size=${this.size}>
         Add data item
@@ -246,19 +247,17 @@ let n = class extends I($, {
     </div>`;
   }
   _renderSingleSelect() {
-    const o = this._renderFieldLabel(), t = this._currentSlotContents.map(
-      (i, e) => {
-        var s, u, l, r;
-        return c` <div class="select-container">
-          ${this.hasLabel && e === 0 ? o : ""}
-          ${this._renderSelectMenu(e)}
-          ${((s = this.slotContents) == null ? void 0 : s.length) > 0 && !(this.hideConfiguration && this.hideDelete) ? c`<div class="controls">
+    const t = this._renderFieldLabel(), o = this._currentSlotContents.map(
+      (i, l) => c` <div class="select-container">
+          ${this.hasLabel && l === 0 ? t : ""}
+          ${this._renderSelectMenu(l)}
+          ${this.slotContents?.length > 0 && !(this.hideConfiguration && this.hideDelete) ? c`<div class="controls">
                 ${this.hideConfiguration ? "" : c`<luzmo-action-button
                       .size=${this.size}
                       quiet
-                      id=${`trigger-${e}`}
+                      id=${`trigger-${l}`}
                     >
-                      ${d(z)}
+                      ${m(h)}
                       <luzmo-tooltip
                         self-managed
                         placement="top"
@@ -268,9 +267,9 @@ let n = class extends I($, {
                       </luzmo-tooltip>
                     </luzmo-action-button>`}
                 ${this.hideDelete ? "" : c`<div
-                      @click=${this._emptySlotContents.bind(this, e)}
+                      @click=${this._emptySlotContents.bind(this, l)}
                     >
-                      ${d(h)}
+                      ${m(d)}
                       <luzmo-tooltip
                         self-managed
                         placement="top"
@@ -280,25 +279,25 @@ let n = class extends I($, {
                       </luzmo-tooltip>
                     </div>`}
               </div>` : ""}
-          ${((u = this.slotContents) == null ? void 0 : u.length) > 0 ? c`<luzmo-overlay
-                trigger=${`trigger-${e}@click`}
+          ${this.slotContents?.length > 0 ? c`<luzmo-overlay
+                trigger=${`trigger-${l}@click`}
                 .placement=${this.placement}
               >
                 <luzmo-slot-menu
                   language=${this.language}
                   content-language=${this.language}
-                  slot-type=${(l = this.slotConfiguration) == null ? void 0 : l.type}
-                  .slotContents=${this._currentSlotContents}
-                  .slotIndex=${(r = this.slotConfiguration) != null && r.canAcceptMultipleDataItems ? e : void 0}
+                  slot-type=${this.slotConfiguration?.type}
+                  slot-name=${u(this.slotName)}
+                  item-type=${u(this.itemType)}
+                  .slotIndex=${this.slotConfiguration?.canAcceptMultipleDataItems ? l : void 0}
                   variant="popup"
                   .size=${this.size}
                   @slot-contents-changed=${this._onSlotMenuChanges}
                 ></luzmo-slot-menu>
               </luzmo-overlay>` : ""}
-        </div>`;
-      }
+        </div>`
     );
-    return this._hasExtraEmptySelects && t.push(
+    return this._hasExtraEmptySelects && o.push(
       c`<div class="select-container">
           ${this._renderSelectMenu(this._currentSlotContents.length)}
           <div class="controls">
@@ -307,43 +306,43 @@ let n = class extends I($, {
               quiet
               @click=${this._removeEmptySelect}
             >
-              ${d(h)}
+              ${m(d)}
               <luzmo-tooltip self-managed placement="top" size=${this.size}>
                 Delete
               </luzmo-tooltip>
             </luzmo-action-button>
           </div>
         </div>`
-    ), t.push(this._renderExtraDataItemButton()), t;
+    ), o.push(this._renderExtraDataItemButton()), o;
   }
   _renderMultipleSelect() {
-    var t, i, e;
-    const o = this._renderFieldLabel();
+    const t = this._renderFieldLabel();
     return c`<div class="select-container">
-      ${this.hasLabel ? o : ""} ${this._renderSelectMenu()}
-      ${((t = this.slotContents) == null ? void 0 : t.length) > 0 && !(this.hideConfiguration && this.hideDelete) ? c`<div class="controls">
+      ${this.hasLabel ? t : ""} ${this._renderSelectMenu()}
+      ${this.slotContents?.length > 0 && !(this.hideConfiguration && this.hideDelete) ? c`<div class="controls">
             ${this.hideConfiguration ? "" : c`<luzmo-action-button .size=${this.size} quiet id="trigger">
-                  ${d(z)}
+                  ${m(h)}
                   <luzmo-tooltip self-managed placement="top" size=${this.size}>
                     edit
                   </luzmo-tooltip>
                 </luzmo-action-button>`}
             ${this.hideDelete ? "" : c`<div @click=${this._emptySlotContents}>
-                  ${d(h)}
+                  ${m(d)}
                   <luzmo-tooltip self-managed placement="top" size=${this.size}>
                     Delete
                   </luzmo-tooltip>
                 </div>`}
           </div>` : ""}
-      ${((i = this.slotContents) == null ? void 0 : i.length) > 0 ? c`<luzmo-overlay
+      ${this.slotContents?.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}
+              slot-type=${this.slotConfiguration?.type}
+              slot-name=${u(this.slotName)}
+              item-type=${u(this.itemType)}
               variant="popup"
               .size=${this.size}
               @slot-contents-changed=${this._onSlotMenuChanges}
@@ -351,32 +350,32 @@ let n = class extends I($, {
           </luzmo-overlay>` : ""}
     </div>`;
   }
-  _renderSelectMenu(o) {
-    var i, e;
-    let t;
-    return o && o >= this._currentSlotContents.length ? t = [] : (t = (i = this._currentSlotContents) == null ? void 0 : i.map((s) => s.columnId ?? s.formulaId ?? s.column ?? s.formula), this.selects === "single" && (t == null ? void 0 : t.length) > 0 && (t = [t[o ?? 0]])), c`<luzmo-select
+  _renderSelectMenu(t) {
+    let o;
+    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=${t}
-      selects=${this.selects === "multiple" && ((e = this.slotConfiguration) != null && e.canAcceptMultipleDataItems) ? "multiple" : "single"}
-      data-index=${o ?? 0}
+      .value=${o}
+      ?clearable=${!this.hideClear}
+      selects=${this.selects === "multiple" && this.slotConfiguration?.canAcceptMultipleDataItems ? "multiple" : "single"}
+      data-index=${t ?? 0}
       @change=${this._handleSelectChange}
     >
     </luzmo-select>`;
   }
-  _handleSelectChange(o) {
-    var t;
+  _handleSelectChange(t) {
     if (this.selects === "single") {
-      const i = o.currentTarget, e = (t = i == null ? void 0 : i.dataset) == null ? void 0 : t.index, s = e ? Number.parseInt(e, 10) : 0;
-      this._setSlotContentAtIndex(o, Number.isNaN(s) ? 0 : s);
+      const i = t.currentTarget?.dataset?.index, l = i ? Number.parseInt(i, 10) : 0;
+      this._setSlotContentAtIndex(t, Number.isNaN(l) ? 0 : l);
     } else
-      this._setSlotContents(o);
+      this._setSlotContents(t);
   }
   _slotContentsPickerMarkup() {
     return c`
@@ -388,83 +387,86 @@ let n = class extends I($, {
   render() {
     return this._loadSlotsConfig.render({
       pending: () => c`<p>Loading...</p>`,
-      complete: (o) => {
-        if (this.slotName && this.itemType && o) {
-          const t = o.find(
+      complete: (t) => {
+        if (this.slotName && this.itemType && t) {
+          const o = t.find(
             (i) => i.name === this.slotName
           );
-          t && (this.slotConfiguration = t);
+          o && (this.slotConfiguration = o);
         }
         return this._slotContentsPickerMarkup();
       },
-      error: (o) => c`
+      error: (t) => c`
         <div>
           Could not load slot-contents-picker: '${this.slotName}' of chart
-          '${this.itemType}': ${o}.
+          '${this.itemType}': ${t}.
         </div>
       `
     });
   }
 };
-n.styles = k(O);
-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([
-  x()
-], n.prototype, "_hasExtraEmptySelects", 2);
-a([
-  m({ type: Boolean, reflect: !0 })
-], n.prototype, "stretch", 2);
-n = a([
-  C()
-], n);
-customElements.get("luzmo-slot-contents-picker") || customElements.define("luzmo-slot-contents-picker", n);
+s.styles = _(O);
+r([
+  a({ type: String, reflect: !0, attribute: "item-type" })
+], s.prototype, "itemType", 2);
+r([
+  a({ type: String, reflect: !0, attribute: "slot-name" })
+], s.prototype, "slotName", 2);
+r([
+  a({ type: Object })
+], s.prototype, "slotConfiguration", 2);
+r([
+  a({ type: Object })
+], s.prototype, "slotContents", 2);
+r([
+  a({ type: String, reflect: !0 })
+], s.prototype, "language", 2);
+r([
+  a({ type: Boolean, attribute: "disabled", reflect: !0 })
+], s.prototype, "disabled", 2);
+r([
+  a({ type: String, reflect: !0 })
+], s.prototype, "menu", 2);
+r([
+  a({ type: Boolean, attribute: "has-label", reflect: !0 })
+], s.prototype, "hasLabel", 2);
+r([
+  a({ type: String, reflect: !0 })
+], s.prototype, "label", 2);
+r([
+  a({ type: String, reflect: !0 })
+], s.prototype, "selects", 2);
+r([
+  a({ type: String, reflect: !0 })
+], s.prototype, "search", 2);
+r([
+  a({ type: String, reflect: !0 })
+], s.prototype, "icons", 2);
+r([
+  a({ type: String, attribute: "placeholder", reflect: !0 })
+], s.prototype, "placeholder", 2);
+r([
+  a({ type: Array, reflect: !1 })
+], s.prototype, "datasetsDataItems", 2);
+r([
+  a({ type: String, reflect: !0 })
+], s.prototype, "placement", 2);
+r([
+  a({ type: Boolean, reflect: !0, attribute: "hide-delete" })
+], s.prototype, "hideDelete", 2);
+r([
+  a({ type: Boolean, reflect: !0, attribute: "hide-configuration" })
+], s.prototype, "hideConfiguration", 2);
+r([
+  a({ type: Boolean, reflect: !0, attribute: "hide-clear" })
+], s.prototype, "hideClear", 2);
+r([
+  S()
+], s.prototype, "_hasExtraEmptySelects", 2);
+s = r([
+  v()
+], s);
+customElements.get("luzmo-slot-contents-picker") || customElements.define("luzmo-slot-contents-picker", s);
 export {
-  n as LuzmoSlotContentsPicker
+  s as LuzmoSlotContentsPicker
 };