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

package/components/droppable-slot/index.js

@@ -17,47 +17,571 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { a as C } from "../get-css-variable-YlLiVgo8.js";
-import { l as S } from "../localized-decorator-DNr1P1m0.js";
-import { m as f, g as k, t as w, s as L } from "../set-locale-DbEAMqUs.js";
-import { h as _ } from "../task-PQaVY8Iw.js";
-import { a3 as v, a8 as $, a6 as D } from "../luzmo-icons-v9hKZ3HV.js";
+import { a as io } from "../get-css-variable-YlLiVgo8.js";
+import { a as ao, s as no } from "../index-Cw_HnduG.js";
+import { l as co } from "../localized-decorator-DNr1P1m0.js";
+import { m as x, g as po, t as uo, s as mo } from "../set-locale-DbEAMqUs.js";
+import { h as ho } from "../task-CDsB8Kbr.js";
+import { a7 as F, aa as fo, ab as go } from "../luzmo-icons-DnAqAQCX.js";
 import "../index-BmshD32H.js";
-import { l as A } from "../localize-BX7q0S0M.js";
-import { x as g, r as E, n as p } from "../property-Dn4zSyxu.js";
-import { e as M } from "../query-Ddbd72Um.js";
-import { L as O } from "../focusable-BXhQz3_k.js";
-import { S as T } from "../sized-mixin-BR_Ii7le.js";
+import { l as bo } from "../localize-BX7q0S0M.js";
+import { x as w, r as vo, n as C } from "../property-BFMfZY1k.js";
+import { e as zo } from "../query-Ddbd72Um.js";
+import { L as yo } from "../focusable-Bhf_beoW.js";
+import { S as Co } from "../sized-mixin-CkdMApAU.js";
 import "../slot-menu/index.js";
-const x = () => {
+const so = () => {
   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);
+    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-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(o);
   }
 };
-x();
-const U = ":host{font-family:var(--luzmo-droppable-slot-font-family, var(--luzmo-font-family))}.droppable-slot[filled]{cursor:pointer;border:var(--luzmo-droppable-slot-filled-border-width, var(--droppable-slot-filled-border-width)) var(--luzmo-droppable-slot-filled-border-style, var(--droppable-slot-filled-border-style)) var(--luzmo-droppable-slot-filled-border-color, var(--droppable-slot-filled-border-color));background-color:var(--luzmo-droppable-slot-filled-background-color, var(--droppable-slot-filled-background-color));color:var(--luzmo-droppable-slot-filled-color, var(--droppable-slot-filled-color))}.droppable-slot{background-color:var(--luzmo-droppable-slot-background-color, var(--droppable-slot-background-color));color:var(--luzmo-droppable-slot-font-color, var(--droppable-slot-font-color));border:var(--luzmo-droppable-slot-border-width, var(--droppable-slot-border-width)) var(--luzmo-droppable-slot-border-style, var(--droppable-slot-border-style)) var(--luzmo-droppable-slot-border-color, var(--droppable-slot-border-color));display:flex;justify-content:space-between;align-items:center;padding-left:var(--luzmo-droppable-slot-edge-to-label, var(--droppable-slot-edge-to-label));gap:var(--luzmo-spacing-5);border-radius:var(--luzmo-border-radius);height:var(--luzmo-droppable-slot-height, var(--droppable-slot-height));cursor:move}:host([accept-drag]) .droppable-slot{background-color:var(--luzmo-droppable-slot-accept-drag-background-color, var(--droppable-slot-accept-drag-background-color));color:var(--luzmo-droppable-slot-accept-drag-font-color, var(--droppable-slot-accept-drag-font-color));border-color:var(--luzmo-droppable-slot-accept-drag-border-color, var(--droppable-slot-accept-drag-border-color))}:host([accept-drag]) .controls{background-color:var(--luzmo-droppable-slot-accept-drag-controls-background-color, var(--droppable-slot-accept-drag-controls-background-color));color:var(--luzmo-droppable-slot-accept-drag-controls-color, var(--droppable-slot-accept-drag-controls-color))}:host([disabled]) .droppable-slot{background-color:var(--luzmo-droppable-slot-background-color-disabled, var(--droppable-slot-background-color-disabled));color:var(--luzmo-droppable-slot-color-disabled, var(--droppable-slot-color-disabled));cursor:not-allowed}:host([disabled]) .drag-handle-icon{opacity:.25;font-size:12px}.drag-handle-icon{opacity:.5;font-size:12px}.droppable-slot-label{font-size:var(--luzmo-droppable-slot-label-font-size, var(--droppable-slot-label-font-size));flex-grow:1;margin-right:var(--luzmo-droppable-slot-text-to-controls, var(--droppable-slot-text-to-controls));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.controls{height:100%;display:flex;align-items:center;gap:var(--luzmo-droppable-slot-controls-gap, var(--droppable-slot-controls-gap));background-color:var(--luzmo-droppable-slot-controls-background-color, var(--droppable-slot-controls-background-color));color:var(--luzmo-droppable-slot-controls-color, var(--droppable-slot-controls-color));margin-right:var(--luzmo-droppable-slot-controls-to-edge, var(--droppable-slot-controls-to-edge));padding:0 var(--luzmo-droppable-slot-controls-horizontal-padding, var(--droppable-slot-controls-horizontal-padding))}.controls div{cursor:pointer;height:100%;display:flex;align-items:center;padding:0 var(--luzmo-droppable-slot-controls-control-horizontal-padding, var(--droppable-slot-controls-control-horizontal-padding))}luzmo-slot-menu[placement=bottom],luzmo-slot-menu[placement=top],luzmo-slot-menu[placement=bottom-start],luzmo-slot-menu[placement=top-start],luzmo-slot-menu[placement=bottom-end],luzmo-slot-menu[placement=top-end]{margin:var(--luzmo-droppable-slot-overlay-vertical-gap, var(--droppable-slot-overlay-vertical-gap)) 0}luzmo-slot-menu[placement=left],luzmo-slot-menu[placement=right],luzmo-slot-menu[placement=left-start],luzmo-slot-menu[placement=right-start],luzmo-slot-menu[placement=left-end],luzmo-slot-menu[placement=right-end]{margin:0 var(--luzmo-droppable-slot-overlay-horizontal-gap, var(--droppable-slot-overlay-horizontal-gap))}:host{--droppable-slot-border-width: var(--luzmo-border-width);--droppable-slot-border-style: dashed;--droppable-slot-border-color: var(--luzmo-border-color);--droppable-slot-background-color: transparent;--droppable-slot-accept-drag-background-color: var(--luzmo-positive-color);--droppable-slot-accept-drag-color: white;--droppable-slot-accept-drag-border-color: var(--luzmo-positive-color-down);--droppable-slot-accept-drag-font-color: white;--droppable-slot-font-color: var(--luzmo-font-color);--droppable-slot-controls-background-color: var(--luzmo-primary-down);--droppable-slot-controls-color: var(--luzmo-primary-inverse-color);--droppable-slot-accept-drag-controls-background-color: var( --luzmo-positive-color-down );--droppable-slot-accept-drag-controls-color: white;--droppable-slot-text-to-controls: var(--luzmo-spacing-3);--droppable-slot-controls-to-edge: 0;--droppable-slot-controls-gap: var(--luzmo-spacing-2);--droppable-slot-controls-horizontal-padding: var(--luzmo-spacing-2);--droppable-slot-controls-control-horizontal-padding: var(--luzmo-spacing-3);--droppable-slot-filled-background-color: var(--luzmo-primary);--droppable-slot-filled-color: var(--luzmo-primary-inverse-color);--droppable-slot-filled-border-width: var(--luzmo-border-width);--droppable-slot-filled-border-style: solid;--droppable-slot-filled-border-color: var(--luzmo-primary-down);--droppable-slot-height: var(--luzmo-component-height);--droppable-slot-label-font-size: var(--luzmo-font-size);--droppable-slot-icon-type-font-size: var(--luzmo-font-size);--droppable-slot-edge-to-label: var(--luzmo-spacing-5);--droppable-slot-color-disabled: var(--luzmo-color-disabled);--droppable-slot-background-color-disabled: var( --luzmo-background-color-disabled )}:host{--droppable-slot-height: var(--luzmo-component-height);--droppable-slot-label-font-size: var(--luzmo-font-size);--droppable-slot-icon-type-font-size: var(--luzmo-font-size);--droppable-slot-horizontal-padding: var(--luzmo-spacing-4);--droppable-slot-overlay-horizontal-gap: var(--luzmo-spacing-4);--droppable-slot-overlay-vertical-gap: var(--luzmo-spacing-4)}:host([size=s]){--droppable-slot-height: var(--luzmo-component-height-s);--droppable-slot-label-font-size: var(--luzmo-font-size-s);--droppable-slot-icon-type-font-size: var(--luzmo-font-size-s);--droppable-slot-horizontal-padding: var(--luzmo-spacing-4);--droppable-slot-overlay-horizontal-gap: var(--luzmo-spacing-4);--droppable-slot-overlay-vertical-gap: var(--luzmo-spacing-4)}:host([size=l]){--droppable-slot-height: var(--luzmo-component-height-l);--droppable-slot-label-font-size: var(--luzmo-font-size-l);--droppable-slot-icon-type-font-size: var(--luzmo-font-size-l);--droppable-slot-horizontal-padding: var(--luzmo-spacing-5);--droppable-slot-overlay-horizontal-gap: var(--luzmo-spacing-5);--droppable-slot-overlay-vertical-gap: var(--luzmo-spacing-5)}:host([size=xl]){--droppable-slot-height: var(--luzmo-component-height-xl);--droppable-slot-label-font-size: var(--luzmo-font-size-xl);--droppable-slot-icon-type-font-size: var(--luzmo-font-size-xl);--droppable-slot-horizontal-padding: var(--luzmo-spacing-5);--droppable-slot-overlay-horizontal-gap: var(--luzmo-spacing-5);--droppable-slot-overlay-vertical-gap: var(--luzmo-spacing-5)}:host{box-sizing:border-box}", y = {
-  Category: () => f("Category", { desc: "Category label" }),
-  Measure: () => f("Measure", { desc: "Measure label" }),
-  Legend: () => f("Legend", { desc: "Legend label" }),
-  "Y-Axis": () => f("Y-Axis", { desc: "Y-Axis label" }),
-  "X-Axis": () => f("X-Axis", { desc: "X-Axis label" }),
-  "Group by": () => f("Group by", { desc: "Group by label" })
+so();
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+class wo {
+  get value() {
+    return this.o;
+  }
+  set value(t) {
+    this.setValue(t);
+  }
+  setValue(t, e = !1) {
+    const r = e || !Object.is(t, this.o);
+    this.o = t, r && this.updateObservers();
+  }
+  constructor(t) {
+    this.subscriptions = /* @__PURE__ */ new Map(), this.updateObservers = () => {
+      for (const [e, { disposer: r }] of this.subscriptions) e(this.o, r);
+    }, t !== void 0 && (this.value = t);
+  }
+  addCallback(t, e, r) {
+    if (!r) return void t(this.value);
+    this.subscriptions.has(t) || this.subscriptions.set(t, { disposer: () => {
+      this.subscriptions.delete(t);
+    }, consumerHost: e });
+    const { disposer: l } = this.subscriptions.get(t);
+    t(this.value, l);
+  }
+  clearCallbacks() {
+    this.subscriptions.clear();
+  }
+}
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+class xo extends Event {
+  constructor(t, e) {
+    super("context-provider", { bubbles: !0, composed: !0 }), this.context = t, this.contextTarget = e;
+  }
+}
+class So extends wo {
+  constructor(t, e, r) {
+    var l, d;
+    super(e.context !== void 0 ? e.initialValue : r), this.onContextRequest = (a) => {
+      if (a.context !== this.context) return;
+      const i = a.contextTarget ?? a.composedPath()[0];
+      i !== this.host && (a.stopPropagation(), this.addCallback(a.callback, i, a.subscribe));
+    }, this.onProviderRequest = (a) => {
+      if (a.context !== this.context || (a.contextTarget ?? a.composedPath()[0]) === this.host) return;
+      const i = /* @__PURE__ */ new Set();
+      for (const [m, { consumerHost: n }] of this.subscriptions) i.has(m) || (i.add(m), n.dispatchEvent(new ao(this.context, n, m, !0)));
+      a.stopPropagation();
+    }, this.host = t, e.context !== void 0 ? this.context = e.context : this.context = e, this.attachListeners(), (d = (l = this.host).addController) == null || d.call(l, this);
+  }
+  attachListeners() {
+    this.host.addEventListener("context-request", this.onContextRequest), this.host.addEventListener("context-provider", this.onProviderRequest);
+  }
+  hostConnected() {
+    this.host.dispatchEvent(new xo(this.context, this.host));
+  }
+}
+var No = Object.defineProperty, ko = (o, t, e) => t in o ? No(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e, $ = (o, t, e) => (ko(o, typeof t != "symbol" ? t + "" : t, e), e), _o = (o, t, e) => {
+  if (!t.has(o))
+    throw TypeError("Cannot " + e);
+}, M = (o, t) => {
+  if (Object(t) !== t)
+    throw TypeError('Cannot use the "in" operator on this value');
+  return o.has(t);
+}, I = (o, t, e) => {
+  if (t.has(o))
+    throw TypeError("Cannot add the same private member more than once");
+  t instanceof WeakSet ? t.add(o) : t.set(o, e);
+}, j = (o, t, e) => (_o(o, t, "access private method"), e);
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+function Y(o, t) {
+  return Object.is(o, t);
+}
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+let h = null, k = !1, O = 1;
+const L = /* @__PURE__ */ Symbol("SIGNAL");
+function S(o) {
+  const t = h;
+  return h = o, t;
+}
+function Eo() {
+  return h;
+}
+function To() {
+  return k;
+}
+const q = {
+  version: 0,
+  lastCleanEpoch: 0,
+  dirty: !1,
+  producerNode: void 0,
+  producerLastReadVersion: void 0,
+  producerIndexOfThis: void 0,
+  nextProducerIndex: 0,
+  liveConsumerNode: void 0,
+  liveConsumerIndexOfThis: void 0,
+  consumerAllowSignalWrites: !1,
+  consumerIsAlwaysLive: !1,
+  producerMustRecompute: () => !1,
+  producerRecomputeValue: () => {
+  },
+  consumerMarkedDirty: () => {
+  },
+  consumerOnSignalRead: () => {
+  }
+};
+function A(o) {
+  if (k)
+    throw new Error(
+      typeof ngDevMode < "u" && ngDevMode ? "Assertion error: signal read during notification phase" : ""
+    );
+  if (h === null)
+    return;
+  h.consumerOnSignalRead(o);
+  const t = h.nextProducerIndex++;
+  if (N(h), t < h.producerNode.length && h.producerNode[t] !== o && W(h)) {
+    const e = h.producerNode[t];
+    D(e, h.producerIndexOfThis[t]);
+  }
+  h.producerNode[t] !== o && (h.producerNode[t] = o, h.producerIndexOfThis[t] = W(h) ? Q(o, h, t) : 0), h.producerLastReadVersion[t] = o.version;
+}
+function Io() {
+  O++;
+}
+function X(o) {
+  if (!(!o.dirty && o.lastCleanEpoch === O)) {
+    if (!o.producerMustRecompute(o) && !$o(o)) {
+      o.dirty = !1, o.lastCleanEpoch = O;
+      return;
+    }
+    o.producerRecomputeValue(o), o.dirty = !1, o.lastCleanEpoch = O;
+  }
+}
+function Z(o) {
+  if (o.liveConsumerNode === void 0)
+    return;
+  const t = k;
+  k = !0;
+  try {
+    for (const e of o.liveConsumerNode)
+      e.dirty || Lo(e);
+  } finally {
+    k = t;
+  }
+}
+function Oo() {
+  return (h == null ? void 0 : h.consumerAllowSignalWrites) !== !1;
+}
+function Lo(o) {
+  var t;
+  o.dirty = !0, Z(o), (t = o.consumerMarkedDirty) == null || t.call(o.wrapper ?? o);
+}
+function Ao(o) {
+  return o && (o.nextProducerIndex = 0), S(o);
+}
+function Do(o, t) {
+  if (S(t), !(!o || o.producerNode === void 0 || o.producerIndexOfThis === void 0 || o.producerLastReadVersion === void 0)) {
+    if (W(o))
+      for (let e = o.nextProducerIndex; e < o.producerNode.length; e++)
+        D(o.producerNode[e], o.producerIndexOfThis[e]);
+    for (; o.producerNode.length > o.nextProducerIndex; )
+      o.producerNode.pop(), o.producerLastReadVersion.pop(), o.producerIndexOfThis.pop();
+  }
+}
+function $o(o) {
+  N(o);
+  for (let t = 0; t < o.producerNode.length; t++) {
+    const e = o.producerNode[t], r = o.producerLastReadVersion[t];
+    if (r !== e.version || (X(e), r !== e.version))
+      return !0;
+  }
+  return !1;
+}
+function Q(o, t, e) {
+  var r;
+  if (U(o), N(o), o.liveConsumerNode.length === 0) {
+    (r = o.watched) == null || r.call(o.wrapper);
+    for (let l = 0; l < o.producerNode.length; l++)
+      o.producerIndexOfThis[l] = Q(o.producerNode[l], o, l);
+  }
+  return o.liveConsumerIndexOfThis.push(e), o.liveConsumerNode.push(t) - 1;
+}
+function D(o, t) {
+  var e;
+  if (U(o), N(o), typeof ngDevMode < "u" && ngDevMode && t >= o.liveConsumerNode.length)
+    throw new Error(
+      `Assertion error: active consumer index ${t} is out of bounds of ${o.liveConsumerNode.length} consumers)`
+    );
+  if (o.liveConsumerNode.length === 1) {
+    (e = o.unwatched) == null || e.call(o.wrapper);
+    for (let l = 0; l < o.producerNode.length; l++)
+      D(o.producerNode[l], o.producerIndexOfThis[l]);
+  }
+  const r = o.liveConsumerNode.length - 1;
+  if (o.liveConsumerNode[t] = o.liveConsumerNode[r], o.liveConsumerIndexOfThis[t] = o.liveConsumerIndexOfThis[r], o.liveConsumerNode.length--, o.liveConsumerIndexOfThis.length--, t < o.liveConsumerNode.length) {
+    const l = o.liveConsumerIndexOfThis[t], d = o.liveConsumerNode[t];
+    N(d), d.producerIndexOfThis[l] = t;
+  }
+}
+function W(o) {
+  var t;
+  return o.consumerIsAlwaysLive || (((t = o == null ? void 0 : o.liveConsumerNode) == null ? void 0 : t.length) ?? 0) > 0;
+}
+function N(o) {
+  o.producerNode ?? (o.producerNode = []), o.producerIndexOfThis ?? (o.producerIndexOfThis = []), o.producerLastReadVersion ?? (o.producerLastReadVersion = []);
+}
+function U(o) {
+  o.liveConsumerNode ?? (o.liveConsumerNode = []), o.liveConsumerIndexOfThis ?? (o.liveConsumerIndexOfThis = []);
+}
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+function J(o) {
+  if (X(o), A(o), o.value === V)
+    throw o.error;
+  return o.value;
+}
+function Mo(o) {
+  const t = Object.create(Po);
+  t.computation = o;
+  const e = () => J(t);
+  return e[L] = t, e;
+}
+const P = /* @__PURE__ */ Symbol("UNSET"), R = /* @__PURE__ */ Symbol("COMPUTING"), V = /* @__PURE__ */ Symbol("ERRORED"), Po = {
+  ...q,
+  value: P,
+  dirty: !0,
+  error: null,
+  equal: Y,
+  producerMustRecompute(o) {
+    return o.value === P || o.value === R;
+  },
+  producerRecomputeValue(o) {
+    if (o.value === R)
+      throw new Error("Detected cycle in computations.");
+    const t = o.value;
+    o.value = R;
+    const e = Ao(o);
+    let r, l = !1;
+    try {
+      r = o.computation.call(o.wrapper), l = t !== P && t !== V && o.equal.call(o.wrapper, t, r);
+    } catch (d) {
+      r = V, o.error = d;
+    } finally {
+      Do(o, e);
+    }
+    if (l) {
+      o.value = t;
+      return;
+    }
+    o.value = r, o.version++;
+  }
 };
-var G = Object.defineProperty, j = Object.getOwnPropertyDescriptor, n = (t, o, l, e) => {
-  for (var r = e > 1 ? void 0 : e ? j(o, l) : o, i = t.length - 1, s; i >= 0; i--)
-    (s = t[i]) && (r = (e ? s(o, l, r) : s(r)) || r);
-  return e && r && G(o, l, r), r;
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+function Ro() {
+  throw new Error();
+}
+let Wo = Ro;
+function Vo() {
+  Wo();
+}
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+function qo(o) {
+  const t = Object.create(Fo);
+  t.value = o;
+  const e = () => (A(t), t.value);
+  return e[L] = t, e;
+}
+function Uo() {
+  return A(this), this.value;
+}
+function Go(o, t) {
+  Oo() || Vo(), o.equal.call(o.wrapper, o.value, t) || (o.value = t, jo(o));
+}
+const Fo = {
+  ...q,
+  equal: Y,
+  value: void 0
 };
-let a = class extends T(O, {
+function jo(o) {
+  o.version++, Io(), Z(o);
+}
+/**
+ * @license
+ * Copyright 2024 Bloomberg Finance L.P.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const f = Symbol("node");
+var _;
+((o) => {
+  var t, e, r, l;
+  class d {
+    constructor(m, n = {}) {
+      I(this, e), $(this, t);
+      const u = qo(m)[L];
+      if (this[f] = u, u.wrapper = this, n) {
+        const v = n.equals;
+        v && (u.equal = v), u.watched = n[o.subtle.watched], u.unwatched = n[o.subtle.unwatched];
+      }
+    }
+    get() {
+      if (!(0, o.isState)(this))
+        throw new TypeError("Wrong receiver type for Signal.State.prototype.get");
+      return Uo.call(this[f]);
+    }
+    set(m) {
+      if (!(0, o.isState)(this))
+        throw new TypeError("Wrong receiver type for Signal.State.prototype.set");
+      if (To())
+        throw new Error("Writes to signals not permitted during Watcher callback");
+      const n = this[f];
+      Go(n, m);
+    }
+  }
+  t = f, e = /* @__PURE__ */ new WeakSet(), o.isState = (i) => typeof i == "object" && M(e, i), o.State = d;
+  class a {
+    // Create a Signal which evaluates to the value returned by the callback.
+    // Callback is called with this signal as the parameter.
+    constructor(m, n) {
+      I(this, l), $(this, r);
+      const u = Mo(m)[L];
+      if (u.consumerAllowSignalWrites = !0, this[f] = u, u.wrapper = this, n) {
+        const v = n.equals;
+        v && (u.equal = v), u.watched = n[o.subtle.watched], u.unwatched = n[o.subtle.unwatched];
+      }
+    }
+    get() {
+      if (!(0, o.isComputed)(this))
+        throw new TypeError("Wrong receiver type for Signal.Computed.prototype.get");
+      return J(this[f]);
+    }
+  }
+  r = f, l = /* @__PURE__ */ new WeakSet(), o.isComputed = (i) => typeof i == "object" && M(l, i), o.Computed = a, ((i) => {
+    var m, n, b, u;
+    function v(p) {
+      let c, s = null;
+      try {
+        s = S(null), c = p();
+      } finally {
+        S(s);
+      }
+      return c;
+    }
+    i.untrack = v;
+    function E(p) {
+      var c;
+      if (!(0, o.isComputed)(p) && !(0, o.isWatcher)(p))
+        throw new TypeError("Called introspectSources without a Computed or Watcher argument");
+      return ((c = p[f].producerNode) == null ? void 0 : c.map((s) => s.wrapper)) ?? [];
+    }
+    i.introspectSources = E;
+    function K(p) {
+      var c;
+      if (!(0, o.isComputed)(p) && !(0, o.isState)(p))
+        throw new TypeError("Called introspectSinks without a Signal argument");
+      return ((c = p[f].liveConsumerNode) == null ? void 0 : c.map((s) => s.wrapper)) ?? [];
+    }
+    i.introspectSinks = K;
+    function oo(p) {
+      if (!(0, o.isComputed)(p) && !(0, o.isState)(p))
+        throw new TypeError("Called hasSinks without a Signal argument");
+      const c = p[f].liveConsumerNode;
+      return c ? c.length > 0 : !1;
+    }
+    i.hasSinks = oo;
+    function to(p) {
+      if (!(0, o.isComputed)(p) && !(0, o.isWatcher)(p))
+        throw new TypeError("Called hasSources without a Computed or Watcher argument");
+      const c = p[f].producerNode;
+      return c ? c.length > 0 : !1;
+    }
+    i.hasSources = to;
+    class eo {
+      // When a (recursive) source of Watcher is written to, call this callback,
+      // if it hasn't already been called since the last `watch` call.
+      // No signals may be read or written during the notify.
+      constructor(c) {
+        I(this, n), I(this, b), $(this, m);
+        let s = Object.create(q);
+        s.wrapper = this, s.consumerMarkedDirty = c, s.consumerIsAlwaysLive = !0, s.consumerAllowSignalWrites = !1, s.producerNode = [], this[f] = s;
+      }
+      // Add these signals to the Watcher's set, and set the watcher to run its
+      // notify callback next time any signal in the set (or one of its dependencies) changes.
+      // Can be called with no arguments just to reset the "notified" state, so that
+      // the notify callback will be invoked again.
+      watch(...c) {
+        if (!(0, o.isWatcher)(this))
+          throw new TypeError("Called unwatch without Watcher receiver");
+        j(this, b, u).call(this, c);
+        const s = this[f];
+        s.dirty = !1;
+        const z = S(s);
+        for (const T of c)
+          A(T[f]);
+        S(z);
+      }
+      // Remove these signals from the watched set (e.g., for an effect which is disposed)
+      unwatch(...c) {
+        if (!(0, o.isWatcher)(this))
+          throw new TypeError("Called unwatch without Watcher receiver");
+        j(this, b, u).call(this, c);
+        const s = this[f];
+        N(s);
+        for (let z = s.producerNode.length - 1; z >= 0; z--)
+          if (c.includes(s.producerNode[z].wrapper)) {
+            D(s.producerNode[z], s.producerIndexOfThis[z]);
+            const T = s.producerNode.length - 1;
+            if (s.producerNode[z] = s.producerNode[T], s.producerIndexOfThis[z] = s.producerIndexOfThis[T], s.producerNode.length--, s.producerIndexOfThis.length--, s.nextProducerIndex--, z < s.producerNode.length) {
+              const lo = s.producerIndexOfThis[z], G = s.producerNode[z];
+              U(G), G.liveConsumerIndexOfThis[lo] = z;
+            }
+          }
+      }
+      // Returns the set of computeds in the Watcher's set which are still yet
+      // to be re-evaluated
+      getPending() {
+        if (!(0, o.isWatcher)(this))
+          throw new TypeError("Called getPending without Watcher receiver");
+        return this[f].producerNode.filter((s) => s.dirty).map((s) => s.wrapper);
+      }
+    }
+    m = f, n = /* @__PURE__ */ new WeakSet(), b = /* @__PURE__ */ new WeakSet(), u = function(p) {
+      for (const c of p)
+        if (!(0, o.isComputed)(c) && !(0, o.isState)(c))
+          throw new TypeError("Called watch/unwatch without a Computed or State argument");
+    }, o.isWatcher = (p) => M(n, p), i.Watcher = eo;
+    function ro() {
+      var p;
+      return (p = Eo()) == null ? void 0 : p.wrapper;
+    }
+    i.currentComputed = ro, i.watched = Symbol("watched"), i.unwatched = Symbol("unwatched");
+  })(o.subtle || (o.subtle = {}));
+})(_ || (_ = {}));
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+new FinalizationRegistry(({ watcher: o, signal: t }) => {
+  o.unwatch(t);
+});
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+_.State;
+_.Computed;
+const B = (o, t) => new _.State(o, t);
+class Bo {
+  constructor() {
+    this.slotContents = B([]), this.activeIndex = B(0);
+  }
+  get activeContent() {
+    return this.slotContents.get()[this.activeIndex.get()];
+  }
+  /** Replace the full list (e.g. after dropping or re-ordering). */
+  setContents(t) {
+    this.slotContents.set(t), this.activeIndex.get() >= t.length && this.activeIndex.set(t.length > 0 ? t.length - 1 : 0);
+  }
+  /** Change which item is considered active (e.g. user clicked in list). */
+  updateActive(t) {
+    t >= 0 && t < this.slotContents.get().length && this.activeIndex.set(t);
+  }
+  /** Update / overwrite a single content entry. */
+  updateContent(t, e = this.activeIndex.get()) {
+    if (e < 0 || e >= this.slotContents.get().length) return;
+    const r = [...this.slotContents.get()];
+    r[e] = structuredClone(t), this.slotContents.set(r);
+  }
+  /** Remove one content entry by index. */
+  removeContent(t) {
+    if (t < 0 || t >= this.slotContents.get().length) return;
+    const e = this.slotContents.get().filter((r, l) => l !== t);
+    this.slotContents.set(e), this.activeIndex.get() >= e.length && this.activeIndex.set(e.length > 0 ? e.length - 1 : 0);
+  }
+}
+const Ho = ":host{font-family:var(--luzmo-droppable-slot-font-family, var(--luzmo-font-family))}.droppable-slot[filled]{cursor:pointer;border:var(--luzmo-droppable-slot-filled-border-width, var(--droppable-slot-filled-border-width)) var(--luzmo-droppable-slot-filled-border-style, var(--droppable-slot-filled-border-style)) var(--luzmo-droppable-slot-filled-border-color, var(--droppable-slot-filled-border-color));background-color:var(--luzmo-droppable-slot-filled-background-color, var(--droppable-slot-filled-background-color));color:var(--luzmo-droppable-slot-filled-color, var(--droppable-slot-filled-color))}.droppable-slot{background-color:var(--luzmo-droppable-slot-background-color, var(--droppable-slot-background-color));color:var(--luzmo-droppable-slot-font-color, var(--droppable-slot-font-color));border:var(--luzmo-droppable-slot-border-width, var(--droppable-slot-border-width)) var(--luzmo-droppable-slot-border-style, var(--droppable-slot-border-style)) var(--luzmo-droppable-slot-border-color, var(--droppable-slot-border-color));display:flex;justify-content:space-between;align-items:center;padding-left:var(--luzmo-droppable-slot-edge-to-label, var(--droppable-slot-edge-to-label));gap:var(--luzmo-spacing-5);border-radius:var(--luzmo-border-radius);height:var(--luzmo-droppable-slot-height, var(--droppable-slot-height));cursor:move}:host([accept-drag]) .droppable-slot{background-color:var(--luzmo-droppable-slot-accept-drag-background-color, var(--droppable-slot-accept-drag-background-color));color:var(--luzmo-droppable-slot-accept-drag-font-color, var(--droppable-slot-accept-drag-font-color));border-color:var(--luzmo-droppable-slot-accept-drag-border-color, var(--droppable-slot-accept-drag-border-color))}:host([accept-drag]) .controls{background-color:var(--luzmo-droppable-slot-accept-drag-controls-background-color, var(--droppable-slot-accept-drag-controls-background-color));color:var(--luzmo-droppable-slot-accept-drag-controls-color, var(--droppable-slot-accept-drag-controls-color))}:host([disabled]) .droppable-slot{background-color:var(--luzmo-droppable-slot-background-color-disabled, var(--droppable-slot-background-color-disabled));color:var(--luzmo-droppable-slot-color-disabled, var(--droppable-slot-color-disabled));cursor:not-allowed}:host([disabled]) .drag-handle-icon{opacity:.25;font-size:12px}.drag-handle-icon{opacity:.5;font-size:12px}.droppable-slot-label{font-size:var(--luzmo-droppable-slot-label-font-size, var(--droppable-slot-label-font-size));flex-grow:1;margin-right:var(--luzmo-droppable-slot-text-to-controls, var(--droppable-slot-text-to-controls));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.controls{height:100%;display:flex;align-items:center;gap:var(--luzmo-droppable-slot-controls-gap, var(--droppable-slot-controls-gap));background-color:var(--luzmo-droppable-slot-controls-background-color, var(--droppable-slot-controls-background-color));color:var(--luzmo-droppable-slot-controls-color, var(--droppable-slot-controls-color));margin-right:var(--luzmo-droppable-slot-controls-to-edge, var(--droppable-slot-controls-to-edge));padding:0 var(--luzmo-droppable-slot-controls-horizontal-padding, var(--droppable-slot-controls-horizontal-padding))}.controls div{cursor:pointer;height:100%;display:flex;align-items:center;padding:0 var(--luzmo-droppable-slot-controls-control-horizontal-padding, var(--droppable-slot-controls-control-horizontal-padding))}luzmo-slot-menu[placement=bottom],luzmo-slot-menu[placement=top],luzmo-slot-menu[placement=bottom-start],luzmo-slot-menu[placement=top-start],luzmo-slot-menu[placement=bottom-end],luzmo-slot-menu[placement=top-end]{margin:var(--luzmo-droppable-slot-overlay-vertical-gap, var(--droppable-slot-overlay-vertical-gap)) 0}luzmo-slot-menu[placement=left],luzmo-slot-menu[placement=right],luzmo-slot-menu[placement=left-start],luzmo-slot-menu[placement=right-start],luzmo-slot-menu[placement=left-end],luzmo-slot-menu[placement=right-end]{margin:0 var(--luzmo-droppable-slot-overlay-horizontal-gap, var(--droppable-slot-overlay-horizontal-gap))}:host{--droppable-slot-border-width: var(--luzmo-border-width);--droppable-slot-border-style: dashed;--droppable-slot-border-color: var(--luzmo-border-color);--droppable-slot-background-color: transparent;--droppable-slot-accept-drag-background-color: var(--luzmo-positive-color);--droppable-slot-accept-drag-color: white;--droppable-slot-accept-drag-border-color: var(--luzmo-positive-color-down);--droppable-slot-accept-drag-font-color: white;--droppable-slot-font-color: var(--luzmo-font-color);--droppable-slot-controls-background-color: var(--luzmo-primary-down);--droppable-slot-controls-color: var(--luzmo-primary-inverse-color);--droppable-slot-accept-drag-controls-background-color: var( --luzmo-positive-color-down );--droppable-slot-accept-drag-controls-color: white;--droppable-slot-text-to-controls: var(--luzmo-spacing-3);--droppable-slot-controls-to-edge: 0;--droppable-slot-controls-gap: var(--luzmo-spacing-2);--droppable-slot-controls-horizontal-padding: var(--luzmo-spacing-2);--droppable-slot-controls-control-horizontal-padding: var(--luzmo-spacing-3);--droppable-slot-filled-background-color: var(--luzmo-primary);--droppable-slot-filled-color: var(--luzmo-primary-inverse-color);--droppable-slot-filled-border-width: var(--luzmo-border-width);--droppable-slot-filled-border-style: solid;--droppable-slot-filled-border-color: var(--luzmo-primary-down);--droppable-slot-height: var(--luzmo-component-height);--droppable-slot-label-font-size: var(--luzmo-font-size);--droppable-slot-icon-type-font-size: var(--luzmo-font-size);--droppable-slot-edge-to-label: var(--luzmo-spacing-5);--droppable-slot-color-disabled: var(--luzmo-color-disabled);--droppable-slot-background-color-disabled: var( --luzmo-background-color-disabled )}:host{--droppable-slot-height: var(--luzmo-component-height);--droppable-slot-label-font-size: var(--luzmo-font-size);--droppable-slot-icon-type-font-size: var(--luzmo-font-size);--droppable-slot-horizontal-padding: var(--luzmo-spacing-4);--droppable-slot-overlay-horizontal-gap: var(--luzmo-spacing-4);--droppable-slot-overlay-vertical-gap: var(--luzmo-spacing-4)}:host([size=s]){--droppable-slot-height: var(--luzmo-component-height-s);--droppable-slot-label-font-size: var(--luzmo-font-size-s);--droppable-slot-icon-type-font-size: var(--luzmo-font-size-s);--droppable-slot-horizontal-padding: var(--luzmo-spacing-4);--droppable-slot-overlay-horizontal-gap: var(--luzmo-spacing-4);--droppable-slot-overlay-vertical-gap: var(--luzmo-spacing-4)}:host([size=l]){--droppable-slot-height: var(--luzmo-component-height-l);--droppable-slot-label-font-size: var(--luzmo-font-size-l);--droppable-slot-icon-type-font-size: var(--luzmo-font-size-l);--droppable-slot-horizontal-padding: var(--luzmo-spacing-5);--droppable-slot-overlay-horizontal-gap: var(--luzmo-spacing-5);--droppable-slot-overlay-vertical-gap: var(--luzmo-spacing-5)}:host([size=xl]){--droppable-slot-height: var(--luzmo-component-height-xl);--droppable-slot-label-font-size: var(--luzmo-font-size-xl);--droppable-slot-icon-type-font-size: var(--luzmo-font-size-xl);--droppable-slot-horizontal-padding: var(--luzmo-spacing-5);--droppable-slot-overlay-horizontal-gap: var(--luzmo-spacing-5);--droppable-slot-overlay-vertical-gap: var(--luzmo-spacing-5)}:host{box-sizing:border-box}", H = {
+  Category: () => x("Category", { desc: "Category label" }),
+  Measure: () => x("Measure", { desc: "Measure label" }),
+  Legend: () => x("Legend", { desc: "Legend label" }),
+  "Y-Axis": () => x("Y-Axis", { desc: "Y-Axis label" }),
+  "X-Axis": () => x("X-Axis", { desc: "X-Axis label" }),
+  "Group by": () => x("Group by", { desc: "Group by label" })
+};
+var Yo = Object.defineProperty, Xo = Object.getOwnPropertyDescriptor, y = (o, t, e, r) => {
+  for (var l = r > 1 ? void 0 : r ? Xo(t, e) : t, d = o.length - 1, a; d >= 0; d--)
+    (a = o[d]) && (l = (r ? a(t, e, l) : a(l)) || l);
+  return r && l && Yo(t, e, l), l;
+};
+let g = class extends Co(yo, {
   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({
+    super(), this._loadSlotsConfig = new ho(this, {
+      task: async ([o]) => {
+        if (o && o !== this._itemTypeLoaded) {
+          const t = /* @__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"),
@@ -103,46 +627,49 @@ let a = class extends T(O, {
             "../../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) ?? {};
+          if (t[`../../item-definitions/${o}/${o}-slots.config.ts`]) {
+            const e = await t[`../../item-definitions/${o}/${o}-slots.config.ts`]();
+            this._slotsConfig = (e == null ? void 0 : e.default) ?? {};
           }
           return this._slotsConfig;
         }
       },
       args: () => [this.itemType, this.language]
-    }), this.slotConfiguration = {}, this.slotContents = [], this.language = "en", this.menu = "default", this.placement = "bottom-end", this.changedSlotContents = (t) => {
-      this.dispatchEvent(
+    }), this.slotConfiguration = {}, this.slotContents = [], this.language = "en", this.menu = "default", this.placement = "bottom-end", this._store = new Bo(), this._currentSlotContents = [], this.changedSlotContents = (o) => {
+      this._store.setContents(o), this.dispatchEvent(
         new CustomEvent("slot-contents-changed", {
           bubbles: !0,
           composed: !0,
           cancelable: !0,
           detail: {
-            slotContents: t
+            slotContents: o
           }
         })
       );
-    }, this._currentSlotContents = [];
+    }, new So(this, {
+      context: no,
+      initialValue: this._store
+    });
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this._cleanupDroppable();
   }
-  emptySlotContents(t) {
-    t.preventDefault(), t.stopPropagation(), this.slotContents = [], this.changedSlotContents([]);
+  emptySlotContents(o) {
+    o.preventDefault(), o.stopPropagation(), this.slotContents = [], this.changedSlotContents([]);
   }
-  willUpdate(t) {
-    t.has("slotContents") && (this._currentSlotContents = structuredClone(this.slotContents)), t.has("language") && this.language !== k() && ([...w].includes(this.language ?? "en") || this.language === "en") && L(this.language);
+  willUpdate(o) {
+    o.has("slotContents") && (this._currentSlotContents = structuredClone(this.slotContents), this._store.setContents(this.slotContents ?? [])), o.has("language") && this.language !== po() && ([...uo].includes(this.language ?? "en") || this.language === "en") && mo(this.language);
   }
-  firstUpdated(t) {
-    this._cleanupDroppable || (this._cleanupDroppable = C({
+  firstUpdated(o) {
+    this._cleanupDroppable || (this._cleanupDroppable = io({
       element: this,
-      onDrop: (o) => {
-        var i, s, c, d;
-        const l = { ...(i = o.source) == null ? void 0 : i.data }, e = {
-          ...(l == null ? void 0 : l.label) ?? { en: "Untitled" }
-        }, r = l == null ? void 0 : l.type;
-        if (r === "datetime" && !l.level && (l.level = l.lowestLevel ?? (l.subtype === "date" ? 5 : 9)), r === "datetime" && ((c = (s = o == null ? void 0 : o.source) == null ? void 0 : s.element) != null && c.hasAttribute("sublevel"))) {
-          const m = [
+      onDrop: (t) => {
+        var d, a, i, m;
+        const e = { ...(d = t.source) == null ? void 0 : d.data }, r = {
+          ...(e == null ? void 0 : e.label) ?? { en: "Untitled" }
+        }, l = e == null ? void 0 : e.type;
+        if (l === "datetime" && !e.level && (e.level = e.lowestLevel ?? (e.subtype === "date" ? 5 : 9)), l === "datetime" && ((i = (a = t == null ? void 0 : t.source) == null ? void 0 : a.element) != null && i.hasAttribute("sublevel"))) {
+          const n = [
             "(Yr)",
             "(Qtr)",
             "(Mth)",
@@ -152,21 +679,21 @@ let a = class extends T(O, {
             "(Min)",
             "(Sec)",
             "(Msec)"
-          ], u = (l == null ? void 0 : l.level) ?? 1, b = Object.keys(e);
-          for (const h of b)
-            e[h] = `${e[h]} ${m[u - 1]}`;
-          l.label = e;
+          ], b = (e == null ? void 0 : e.level) ?? 1, u = Object.keys(r);
+          for (const v of u)
+            r[v] = `${r[v]} ${n[b - 1]}`;
+          e.label = r;
         }
-        this.slotContents = (d = this.slotConfiguration) != null && d.canAcceptMultipleDataItems ? [...this.slotContents ?? [], l] : [l], this.removeAttribute("accept-drag"), this.changedSlotContents(this.slotContents);
+        this.slotContents = (m = this.slotConfiguration) != null && m.canAcceptMultipleDataItems ? [...this.slotContents ?? [], e] : [e], this.removeAttribute("accept-drag"), this.changedSlotContents(this.slotContents);
       },
-      canDrop: ({ source: o }) => {
-        var e, r, i, s, c, d, m, u, b, h, z;
+      canDrop: ({ source: t }) => {
+        var r, l, d, a, i, m, n, b, u, v, E;
         if (![
           "LUZMO-DRAGGABLE-DATA-ITEM-LEVEL",
           "LUZMO-DRAGGABLE-DATA-ITEM"
-        ].includes((e = o.element) == null ? void 0 : e.tagName) || !((r = this.slotConfiguration) != null && r.canAcceptFormula) && ((i = o == null ? void 0 : o.data) != null && i.formulaId))
+        ].includes((r = t.element) == null ? void 0 : r.tagName) || !((l = this.slotConfiguration) != null && l.canAcceptFormula) && ((d = t == null ? void 0 : t.data) != null && d.formulaId))
           return !1;
-        const l = ((c = (s = this.slotConfiguration) == null ? void 0 : s.acceptableDataItemTypes) == null ? void 0 : c.length) > 0 ? this.slotConfiguration.acceptableDataItemTypes : [
+        const e = ((i = (a = this.slotConfiguration) == null ? void 0 : a.acceptableDataItemTypes) == null ? void 0 : i.length) > 0 ? this.slotConfiguration.acceptableDataItemTypes : [
           "datetime",
           "hierarchy",
           "numeric",
@@ -174,8 +701,8 @@ let a = class extends T(O, {
           "array[numeric]",
           "array[hierarchy]"
         ];
-        return (d = o == null ? void 0 : o.data) != null && d.type && !l.includes((m = o == null ? void 0 : o.data) == null ? void 0 : m.type) ? !1 : !((u = o == null ? void 0 : o.data) != null && u.subtype && ((h = (b = this.slotConfiguration) == null ? void 0 : b.acceptableColumnSubtypes) == null ? void 0 : h.length) > 0 && !this.slotConfiguration.acceptableColumnSubtypes.includes(
-          (z = o == null ? void 0 : o.data) == null ? void 0 : z.subtype
+        return (m = t == null ? void 0 : t.data) != null && m.type && !e.includes((n = t == null ? void 0 : t.data) == null ? void 0 : n.type) ? !1 : !((b = t == null ? void 0 : t.data) != null && b.subtype && ((v = (u = this.slotConfiguration) == null ? void 0 : u.acceptableColumnSubtypes) == null ? void 0 : v.length) > 0 && !this.slotConfiguration.acceptableColumnSubtypes.includes(
+          (E = t == null ? void 0 : t.data) == null ? void 0 : E.subtype
         ));
       },
       getDropEffect: () => "move",
@@ -190,32 +717,32 @@ let a = class extends T(O, {
   updated() {
     this.createFullLabel();
   }
-  _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.createFullLabel(), this.changedSlotContents(this._currentSlotContents)) : (this.slotContents = t.detail.slotContents, this.changedSlotContents(this.slotContents));
+  _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.createFullLabel(), this.changedSlotContents(this._currentSlotContents)) : (this.slotContents = o.detail.slotContents, this.changedSlotContents(this.slotContents));
   }
   // we update the label outside the lit render method to not lose focus when typing in the display settings bc of rerender
   // we use a copy of slotContents '_currentSlotContents' to not trigger a rerender when the slotContents change from the slot-menu
   createFullLabel() {
-    var e, r, i, s, c, d, m, u, b;
-    let t = "";
-    const o = y[(e = this.slotConfiguration) == null ? void 0 : e.label] ? y[(r = this.slotConfiguration) == null ? void 0 : r.label]() : (i = this.slotConfiguration) == null ? void 0 : i.label;
-    ((s = this._currentSlotContents) == null ? void 0 : s.length) === 1 ? t = A((d = (c = this._currentSlotContents) == null ? void 0 : c[0]) == null ? void 0 : d.label, this.language) ?? "Untitled" : ((m = this._currentSlotContents) == null ? void 0 : m.length) > 1 && (t = `${this._currentSlotContents.length} items`);
-    let l = "";
-    this.label ? l = this.label : o && (l = o), l = l || "Untitled", ((u = this._currentSlotContents) == null ? void 0 : u.length) > 0 && (l += ((b = this._currentSlotContents) == null ? void 0 : b.length) > 1 ? `: ${this._currentSlotContents.length} items` : `: ${t}`), this._droppableSlotLabelElement && (this._droppableSlotLabelElement.textContent = l);
+    var r, l, d, a, i, m, n, b, u;
+    let o = "";
+    const t = H[(r = this.slotConfiguration) == null ? void 0 : r.label] ? H[(l = this.slotConfiguration) == null ? void 0 : l.label]() : (d = this.slotConfiguration) == null ? void 0 : d.label;
+    ((a = this._currentSlotContents) == null ? void 0 : a.length) === 1 ? o = bo((m = (i = this._currentSlotContents) == null ? void 0 : i[0]) == null ? void 0 : m.label, this.language) ?? "Untitled" : ((n = this._currentSlotContents) == null ? void 0 : n.length) > 1 && (o = `${this._currentSlotContents.length} items`);
+    let e = "";
+    this.label ? e = this.label : t && (e = t), e = e || "Untitled", ((b = this._currentSlotContents) == null ? void 0 : b.length) > 0 && (e += ((u = this._currentSlotContents) == null ? void 0 : u.length) > 1 ? `: ${this._currentSlotContents.length} items` : `: ${o}`), this._droppableSlotLabelElement && (this._droppableSlotLabelElement.textContent = e);
   }
   droppableSlotMarkup() {
-    var t, o, l, e;
-    return g`
+    var o, t, e, r;
+    return w`
       <div
         class="droppable-slot"
-        ?filled=${((t = this.slotContents) == null ? void 0 : t.length) > 0}
+        ?filled=${((o = this.slotContents) == null ? void 0 : o.length) > 0}
         id="trigger"
       >
         <div class="droppable-slot-label"></div>
-        ${((o = this.slotContents) == null ? void 0 : o.length) > 0 && !(this.hideConfiguration && this.hideDelete) ? g`<div class="controls">
-              ${this.hideConfiguration ? "" : g`<div>
-                    ${v($)}
+        ${((t = this.slotContents) == null ? void 0 : t.length) > 0 && !(this.hideConfiguration && this.hideDelete) ? w`<div class="controls">
+              ${this.hideConfiguration ? "" : w`<div>
+                    ${F(fo)}
                     <luzmo-tooltip
                       self-managed
                       placement="top"
@@ -224,8 +751,8 @@ let a = class extends T(O, {
                       edit
                     </luzmo-tooltip>
                   </div> `}
-              ${this.hideDelete ? "" : g`<div @click=${this.emptySlotContents}>
-                    ${v(D)}
+              ${this.hideDelete ? "" : w`<div @click=${this.emptySlotContents}>
+                    ${F(go)}
                     <luzmo-tooltip
                       self-managed
                       placement="top"
@@ -235,16 +762,16 @@ let a = class extends T(O, {
                     </luzmo-tooltip>
                   </div>`}
             </div>` : ""}
-        ${((l = this.slotContents) == null ? void 0 : l.length) > 0 ? g`<luzmo-overlay
+        ${((e = this.slotContents) == null ? void 0 : e.length) > 0 ? w`<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"
+                drag-boundary=${this.dragBoundary}
+                slot-type=${(r = this.slotConfiguration) == null ? void 0 : r.type}
+                variant=${this.menu === "draggable" ? "draggable" : "popup"}
                 .size=${this.size}
                 @slot-contents-changed=${this._onSlotMenuChanges}
               ></luzmo-slot-menu>
@@ -254,63 +781,66 @@ let a = class extends T(O, {
   }
   render() {
     return this._loadSlotsConfig.render({
-      pending: () => g`<p>Loading...</p>`,
-      complete: (t) => {
-        if (this.slotName && this.itemType && t) {
-          const o = t.find(
-            (l) => l.name === this.slotName
+      pending: () => w`<p>Loading...</p>`,
+      complete: (o) => {
+        if (this.slotName && this.itemType && o) {
+          const t = o.find(
+            (e) => e.name === this.slotName
           );
-          o && (this.slotConfiguration = o);
+          t && !this.slotConfiguration && (this.slotConfiguration = t);
         }
         return this.droppableSlotMarkup();
       },
-      error: (t) => g`
+      error: (o) => w`
         <div>
           Could not load droppable slot: '${this.slotName}' of chart
-          '${this.itemType}': ${t}.
+          '${this.itemType}': ${o}.
         </div>
       `
     });
   }
 };
-a.styles = E(U);
-n([
-  p({ type: String, reflect: !0, attribute: "item-type" })
-], a.prototype, "itemType", 2);
-n([
-  p({ type: String, reflect: !0, attribute: "slot-name" })
-], a.prototype, "slotName", 2);
-n([
-  p({ type: Object })
-], a.prototype, "slotConfiguration", 2);
-n([
-  p({ type: Object })
-], a.prototype, "slotContents", 2);
-n([
-  p({ type: String, reflect: !0 })
-], a.prototype, "label", 2);
-n([
-  p({ type: String, reflect: !0 })
-], a.prototype, "language", 2);
-n([
-  p({ type: String, reflect: !0 })
-], a.prototype, "menu", 2);
-n([
-  p({ type: String, reflect: !0 })
-], a.prototype, "placement", 2);
-n([
-  p({ type: Boolean, reflect: !0, attribute: "hide-delete" })
-], a.prototype, "hideDelete", 2);
-n([
-  p({ type: Boolean, reflect: !0, attribute: "hide-configuration" })
-], a.prototype, "hideConfiguration", 2);
-n([
-  M(".droppable-slot-label")
-], a.prototype, "_droppableSlotLabelElement", 2);
-a = n([
-  S()
-], a);
-customElements.get("luzmo-droppable-slot") || customElements.define("luzmo-droppable-slot", a);
+g.styles = vo(Ho);
+y([
+  C({ type: String, reflect: !0, attribute: "item-type" })
+], g.prototype, "itemType", 2);
+y([
+  C({ type: String, reflect: !0, attribute: "slot-name" })
+], g.prototype, "slotName", 2);
+y([
+  C({ type: Object })
+], g.prototype, "slotConfiguration", 2);
+y([
+  C({ type: Object })
+], g.prototype, "slotContents", 2);
+y([
+  C({ type: String, reflect: !0 })
+], g.prototype, "label", 2);
+y([
+  C({ type: String, reflect: !0 })
+], g.prototype, "language", 2);
+y([
+  C({ type: String, reflect: !0, attribute: "drag-boundary" })
+], g.prototype, "dragBoundary", 2);
+y([
+  C({ type: String, reflect: !0 })
+], g.prototype, "menu", 2);
+y([
+  C({ type: String, reflect: !0 })
+], g.prototype, "placement", 2);
+y([
+  C({ type: Boolean, reflect: !0, attribute: "hide-delete" })
+], g.prototype, "hideDelete", 2);
+y([
+  C({ type: Boolean, reflect: !0, attribute: "hide-configuration" })
+], g.prototype, "hideConfiguration", 2);
+y([
+  zo(".droppable-slot-label")
+], g.prototype, "_droppableSlotLabelElement", 2);
+g = y([
+  co()
+], g);
+customElements.get("luzmo-droppable-slot") || customElements.define("luzmo-droppable-slot", g);
 export {
-  a as LuzmoDroppableSlot
+  g as LuzmoDroppableSlot
 };