@luzmo/analytics-components-kit 1.0.1-alpha.51 → 1.0.1-alpha.53

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/components/display-settings/display-settings.d.ts +2 -0
  2. package/components/display-settings/index.cjs +1 -1
  3. package/components/display-settings/index.js +1 -1
  4. package/components/display-settings-datetime/display-settings-datetime.d.ts +1 -1
  5. package/components/display-settings-datetime/index.cjs +43 -56
  6. package/components/display-settings-datetime/index.js +81 -95
  7. package/components/display-settings-numeric/index.cjs +17 -17
  8. package/components/display-settings-numeric/index.js +80 -80
  9. package/components/draggable-data-item-level/index.cjs +1 -1
  10. package/components/draggable-data-item-level/index.js +3 -3
  11. package/components/droppable-slot/droppable-slot.d.ts +2 -0
  12. package/components/droppable-slot/index.cjs +4 -4
  13. package/components/droppable-slot/index.js +68 -62
  14. package/components/edit-item/index.cjs +2 -2
  15. package/components/edit-item/index.js +4 -4
  16. package/components/edit-option/index.cjs +1 -1
  17. package/components/edit-option/index.js +1 -1
  18. package/components/{en-GB-BtLbN8o_.js → en-GB-UzDYaNfY.js} +1 -1
  19. package/components/{en-GB-Dd11ROdW.cjs → en-GB-cN3S24Cg.cjs} +1 -1
  20. package/components/{formatter-CQDms6fU.js → formatter-CqU9_98M.js} +1 -0
  21. package/components/{formatter-DiJYkB6b.cjs → formatter-Lo9PMcxy.cjs} +1 -1
  22. package/components/{heat-map-options.config-DQya-lag.js → heat-map-options.config-BnLWe8jS.js} +16 -14
  23. package/components/heat-map-options.config-DVH-Bb5-.cjs +20 -0
  24. package/components/{index-CSfR7FMV.cjs → index-BYO1LMBt.cjs} +1 -1
  25. package/components/{index-BPVXrhaX.js → index-CShrqT1H.js} +3 -3
  26. package/components/index-D05oY5ND.cjs +178 -0
  27. package/components/{index-Ct7UvUif.js → index-DV63kOPg.js} +315 -274
  28. package/components/index.cjs +1 -1
  29. package/components/index.js +3 -3
  30. package/components/{marker-map-options.config-CYoq89Oz.js → marker-map-options.config-DPJ955tt.js} +1 -1
  31. package/components/{marker-map-options.config-_XFv5XWK.cjs → marker-map-options.config-_FYZzRwA.cjs} +1 -1
  32. package/components/slot-contents-picker/index.cjs +1 -1
  33. package/components/slot-contents-picker/index.js +1 -1
  34. package/components/slot-menu/index.cjs +8 -8
  35. package/components/slot-menu/index.js +120 -101
  36. package/components/slot-menu/slot-menu.d.ts +4 -0
  37. package/components/slot-menu-list/index.cjs +1 -1
  38. package/components/slot-menu-list/index.js +14 -12
  39. package/components/slot-menu-list/slot-menu-list.d.ts +1 -0
  40. package/components/{symbol-map-options.config-Bj-UuL9m.js → symbol-map-options.config-DdDA4aa7.js} +1 -1
  41. package/components/{symbol-map-options.config-sdPlHspI.cjs → symbol-map-options.config-m-lwLTtu.cjs} +1 -1
  42. package/components/utils.cjs +1 -1
  43. package/components/utils.js +1 -1
  44. package/custom-elements.json +16 -1
  45. package/package.json +1 -1
  46. package/components/heat-map-options.config-BQ-Afrbi.cjs +0 -20
  47. package/components/index-DAoFunRy.cjs +0 -174
package/components/slot-menu/index.js CHANGED
@@ -19,13 +19,13 @@
19
19
  * */
20
20
  import "../index-CskV_bXp.js";
21
21
  import { T, r as O, x as v, n as u } from "../property-DCzt3DR1.js";
22
- import { e as R, c as N, s as X } from "../index-Ct7UvUif.js";
23
- import { a8 as E, ae as Y, a7 as q, ag as K } from "../luzmo-icons-CVeTZ59u.js";
22
+ import { e as R, c as N, s as X } from "../index-DV63kOPg.js";
23
+ import { a8 as S, ae as Y, a7 as q, ag as H } from "../luzmo-icons-CVeTZ59u.js";
24
24
  import { d as x } from "../index-Cyo2hwg7.js";
25
- import { l as F } from "../localize-BX7q0S0M.js";
25
+ import { l as K } from "../localize-BX7q0S0M.js";
26
26
  import { r as I } from "../state-nDsQPund.js";
27
27
  import { e as A } from "../query-Ddbd72Um.js";
28
- import { e as H, i as j } from "../directive-CF_9GVrT.js";
28
+ import { e as F, i as j } from "../directive-CF_9GVrT.js";
29
29
  import { L as V } from "../focusable-BbymtxWI.js";
30
30
  import { S as W, E as G } from "../sized-mixin-BGzkX2g1.js";
31
31
  import "../slot-menu-list/index.js";
@@ -41,7 +41,7 @@ B();
41
41
  * Copyright 2018 Google LLC
42
42
  * SPDX-License-Identifier: BSD-3-Clause
43
43
  */
44
- const J = {}, Q = H(class extends j {
44
+ const J = {}, Q = F(class extends j {
45
45
  constructor() {
46
46
  super(...arguments), this.ot = J;
47
47
  }
@@ -50,7 +50,7 @@ const J = {}, Q = H(class extends j {
50
50
  }
51
51
  update(i, [o, e]) {
52
52
  if (Array.isArray(o)) {
53
- if (Array.isArray(this.ot) && this.ot.length === o.length && o.every((t, r) => t === this.ot[r])) return T;
53
+ if (Array.isArray(this.ot) && this.ot.length === o.length && o.every((t, l) => t === this.ot[l])) return T;
54
54
  } else if (this.ot === o) return T;
55
55
  return this.ot = Array.isArray(o) ? Array.from(o) : o, this.render(o, e);
56
56
  }
@@ -60,27 +60,27 @@ function Z({
60
60
  handle: o,
61
61
  boundary: e = document.documentElement,
62
62
  onDragStart: t,
63
- onDragEnd: r
63
+ onDragEnd: l
64
64
  }) {
65
65
  if (!i || !o)
66
66
  throw new Error("makeDraggable: element and handle are required");
67
67
  const s = i.ownerDocument ?? document;
68
- let a = -1, d = 0, f = 0, c = 0, h = 0, b = 0, $ = 0, w = 0, C = 0;
69
- const _ = (m) => {
68
+ let a = -1, d = 0, f = 0, c = 0, h = 0, b = 0, $ = 0, w = 0, _ = 0;
69
+ const C = (m) => {
70
70
  if (m.pointerId !== a) return;
71
71
  const g = m.clientX - d, y = m.clientY - f, p = (e ?? document.documentElement).getBoundingClientRect();
72
- let z = c + g, S = h + y;
72
+ let z = c + g, E = h + y;
73
73
  z = Math.min(
74
74
  Math.max(z, p.left),
75
75
  p.right - b
76
- ), S = Math.min(
77
- Math.max(S, p.top),
76
+ ), E = Math.min(
77
+ Math.max(E, p.top),
78
78
  p.bottom - $
79
79
  );
80
- const M = z - c, D = S - h, P = w + M, U = C + D;
80
+ const D = z - c, M = E - h, P = w + D, U = _ + M;
81
81
  i.style.transform = `translate3d(${P}px, ${U}px, 0)`;
82
82
  }, k = (m) => {
83
- m.pointerId === a && (s.removeEventListener("pointermove", _), s.removeEventListener("pointerup", k), a = -1, r == null || r());
83
+ m.pointerId === a && (s.removeEventListener("pointermove", C), s.removeEventListener("pointerup", k), a = -1, l == null || l());
84
84
  }, L = (m) => {
85
85
  var y;
86
86
  if (m.button !== 0) return;
@@ -91,24 +91,24 @@ function Z({
91
91
  const p = (y = s.defaultView) == null ? void 0 : y.getComputedStyle(i);
92
92
  if (p) {
93
93
  const z = new DOMMatrixReadOnly(p.transform);
94
- w = z.m41, C = z.m42;
94
+ w = z.m41, _ = z.m42;
95
95
  }
96
96
  } catch {
97
- w = 0, C = 0;
97
+ w = 0, _ = 0;
98
98
  }
99
- o.setPointerCapture(a), s.addEventListener("pointermove", _), s.addEventListener("pointerup", k), t == null || t();
99
+ o.setPointerCapture(a), s.addEventListener("pointermove", C), s.addEventListener("pointerup", k), t == null || t();
100
100
  };
101
101
  return o.addEventListener("pointerdown", L), () => {
102
- o.removeEventListener("pointerdown", L), s.removeEventListener("pointermove", _), s.removeEventListener("pointerup", k);
102
+ o.removeEventListener("pointerdown", L), s.removeEventListener("pointermove", C), s.removeEventListener("pointerup", k);
103
103
  };
104
104
  }
105
105
  const oo = ":host{font-family:var(--luzmo-slot-menu-font-family, var(--luzmo-font-family));font-size:var(--luzmo-slot-menu-font-size, var(--slot-menu-font-size));color:var(--luzmo-slot-menu-font-color, var(--luzmo-font-color));display:block;width:fit-content}luzmo-slot-menu-list{min-width:var(--luzmo-slot-menu-list-min-width, var(--slot-menu-list-min-width));max-width:var(--luzmo-slot-menu-list-max-width, var(--slot-menu-list-max-width));background-color:var(--luzmo-slot-menu-list-background-color, var(--slot-menu-list-background-color))}.slot-contents-container{position:relative;border:var(--luzmo-slot-menu-border-width, var(--luzmo-border-width)) solid var(--luzmo-slot-menu-border-color, var(--luzmo-border-color));border-radius:var(--luzmo-slot-menu-border-radius, var(--luzmo-border-radius));background:var(--luzmo-slot-menu-background-color, var(--luzmo-background-color));box-shadow:var(--luzmo-slot-menu-popup-shadow-horizontal, var(--slot-menu-popup-shadow-horizontal)) var(--luzmo-slot-menu-popup-shadow-vertical, var(--slot-menu-popup-shadow-vertical)) var(--luzmo-slot-menu-popup-shadow-blur, var(--slot-menu-popup-shadow-blur)) var(--luzmo-slot-menu-popup-shadow-color, var(--slot-menu-popup-shadow-color));border-top-left-radius:0}.slot-contents-container .inner-container{display:flex}.slot-contents-container .inner-container luzmo-display-settings{min-width:var(--luzmo-slot-menu-display-settings-min-width, var(--slot-menu-display-settings-min-width));padding:var(--luzmo-slot-menu-display-settings-vertical-padding, var(--slot-menu-display-settings-vertical-padding)) var(--luzmo-slot-menu-display-settings-horizontal-padding, var(--slot-menu-display-settings-horizontal-padding))}:host([variant=popup]) .slot-contents-container{overflow:hidden;border-top-left-radius:var(--luzmo-slot-menu-border-radius, var(--luzmo-border-radius));--slot-menu-popup-filter: drop-shadow( var( --luzmo-slot-menu-popup-shadow-horizontal, var(--slot-menu-popup-shadow-horizontal) ) var( --luzmo-slot-menu-popup-shadow-vertical, var(--slot-menu-popup-shadow-vertical) ) var( --luzmo-slot-menu-popup-shadow-blur, var(--slot-menu-popup-shadow-blur) ) var( --luzmo-slot-menu-popup-shadow-color, var(--slot-menu-popup-shadow-color) ) );filter:var(--luzmo-slot-menu-popup-filter, var(--slot-menu-popup-filter))}.slot-menu-top-menu{display:flex;align-items:center;border-radius:var(--luzmo-slot-menu-border-radius, var(--luzmo-border-radius));border-bottom-left-radius:0;border-bottom-right-radius:0;overflow:hidden;width:fit-content}.drag-handle{background-color:var(--luzmo-slot-menu-drag-handle-background-color, var(--luzmo-background-color-highlight));cursor:grab;width:fit-content;border:var(--luzmo-slot-menu-border-width, var(--luzmo-border-width)) solid var(--luzmo-slot-menu-border-color, var(--luzmo-background-color-highlight));font-size:var(--luzmo-slot-menu-drag-handle-size, var(--slot-menu-drag-handle-size));padding:var(--luzmo-slot-menu-drag-handle-vertical-padding, var(--slot-menu-drag-handle-vertical-padding)) var(--luzmo-slot-menu-drag-handle-horizontal-padding, var(--slot-menu-drag-handle-horizontal-padding))}.drag-handle:hover{background-color:var(--luzmo-slot-menu-drag-handle-background-color-hover, var(--luzmo-background-color-highlight-hover))}.slot-content-action{display:flex;flex:0 1 auto;max-width:var(--luzmo-slot-menu-top-menu-label-max-width, var(--slot-menu-top-menu-label-max-width));gap:var(--luzmo-slot-menu-label-to-icon-gap, var(--slot-menu-label-to-icon-gap));background-color:var(--luzmo-slot-menu-content-label-background-color, var(--luzmo-primary));color:var(--luzmo-slot-menu-content-label-color, var(--luzmo-primary-inverse-color));border:var(--luzmo-slot-menu-border-width, var(--luzmo-border-width)) solid var(--luzmo-slot-menu-content-label-border-color, var(--luzmo-primary));padding:var(--luzmo-slot-menu-drag-handle-vertical-padding, var(--slot-menu-drag-handle-vertical-padding)) var(--luzmo-slot-menu-drag-handle-horizontal-padding, var(--slot-menu-drag-handle-horizontal-padding))}.slot-content-action:hover{background-color:var(--luzmo-slot-menu-content-label-background-color-hover, var(--luzmo-primary-hover))}.slot-content-action:focus{background-color:var(--luzmo-slot-menu-content-label-background-color-focus, var(--luzmo-primary-focus))}.slot-content-action .slot-content-label{flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.slot-content-action .slot-content-remove{flex:0 0 auto;cursor:pointer}.close{position:absolute;right:1rem;cursor:pointer;top:calc(-2 * var(--luzmo-slot-menu-border-width, var(--luzmo-border-width)));background-color:var(--luzmo-slot-menu-close-button-background-color, var(--luzmo-background-color-highlight));font-size:var(--luzmo-slot-menu-close-button-size, var(--slot-menu-close-button-size));border:var(--luzmo-slot-menu-border-width, var(--luzmo-border-width)) solid var(--luzmo-slot-menu-border-color, var(--luzmo-border-color));border-radius:var(--luzmo-slot-menu-border-radius, var(--luzmo-border-radius));border-top-left-radius:0;border-top-right-radius:0;padding:var(--luzmo-slot-menu-close-button-vertical-padding, var(--slot-menu-close-button-vertical-padding)) var(--luzmo-slot-menu-close-button-horizontal-padding, var(--slot-menu-close-button-horizontal-padding))}.close:hover{background-color:var(--luzmo-slot-menu-close-button-background-color-hover, var(--luzmo-background-color-highlight-hover))}:host{--slot-menu-display-settings-min-width: 19rem;--slot-menu-min-height: calc(var(--luzmo-component-height) * 2);--slot-menu-font-size: var(--luzmo-font-size);--slot-menu-display-settings-horizontal-padding: var(--luzmo-spacing-5);--slot-menu-display-settings-vertical-padding: var(--luzmo-spacing-4);--slot-menu-top-menu-label-max-width: 12rem;--slot-menu-list-min-width: 8rem;--slot-menu-list-max-width: 12rem;--slot-menu-label-to-icon-gap: var(--luzmo-spacing-3);--slot-menu-drag-handle-size: var(--luzmo-font-size);--slot-menu-drag-handle-vertical-padding: var(--luzmo-spacing-2);--slot-menu-drag-handle-horizontal-padding: var(--luzmo-spacing-3);--slot-menu-close-button-size: var(--luzmo-font-size-s);--slot-menu-close-button-vertical-padding: var(--luzmo-spacing-2);--slot-menu-close-button-horizontal-padding: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--slot-menu-popup-shadow-horizontal: 0;--slot-menu-popup-shadow-vertical: 1px;--slot-menu-popup-shadow-blur: 4px;--slot-menu-popup-shadow-color: var(--luzmo-border-color);--slot-menu-popup-box-shadow: var(--slot-menu-popup-shadow-horizontal) var(--slot-menu-popup-shadow-vertical) var(--slot-menu-popup-shadow-blur) var(--slot-menu-popup-shadow-color)}:host([size=s]){--slot-menu-display-settings-min-width: 16rem;--slot-menu-min-height: calc(var(--luzmo-component-height-s) * 2);--slot-menu-font-size: var(--luzmo-font-size-s);--slot-menu-display-settings-horizontal-padding: var(--luzmo-spacing-4);--slot-menu-display-settings-vertical-padding: var(--luzmo-spacing-3);--slot-menu-top-menu-label-max-width: 10rem;--slot-menu-list-min-width: 6rem;--slot-menu-list-max-width: 10rem;--slot-menu-label-to-icon-gap: var(--luzmo-spacing-2);--slot-menu-drag-handle-size: var(--luzmo-font-size-s);--slot-menu-drag-handle-vertical-padding: var(--luzmo-spacing-2);--slot-menu-drag-handle-horizontal-padding: var(--luzmo-spacing-3);--slot-menu-close-button-size: var(--luzmo-font-size-xs);--slot-menu-close-button-vertical-padding: var(--luzmo-spacing-2);--slot-menu-close-button-horizontal-padding: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}:host([size=l]){--slot-menu-display-settings-min-width: 23rem;--slot-menu-min-height: calc(var(--luzmo-component-height-l) * 2);--slot-menu-font-size: var(--luzmo-font-size-l);--slot-menu-display-settings-horizontal-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--slot-menu-display-settings-vertical-padding: var(--luzmo-spacing-5);--slot-menu-top-menu-label-max-width: 14rem;--slot-menu-list-min-width: 9rem;--slot-menu-list-max-width: 14rem;--slot-menu-label-to-icon-gap: var(--luzmo-spacing-4);--slot-menu-drag-handle-size: var(--luzmo-font-size-l);--slot-menu-drag-handle-vertical-padding: var(--luzmo-spacing-3);--slot-menu-drag-handle-horizontal-padding: var(--luzmo-spacing-3);--slot-menu-close-button-size: var(--luzmo-font-size);--slot-menu-close-button-vertical-padding: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--slot-menu-close-button-horizontal-padding: var(--luzmo-spacing-3)}:host([size=xl]){--slot-menu-display-settings-min-width: 26rem;--slot-menu-min-height: calc(var(--luzmo-component-height-xl) * 2);--slot-menu-font-size: var(--luzmo-font-size-xl);--slot-menu-display-settings-horizontal-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-2) );--slot-menu-display-settings-vertical-padding: var(--luzmo-spacing-5);--slot-menu-top-menu-label-max-width: 16rem;--slot-menu-list-min-width: 10rem;--slot-menu-list-max-width: 16rem;--slot-menu-label-to-icon-gap: var(--luzmo-spacing-5);--slot-menu-drag-handle-size: var(--luzmo-font-size-xl);--slot-menu-drag-handle-vertical-padding: var(--luzmo-spacing-3);--slot-menu-drag-handle-horizontal-padding: var(--luzmo-spacing-4);--slot-menu-close-button-size: var(--luzmo-font-size-l);--slot-menu-close-button-vertical-padding: var(--luzmo-spacing-3);--slot-menu-close-button-horizontal-padding: var(--luzmo-spacing-3)}";
106
- var to = Object.defineProperty, n = (i, o, e, t) => {
107
- for (var r = void 0, s = i.length - 1, a; s >= 0; s--)
108
- (a = i[s]) && (r = a(o, e, r) || r);
109
- return r && to(o, e, r), r;
106
+ var to = Object.defineProperty, r = (i, o, e, t) => {
107
+ for (var l = void 0, s = i.length - 1, a; s >= 0; s--)
108
+ (a = i[s]) && (l = a(o, e, l) || l);
109
+ return l && to(o, e, l), l;
110
110
  };
111
- class l extends R(
111
+ class n extends R(
112
112
  W(V, {
113
113
  validSizes: Object.values(G)
114
114
  })
@@ -123,18 +123,33 @@ class l extends R(
123
123
  return this._slotContents[this.slotIndex ?? this._activeIndex] ?? {};
124
124
  }
125
125
  get _currentLabel() {
126
- return F(
126
+ return K(
127
127
  this._currentSlotContent.label,
128
128
  this.contentLanguage
129
129
  ) ?? "Untitled";
130
130
  }
131
131
  connectedCallback() {
132
132
  const o = {};
133
- this.apiUrl && (o.apiUrl = this.apiUrl), this.authKey && this.authToken && (o.authKey = this.authKey, o.authToken = this.authToken), x.configure(o), super.connectedCallback();
133
+ this.apiUrl && (o.apiUrl = this.apiUrl), this.authKey && this.authToken && (o.authKey = this.authKey, o.authToken = this.authToken), x.configure(o), super.connectedCallback(), this._attachDragHandle();
134
134
  }
135
135
  disconnectedCallback() {
136
136
  super.disconnectedCallback(), this._cleanupDrag && (this._cleanupDrag(), this._cleanupDrag = void 0);
137
137
  }
138
+ /**
139
+ * Helper to attach draggable behaviour to the top-level handle.
140
+ */
141
+ _attachDragHandle() {
142
+ if (this._cleanupDrag || this.variant !== "draggable" || this.noDrag)
143
+ return;
144
+ const o = this.renderRoot.querySelector(".drag-handle");
145
+ if (!o) return;
146
+ const e = this.dragBoundary ? document.querySelector(this.dragBoundary) : document.documentElement;
147
+ this._cleanupDrag = Z({
148
+ element: this,
149
+ handle: o,
150
+ boundary: e
151
+ });
152
+ }
138
153
  _sendChangeEvent() {
139
154
  this.dispatchEvent(
140
155
  new CustomEvent("slot-contents-changed", {
@@ -166,12 +181,16 @@ class l extends R(
166
181
  ])).has(o);
167
182
  }
168
183
  async willUpdate() {
169
- var e, t, r, s;
184
+ var e, t, l, s;
170
185
  const o = this.slotContents ?? ((e = this._store) == null ? void 0 : e.slotContents.get()) ?? [];
171
186
  if (o !== this._slotContents) {
172
187
  this._slotContents = structuredClone(o);
173
188
  const { set: a, column: d } = this._currentSlotContent;
174
- a && a !== this._lastFetchedDatasetId && (this._lastFetchedDatasetId = a, await x.fetchDatasetsRecursive([a]), this._linkedDatasetsIds = x.getLinkedDatasetsIds(a));
189
+ if (a && a !== this._lastFetchedDatasetId) {
190
+ if (this._lastFetchedDatasetId = a, await x.fetchDatasetsRecursive([a]), !this.isConnected)
191
+ return;
192
+ this._linkedDatasetsIds = x.getLinkedDatasetsIds(a);
193
+ }
175
194
  const f = x.getAvailableDatasets();
176
195
  this.measureColumns = f.map((c) => {
177
196
  var h;
@@ -182,7 +201,7 @@ class l extends R(
182
201
  (b) => b.type === "numeric" && b.id !== d
183
202
  )
184
203
  };
185
- }), ((t = this._store) == null ? void 0 : t.activeIndex.get()) !== this._activeIndex && ((r = this._store) == null || r.updateActive(this._activeIndex)), this.slotName === "measure" && (this._periodOverPeriodEnabled = ((s = this._store) == null ? void 0 : s.periodOverPeriodEnabled.get()) && this._currentSlotContent.subtype !== "duration" && !this.isArrayColumnType(this._currentSlotContent.type));
204
+ }), ((t = this._store) == null ? void 0 : t.activeIndex.get()) !== this._activeIndex && ((l = this._store) == null || l.updateActive(this._activeIndex)), this.slotName === "measure" && (this._periodOverPeriodEnabled = ((s = this._store) == null ? void 0 : s.periodOverPeriodEnabled.get()) && this._currentSlotContent.subtype !== "duration" && !this.isArrayColumnType(this._currentSlotContent.type));
186
205
  }
187
206
  }
188
207
  updated() {
@@ -194,14 +213,14 @@ class l extends R(
194
213
  this._slotContents = structuredClone(o.detail.slotContents);
195
214
  const e = o.detail.activeIndex;
196
215
  e !== this._activeIndex && (this._activeIndex = e, (a = this._store) == null || a.updateActive(e));
197
- const t = this._slotContents[this._activeIndex], r = (t == null ? void 0 : t.column) ?? (t == null ? void 0 : t.columnId), s = (t == null ? void 0 : t.set) ?? (t == null ? void 0 : t.datasetId);
198
- !r || !s || (this.dispatchEvent(
216
+ const t = this._slotContents[this._activeIndex], l = (t == null ? void 0 : t.column) ?? (t == null ? void 0 : t.columnId), s = (t == null ? void 0 : t.set) ?? (t == null ? void 0 : t.datasetId);
217
+ l && s && this.dispatchEvent(
199
218
  new CustomEvent("slot-menu-highlight", {
200
219
  bubbles: !0,
201
220
  composed: !0,
202
- detail: { columnId: r, securableId: s, level: (t == null ? void 0 : t.level) ?? 0 }
221
+ detail: { columnId: l, securableId: s, level: (t == null ? void 0 : t.level) ?? 0 }
203
222
  })
204
- ), this._slotContents.length <= 1 && this.requestUpdate(), (d = this._store) == null || d.setContents(this._slotContents, this.slotName), this._sendChangeEvent());
223
+ ), this._slotContents.length <= 1 && this.requestUpdate(), (d = this._store) == null || d.setContents(this._slotContents, this.slotName), this._sendChangeEvent();
205
224
  }
206
225
  _handleSlotContentChange(o) {
207
226
  var e;
@@ -216,8 +235,13 @@ class l extends R(
216
235
  removeSlotContent(o) {
217
236
  var e;
218
237
  this._slotContents = this._slotContents.filter(
219
- (t, r) => r !== o
220
- ), (e = this._store) == null || e.setContents(this._slotContents, this.slotName), this._sendChangeEvent(), this._sendCloseEvent(), this.requestUpdate();
238
+ (t, l) => l !== o
239
+ ), (e = this._store) == null || e.setContents(this._slotContents, this.slotName), this._slotContents.length === 0 && this.dispatchEvent(
240
+ new CustomEvent("slot-menu-inactive", {
241
+ bubbles: !0,
242
+ composed: !0
243
+ })
244
+ ), this._sendChangeEvent(), this._sendCloseEvent(), this.requestUpdate();
221
245
  }
222
246
  close() {
223
247
  this._sendCloseEvent();
@@ -226,44 +250,51 @@ class l extends R(
226
250
  this.removeSlotContent(this.slotIndex ?? this._activeIndex);
227
251
  }
228
252
  render() {
229
- var o, e;
253
+ var e, t, l;
254
+ const o = `${this.slotType}-${((e = this._currentSlotContent) == null ? void 0 : e.type) ?? ""}`;
230
255
  return v`<div class="slot-menu-top-menu">
231
- ${this.variant === "draggable" ? v`<div class="drag-handle">${E(Y)}</div>` : ""}
256
+ ${this.variant === "draggable" ? v`<div class="drag-handle">${S(Y)}</div>` : ""}
232
257
  ${this._slotContents && this._slotContents.length === 1 && this.variant !== "popup" ? v` <div class="slot-content-action">
233
258
  <div class="slot-content-label">${this._currentLabel}</div>
234
259
  <div
235
260
  class="slot-content-remove"
236
261
  @click=${this.removeSlotContent.bind(this, 0)}
237
262
  >
238
- ${E(q)}
263
+ ${S(q)}
239
264
  </div>
240
265
  </div>` : ""}
241
266
  </div>
242
267
  <div
243
- class="slot-contents-container ${((o = this._slotContents) == null ? void 0 : o.length) > 1 ? "multiple" : ""}"
268
+ class="slot-contents-container ${((t = this._slotContents) == null ? void 0 : t.length) > 1 ? "multiple" : ""}"
244
269
  >
245
270
  ${this.variant === "popup" ? "" : v`<div class="close" @click=${this.close}>
246
- ${E(K)}
271
+ ${S(H)}
247
272
  </div>`}
248
273
  <div class="inner-container">
249
- ${((e = this._slotContents) == null ? void 0 : e.length) > 1 && typeof this.slotIndex != "number" ? v`<luzmo-slot-menu-list
274
+ ${((l = this._slotContents) == null ? void 0 : l.length) > 1 && typeof this.slotIndex != "number" ? v`<luzmo-slot-menu-list
250
275
  .slotContents=${this._slotContents}
251
276
  .contentLanguage=${this.contentLanguage}
252
277
  .activeIndex=${this.slotIndex ?? this._activeIndex}
253
278
  @slot-list-changed=${this._handleSlotListChange}
254
279
  ></luzmo-slot-menu-list>` : ""}
255
280
  ${Q(
256
- [this.variant, this.slotType, this.language, this.contentLanguage],
281
+ [
282
+ this.variant,
283
+ this.language,
284
+ this.contentLanguage,
285
+ this._periodOverPeriodEnabled,
286
+ o
287
+ ],
257
288
  () => {
258
- var t;
289
+ var s;
259
290
  return v`<luzmo-display-settings
260
291
  .size=${this.size}
261
292
  .language=${this.language}
262
293
  .contentLanguage=${this.contentLanguage}
263
- .slotContent=${this._currentSlotContent}
264
294
  .slotType=${this.slotType}
265
295
  .measureColumns=${this.measureColumns}
266
- .showRemoveButton=${this.variant === "popup" && (typeof this.slotIndex == "number" || ((t = this._slotContents) == null ? void 0 : t.length) === 1)}
296
+ .showRemoveButton=${this.variant === "popup" && (typeof this.slotIndex == "number" || ((s = this._slotContents) == null ? void 0 : s.length) === 1)}
297
+ .slotContent=${this._currentSlotContent}
267
298
  @slot-content-changed=${this._handleSlotContentChange}
268
299
  @remove-slot-content=${this._removeActiveSlotContent}
269
300
  ></luzmo-display-settings>`;
@@ -273,19 +304,7 @@ class l extends R(
273
304
  </div>`;
274
305
  }
275
306
  firstUpdated() {
276
- if (this.variant === "draggable" && !this.noDrag) {
277
- const o = this.renderRoot.querySelector(
278
- ".drag-handle"
279
- );
280
- if (o) {
281
- const e = this.dragBoundary ? document.querySelector(this.dragBoundary) : document.documentElement;
282
- this._cleanupDrag = Z({
283
- element: this,
284
- handle: o,
285
- boundary: e
286
- });
287
- }
288
- }
307
+ this._attachDragHandle();
289
308
  }
290
309
  /**
291
310
  * Reset the menu position to its original location
@@ -294,70 +313,70 @@ class l extends R(
294
313
  this.style.transform = "";
295
314
  }
296
315
  }
297
- n([
316
+ r([
298
317
  u({ type: String, reflect: !0 })
299
- ], l.prototype, "language");
300
- n([
318
+ ], n.prototype, "language");
319
+ r([
301
320
  u({ type: String, attribute: "content-language", reflect: !0 })
302
- ], l.prototype, "contentLanguage");
303
- n([
321
+ ], n.prototype, "contentLanguage");
322
+ r([
304
323
  u({ type: String, attribute: "slot-type", reflect: !0 })
305
- ], l.prototype, "slotType");
306
- n([
324
+ ], n.prototype, "slotType");
325
+ r([
307
326
  u({ type: String, attribute: "slot-name", reflect: !0 })
308
- ], l.prototype, "slotName");
309
- n([
327
+ ], n.prototype, "slotName");
328
+ r([
310
329
  u({ type: String, attribute: "item-type", reflect: !0 })
311
- ], l.prototype, "itemType");
312
- n([
330
+ ], n.prototype, "itemType");
331
+ r([
313
332
  u({ type: Boolean, attribute: "no-drag", reflect: !0 })
314
- ], l.prototype, "noDrag");
315
- n([
333
+ ], n.prototype, "noDrag");
334
+ r([
316
335
  u({ type: Boolean, attribute: "no-close", reflect: !0 })
317
- ], l.prototype, "noClose");
318
- n([
336
+ ], n.prototype, "noClose");
337
+ r([
319
338
  u({ type: String, reflect: !0 })
320
- ], l.prototype, "variant");
321
- n([
339
+ ], n.prototype, "variant");
340
+ r([
322
341
  u({ type: Boolean, attribute: "no-top-menu-label", reflect: !0 })
323
- ], l.prototype, "noTopMenuLabel");
324
- n([
342
+ ], n.prototype, "noTopMenuLabel");
343
+ r([
325
344
  N({ context: X, subscribe: !0 })
326
- ], l.prototype, "_store");
327
- n([
345
+ ], n.prototype, "_store");
346
+ r([
328
347
  u({ type: String, attribute: "drag-boundary", reflect: !1 })
329
- ], l.prototype, "dragBoundary");
330
- n([
348
+ ], n.prototype, "dragBoundary");
349
+ r([
331
350
  u({ type: Array, reflect: !1, attribute: "slot-contents" })
332
- ], l.prototype, "slotContents");
333
- n([
351
+ ], n.prototype, "slotContents");
352
+ r([
334
353
  I()
335
- ], l.prototype, "_periodOverPeriodEnabled");
336
- n([
354
+ ], n.prototype, "_periodOverPeriodEnabled");
355
+ r([
337
356
  I()
338
- ], l.prototype, "measureColumns");
339
- n([
357
+ ], n.prototype, "measureColumns");
358
+ r([
340
359
  u({ type: Number, reflect: !1, attribute: "slot-index" })
341
- ], l.prototype, "slotIndex");
342
- n([
360
+ ], n.prototype, "slotIndex");
361
+ r([
343
362
  A("luzmo-display-settings")
344
- ], l.prototype, "displaySettingsElement");
345
- n([
363
+ ], n.prototype, "displaySettingsElement");
364
+ r([
346
365
  A("luzmo-slot-menu-list")
347
- ], l.prototype, "slotMenuListElement");
348
- n([
366
+ ], n.prototype, "slotMenuListElement");
367
+ r([
349
368
  u({ type: String, attribute: "api-url", reflect: !0 })
350
- ], l.prototype, "apiUrl");
351
- n([
369
+ ], n.prototype, "apiUrl");
370
+ r([
352
371
  u({ type: String, attribute: "auth-key", reflect: !0 })
353
- ], l.prototype, "authKey");
354
- n([
372
+ ], n.prototype, "authKey");
373
+ r([
355
374
  u({ type: String, attribute: "auth-token", reflect: !0 })
356
- ], l.prototype, "authToken");
357
- n([
375
+ ], n.prototype, "authToken");
376
+ r([
358
377
  I()
359
- ], l.prototype, "_slotContents");
360
- customElements.get("luzmo-slot-menu") || customElements.define("luzmo-slot-menu", l);
378
+ ], n.prototype, "_slotContents");
379
+ customElements.get("luzmo-slot-menu") || customElements.define("luzmo-slot-menu", n);
361
380
  export {
362
- l as LuzmoSlotMenu
381
+ n as LuzmoSlotMenu
363
382
  };
package/components/slot-menu/slot-menu.d.ts CHANGED
@@ -81,6 +81,10 @@ export declare class LuzmoSlotMenu extends LuzmoSlotMenu_base {
81
81
  private get _currentLabel();
82
82
  connectedCallback(): void;
83
83
  disconnectedCallback(): void;
84
+ /**
85
+ * Helper to attach draggable behaviour to the top-level handle.
86
+ */
87
+ private _attachDragHandle;
84
88
  private _sendChangeEvent;
85
89
  private _sendCloseEvent;
86
90
  private isArrayColumnType;
package/components/slot-menu-list/index.cjs CHANGED
@@ -17,7 +17,7 @@
17
17
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
18
18
  * SOFTWARE.
19
19
  * */
20
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("../property-Cu4Q1hS4.cjs"),v=require("../get-css-variable-DLiZYZEi.cjs"),C=require("../luzmo-icons-DonyjSXg.cjs"),_=require("../localize-r7ALOUy_.cjs"),P=require("../query-all-CR2wWKRD.cjs"),j=require("../focusable-DAGGGYyz.cjs"),k=require("../sized-mixin-j_7aJM4b.cjs");var D={large:700};function F(i){i.animate([{backgroundColor:"var(--ds-background-selected, #E9F2FF)"},{}],{duration:D.large,easing:"cubic-bezier(0.25, 0.1, 0.25, 1.0)",iterations:1})}function w(i,t){var e=Object.keys(i);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(i);t&&(o=o.filter(function(s){return Object.getOwnPropertyDescriptor(i,s).enumerable})),e.push.apply(e,o)}return e}function S(i){for(var t=1;t<arguments.length;t++){var e=arguments[t]!=null?arguments[t]:{};t%2?w(Object(e),!0).forEach(function(o){v._defineProperty(i,o,e[o])}):Object.getOwnPropertyDescriptors?Object.defineProperties(i,Object.getOwnPropertyDescriptors(e)):w(Object(e)).forEach(function(o){Object.defineProperty(i,o,Object.getOwnPropertyDescriptor(e,o))})}return i}var L={top:function(t,e){return Math.abs(e.y-t.top)},right:function(t,e){return Math.abs(t.right-e.x)},bottom:function(t,e){return Math.abs(t.bottom-e.y)},left:function(t,e){return Math.abs(e.x-t.left)}},I=Symbol("closestEdge");function $(i,t){var e,o,s=t.element,u=t.input,n=t.allowedEdges,l={x:u.clientX,y:u.clientY},r=s.getBoundingClientRect(),a=n.map(function(c){return{edge:c,value:L[c](r,l)}}),d=(e=(o=a.sort(function(c,b){return c.value-b.value})[0])===null||o===void 0?void 0:o.edge)!==null&&e!==void 0?e:null;return S(S({},i),{},v._defineProperty({},I,d))}function E(i){var t;return(t=i[I])!==null&&t!==void 0?t:null}const M=':host{font-family:var(--luzmo-slot-menu-list-font-family, var(--luzmo-font-family));font-size:var(--luzmo-slot-menu-list-font-size, var(--slot-menu-list-font-size));color:var(--luzmo-slot-menu-listfont-color, var(--luzmo-font-color))}:host{margin:0;padding:0;list-style:none;border-right:var(--luzmo-slot-menu-list-border-right-width, var(--luzmo-border-width)) solid var(--luzmo-slot-menu-list-border-right-color, var(--luzmo-border-color))}:host li{position:relative;cursor:pointer}:host li:hover{background-color:var(--luzmo-slot-menu-list-background-color-hover, var(--slot-menu-list-background-color-hover))}:host .active{background-color:var(--luzmo-slot-menu-list-active-background-color, var(--slot-menu-list-active-background-color));color:var(--luzmo-slot-menu-list-active-color, var(--slot-menu-list-active-color))}:host .active:hover{background-color:var(--luzmo-slot-menu-list-active-background-color-hover, var(--slot-menu-list-active-background-color-hover))}.drop-indicator{position:absolute;left:0;right:0;height:var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height));background-color:var(--luzmo-slot-menu-list-drop-indicator-color, var(--slot-menu-list-drop-indicator-color))}.drop-indicator:before{content:"";display:block;width:100%;border:var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height)) solid var(--luzmo-slot-menu-list-drop-indicator-color, var(--slot-menu-list-drop-indicator-color));border-radius:50%;position:absolute;background:var(--luzmo-slot-menu-list-drop-indicator-background, var(--luzmo-background-color));left:calc(-.5 * (var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size)) + var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height))));top:calc(-.5 * (var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size)) + var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height))));height:var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size));width:var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size))}.drop-indicator[data-edge=top]{top:calc(-.5 * var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height)))}.drop-indicator[data-edge=bottom]{bottom:calc(-.5 * var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height)))}.draggable-slot-content{display:flex;justify-content:space-between;gap:var(--luzmo-slot-menu-label-to-icon-gap, var(--slot-menu-label-to-icon-gap));align-items:center}.draggable-slot-content .draggable-slot-content-label,.draggable-slot-content .draggable-slot-content-remove{padding-block-start:var(--luzmo-slot-menu-list-item-vertical-padding, var(--slot-menu-list-item-vertical-padding));padding-block-end:var(--luzmo-slot-menu-list-item-vertical-padding, var(--slot-menu-list-item-vertical-padding))}.draggable-slot-content .draggable-slot-content-label{padding-inline-start:var(--luzmo-slot-menu-list-item-horizontal-padding, var(--slot-menu-list-item-horizontal-padding));flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.draggable-slot-content .draggable-slot-content-remove{padding-inline-end:var(--luzmo-slot-menu-list-item-horizontal-padding, var(--slot-menu-list-item-horizontal-padding));flex:0 0 auto}:host{--slot-menu-list-active-background-color: var(--luzmo-primary);--slot-menu-list-active-background-color-hover: var(--luzmo-primary-hover);--slot-menu-list-active-color: var(--luzmo-primary-inverse-color);--slot-menu-list-background-color-hover: var(--luzmo-background-color-hover);--slot-menu-list-drop-indicator-color: var(--luzmo-font-color-down);--slot-menu-list-drop-indicator-height: 2px;--slot-menu-list-drop-indicator-circle-size: 4px}:host{--slot-menu-display-settings-min-width: 19rem;--slot-menu-min-height: calc(var(--luzmo-component-height) * 2);--slot-menu-font-size: var(--luzmo-font-size);--slot-menu-list-item-horizontal-padding: var(--luzmo-spacing-4);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-3);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-3)}:host([size=s]){--slot-menu-display-settings-min-width: 16rem;--slot-menu-min-height: calc(var(--luzmo-component-height-s) * 2);--slot-menu-font-size: var(--luzmo-font-size-s);--slot-menu-list-item-horizontal-padding: var(--luzmo-spacing-3);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-3);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-2)}:host([size=l]){--slot-menu-display-settings-min-width: 23rem;--slot-menu-min-height: calc(var(--luzmo-component-height-l) * 2);--slot-menu-font-size: var(--luzmo-font-size-l);--slot-menu-list-item-horizontal-padding: var(--luzmo-spacing-5);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-3);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-4)}:host([size=xl]){--slot-menu-display-settings-min-width: 26rem;--slot-menu-min-height: calc(var(--luzmo-component-height-xl) * 2);--slot-menu-font-size: var(--luzmo-font-size-xl);--slot-menu-list-item-horizontal-padding: var(--luzmo-spacing-5);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-4);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-5)}';var q=Object.defineProperty,f=(i,t,e,o)=>{for(var s=void 0,u=i.length-1,n;u>=0;u--)(n=i[u])&&(s=n(t,e,s)||s);return s&&q(t,e,s),s};class h extends k.SizedMixin(j.LuzmoElement,{validSizes:Object.values(k.ElementSizes)}){constructor(){super(...arguments),this.language="en",this.contentLanguage="en",this.slotContents=[],this.activeIndex=0,this._sendChangeEvent=()=>{this.dispatchEvent(new CustomEvent("slot-list-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{slotContents:structuredClone(this.slotContents),activeIndex:this.activeIndex}}))},this._cleanupFns=[],this._attachAll=()=>{[...this._draggableSlotContentElements].forEach(t=>{const e=this._sendChangeEvent.bind(this),o=this,s=v.draggable({element:t,onGenerateDragPreview({nativeSetDragImage:n}){v.setCustomNativeDragPreview({nativeSetDragImage:n,render({container:l}){var d;const r=document.createElement("div");r.classList.add("drag-preview");const a={};[["borderColor","--luzmo-slot-menu-list-border-color","--luzmo-border-color"],["backgroundColor","--luzmo-slot-menu-list-background-color","--luzmo-background-color"],["color","--luzmo-slot-menu-list-font-color","--slot-menu-list-font-color"],["fontSize","--luzmo-slot-menu-list-font-size","--slot-menu-list-font-size"],["horizontalPadding","--luzmo-slot-menu-list-item-horizontal-padding","--slot-menu-list-item-horizontal-padding"],["verticalPadding","--luzmo-slot-menu-list-item-vertical-padding","--slot-menu-list-item-vertical-padding"],["borderRadius","--luzmo-slot-menu-list-border-radius","--luzmo-border-radius"],["fontFamily","--luzmo-slot-menu-list-font-family","--luzmo-font-family"]].forEach(([c,b,y])=>{const m=v.getCssVariableValue(t,b)||v.getCssVariableValue(t,y);a[c]=m}),r.textContent=((d=t.querySelector("[data-task-content]"))==null?void 0:d.textContent)??t.textContent,Object.assign(r.style,{border:`1px solid ${a.borderColor}`,backgroundColor:a.backgroundColor,borderRadius:a.borderRadius,fontFamily:a.fontFamily,fontSize:a.fontSize,color:a.color,paddingInline:`${a.horizontalPadding}`,paddingBlock:`${a.verticalPadding}`}),l.append(r)}})},getInitialData(){var r;const n=t.parentElement;let l=0;return n&&(l=[...((r=n.parentElement)==null?void 0:r.children)??[]].indexOf(n)),{index:l}},onDragStart(){t.style.opacity="0.5"},onDrop(){t.style.opacity="1"}});this._cleanupFns.push(s);const u=v.dropTargetForElements({element:t,canDrop({source:n}){var l;return n.element===t?!1:(l=n==null?void 0:n.element)==null?void 0:l.classList.contains("draggable-slot-content")},getData(n){return $({},{element:t,input:n.input,allowedEdges:["top","bottom"]})},getIsSticky(){return!0},onDragEnter({self:n}){const l=E(n.data);if(!l)return;const r=document.createElement("div");r.classList.add("drop-indicator"),r.dataset.edge=l,t.after(r)},onDrag({self:n}){var a,d,c;const l=E(n.data);if(!l){(a=t.nextElementSibling)==null||a.remove();return}if(((d=t.nextElementSibling)==null?void 0:d.getAttribute("data-edge"))===l)return;(c=t.nextElementSibling)==null||c.remove();const r=document.createElement("div");r.classList.add("drop-indicator"),r.dataset.edge=l,t.after(r)},onDragLeave(){var n;(n=t.nextElementSibling)==null||n.remove()},onDrop({self:n,source:l}){var d,c,b,y;(d=t.nextElementSibling)==null||d.remove();const r=E(n.data),a=n.element.parentElement;if(typeof l.data.index=="number"&&a){let m=[...((c=a.parentElement)==null?void 0:c.children)??[]].indexOf(a);r==="bottom"&&l.data.index>=m&&m<(((y=(b=a==null?void 0:a.parentElement)==null?void 0:b.children)==null?void 0:y.length)??0)-1?m+=1:r==="top"&&m>l.data.index&&(m-=1);const g=o.activeIndex,z=l.data.index,x=m,O=o.slotContents[z];o.slotContents.splice(z,1),o.slotContents.splice(x,0,O),z===g?o.activeIndex=x:z<g&&x>=g?o.activeIndex=g-1:z>g&&x<=g&&(o.activeIndex=g+1)}r&&(F(l.element),o.requestUpdate(),e())}});this._cleanupFns.push(u)})},this._detachAll=()=>{this._cleanupFns.forEach(t=>t()),this._cleanupFns=[]}}static get styles(){return[p.r(M)]}willUpdate(){this._detachAll()}updated(){this._attachAll()}setActiveIndex(t){this.activeIndex=t,this._sendChangeEvent()}removeSlotContent(t){this.slotContents=this.slotContents.filter((e,o)=>o!==t),this.activeIndex===t?this.activeIndex=t:this.slotContents.length>0&&this.activeIndex>t&&this.activeIndex--,this._sendChangeEvent()}render(){const t=this.slotContents.map((e,o)=>{const s=_.localize(e.label,this.contentLanguage);return p.x`<li class=${o===this.activeIndex?"active":""}>
20
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("../property-Cu4Q1hS4.cjs"),v=require("../get-css-variable-DLiZYZEi.cjs"),C=require("../luzmo-icons-DonyjSXg.cjs"),I=require("../localize-r7ALOUy_.cjs"),P=require("../query-all-CR2wWKRD.cjs"),j=require("../focusable-DAGGGYyz.cjs"),k=require("../sized-mixin-j_7aJM4b.cjs");var D={large:700};function F(i){i.animate([{backgroundColor:"var(--ds-background-selected, #E9F2FF)"},{}],{duration:D.large,easing:"cubic-bezier(0.25, 0.1, 0.25, 1.0)",iterations:1})}function w(i,t){var e=Object.keys(i);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(i);t&&(o=o.filter(function(s){return Object.getOwnPropertyDescriptor(i,s).enumerable})),e.push.apply(e,o)}return e}function S(i){for(var t=1;t<arguments.length;t++){var e=arguments[t]!=null?arguments[t]:{};t%2?w(Object(e),!0).forEach(function(o){v._defineProperty(i,o,e[o])}):Object.getOwnPropertyDescriptors?Object.defineProperties(i,Object.getOwnPropertyDescriptors(e)):w(Object(e)).forEach(function(o){Object.defineProperty(i,o,Object.getOwnPropertyDescriptor(e,o))})}return i}var L={top:function(t,e){return Math.abs(e.y-t.top)},right:function(t,e){return Math.abs(t.right-e.x)},bottom:function(t,e){return Math.abs(t.bottom-e.y)},left:function(t,e){return Math.abs(e.x-t.left)}},_=Symbol("closestEdge");function $(i,t){var e,o,s=t.element,u=t.input,n=t.allowedEdges,l={x:u.clientX,y:u.clientY},r=s.getBoundingClientRect(),a=n.map(function(c){return{edge:c,value:L[c](r,l)}}),d=(e=(o=a.sort(function(c,b){return c.value-b.value})[0])===null||o===void 0?void 0:o.edge)!==null&&e!==void 0?e:null;return S(S({},i),{},v._defineProperty({},_,d))}function E(i){var t;return(t=i[_])!==null&&t!==void 0?t:null}const M=':host{font-family:var(--luzmo-slot-menu-list-font-family, var(--luzmo-font-family));font-size:var(--luzmo-slot-menu-list-font-size, var(--slot-menu-list-font-size));color:var(--luzmo-slot-menu-listfont-color, var(--luzmo-font-color))}:host{margin:0;padding:0;list-style:none;border-right:var(--luzmo-slot-menu-list-border-right-width, var(--luzmo-border-width)) solid var(--luzmo-slot-menu-list-border-right-color, var(--luzmo-border-color))}:host li{position:relative;cursor:pointer}:host li:hover{background-color:var(--luzmo-slot-menu-list-background-color-hover, var(--slot-menu-list-background-color-hover))}:host .active{background-color:var(--luzmo-slot-menu-list-active-background-color, var(--slot-menu-list-active-background-color));color:var(--luzmo-slot-menu-list-active-color, var(--slot-menu-list-active-color))}:host .active:hover{background-color:var(--luzmo-slot-menu-list-active-background-color-hover, var(--slot-menu-list-active-background-color-hover))}.drop-indicator{position:absolute;left:0;right:0;height:var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height));background-color:var(--luzmo-slot-menu-list-drop-indicator-color, var(--slot-menu-list-drop-indicator-color))}.drop-indicator:before{content:"";display:block;width:100%;border:var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height)) solid var(--luzmo-slot-menu-list-drop-indicator-color, var(--slot-menu-list-drop-indicator-color));border-radius:50%;position:absolute;background:var(--luzmo-slot-menu-list-drop-indicator-background, var(--luzmo-background-color));left:calc(-.5 * (var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size)) + var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height))));top:calc(-.5 * (var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size)) + var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height))));height:var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size));width:var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size))}.drop-indicator[data-edge=top]{top:calc(-.5 * var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height)))}.drop-indicator[data-edge=bottom]{bottom:calc(-.5 * var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height)))}.draggable-slot-content{display:flex;justify-content:space-between;gap:var(--luzmo-slot-menu-label-to-icon-gap, var(--slot-menu-label-to-icon-gap));align-items:center}.draggable-slot-content .draggable-slot-content-label,.draggable-slot-content .draggable-slot-content-remove{padding-block-start:var(--luzmo-slot-menu-list-item-vertical-padding, var(--slot-menu-list-item-vertical-padding));padding-block-end:var(--luzmo-slot-menu-list-item-vertical-padding, var(--slot-menu-list-item-vertical-padding))}.draggable-slot-content .draggable-slot-content-label{padding-inline-start:var(--luzmo-slot-menu-list-item-horizontal-padding, var(--slot-menu-list-item-horizontal-padding));flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.draggable-slot-content .draggable-slot-content-remove{padding-inline-end:var(--luzmo-slot-menu-list-item-horizontal-padding, var(--slot-menu-list-item-horizontal-padding));flex:0 0 auto}:host{--slot-menu-list-active-background-color: var(--luzmo-primary);--slot-menu-list-active-background-color-hover: var(--luzmo-primary-hover);--slot-menu-list-active-color: var(--luzmo-primary-inverse-color);--slot-menu-list-background-color-hover: var(--luzmo-background-color-hover);--slot-menu-list-drop-indicator-color: var(--luzmo-font-color-down);--slot-menu-list-drop-indicator-height: 2px;--slot-menu-list-drop-indicator-circle-size: 4px}:host{--slot-menu-display-settings-min-width: 19rem;--slot-menu-min-height: calc(var(--luzmo-component-height) * 2);--slot-menu-font-size: var(--luzmo-font-size);--slot-menu-list-item-horizontal-padding: var(--luzmo-spacing-4);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-3);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-3)}:host([size=s]){--slot-menu-display-settings-min-width: 16rem;--slot-menu-min-height: calc(var(--luzmo-component-height-s) * 2);--slot-menu-font-size: var(--luzmo-font-size-s);--slot-menu-list-item-horizontal-padding: var(--luzmo-spacing-3);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-3);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-2)}:host([size=l]){--slot-menu-display-settings-min-width: 23rem;--slot-menu-min-height: calc(var(--luzmo-component-height-l) * 2);--slot-menu-font-size: var(--luzmo-font-size-l);--slot-menu-list-item-horizontal-padding: var(--luzmo-spacing-5);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-3);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-4)}:host([size=xl]){--slot-menu-display-settings-min-width: 26rem;--slot-menu-min-height: calc(var(--luzmo-component-height-xl) * 2);--slot-menu-font-size: var(--luzmo-font-size-xl);--slot-menu-list-item-horizontal-padding: var(--luzmo-spacing-5);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-4);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-5)}';var q=Object.defineProperty,f=(i,t,e,o)=>{for(var s=void 0,u=i.length-1,n;u>=0;u--)(n=i[u])&&(s=n(t,e,s)||s);return s&&q(t,e,s),s};class h extends k.SizedMixin(j.LuzmoElement,{validSizes:Object.values(k.ElementSizes)}){constructor(){super(...arguments),this.language="en",this.contentLanguage="en",this.slotContents=[],this.activeIndex=0,this._sendChangeEvent=()=>{this.dispatchEvent(new CustomEvent("slot-list-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{slotContents:structuredClone(this.slotContents),activeIndex:this.activeIndex}}))},this._cleanupFns=[],this._attachAll=()=>{[...this._draggableSlotContentElements].forEach(t=>{const e=this._sendChangeEvent.bind(this),o=this,s=v.draggable({element:t,onGenerateDragPreview({nativeSetDragImage:n}){v.setCustomNativeDragPreview({nativeSetDragImage:n,render({container:l}){var d;const r=document.createElement("div");r.classList.add("drag-preview");const a={};[["borderColor","--luzmo-slot-menu-list-border-color","--luzmo-border-color"],["backgroundColor","--luzmo-slot-menu-list-background-color","--luzmo-background-color"],["color","--luzmo-slot-menu-list-font-color","--slot-menu-list-font-color"],["fontSize","--luzmo-slot-menu-list-font-size","--slot-menu-list-font-size"],["horizontalPadding","--luzmo-slot-menu-list-item-horizontal-padding","--slot-menu-list-item-horizontal-padding"],["verticalPadding","--luzmo-slot-menu-list-item-vertical-padding","--slot-menu-list-item-vertical-padding"],["borderRadius","--luzmo-slot-menu-list-border-radius","--luzmo-border-radius"],["fontFamily","--luzmo-slot-menu-list-font-family","--luzmo-font-family"]].forEach(([c,b,y])=>{const m=v.getCssVariableValue(t,b)||v.getCssVariableValue(t,y);a[c]=m}),r.textContent=((d=t.querySelector("[data-task-content]"))==null?void 0:d.textContent)??t.textContent,Object.assign(r.style,{border:`1px solid ${a.borderColor}`,backgroundColor:a.backgroundColor,borderRadius:a.borderRadius,fontFamily:a.fontFamily,fontSize:a.fontSize,color:a.color,paddingInline:`${a.horizontalPadding}`,paddingBlock:`${a.verticalPadding}`}),l.append(r)}})},getInitialData(){var r;const n=t.parentElement;let l=0;return n&&(l=[...((r=n.parentElement)==null?void 0:r.children)??[]].indexOf(n)),{index:l}},onDragStart(){t.style.opacity="0.5"},onDrop(){t.style.opacity="1"}});this._cleanupFns.push(s);const u=v.dropTargetForElements({element:t,canDrop({source:n}){var l;return n.element===t?!1:(l=n==null?void 0:n.element)==null?void 0:l.classList.contains("draggable-slot-content")},getData(n){return $({},{element:t,input:n.input,allowedEdges:["top","bottom"]})},getIsSticky(){return!0},onDragEnter({self:n}){const l=E(n.data);if(!l)return;const r=document.createElement("div");r.classList.add("drop-indicator"),r.dataset.edge=l,t.after(r)},onDrag({self:n}){var a,d,c;const l=E(n.data);if(!l){(a=t.nextElementSibling)==null||a.remove();return}if(((d=t.nextElementSibling)==null?void 0:d.getAttribute("data-edge"))===l)return;(c=t.nextElementSibling)==null||c.remove();const r=document.createElement("div");r.classList.add("drop-indicator"),r.dataset.edge=l,t.after(r)},onDragLeave(){var n;(n=t.nextElementSibling)==null||n.remove()},onDrop({self:n,source:l}){var d,c,b,y;(d=t.nextElementSibling)==null||d.remove();const r=E(n.data),a=n.element.parentElement;if(typeof l.data.index=="number"&&a){let m=[...((c=a.parentElement)==null?void 0:c.children)??[]].indexOf(a);r==="bottom"&&l.data.index>=m&&m<(((y=(b=a==null?void 0:a.parentElement)==null?void 0:b.children)==null?void 0:y.length)??0)-1?m+=1:r==="top"&&m>l.data.index&&(m-=1);const g=o.activeIndex,z=l.data.index,x=m,O=o.slotContents[z];o.slotContents.splice(z,1),o.slotContents.splice(x,0,O),z===g?o.activeIndex=x:z<g&&x>=g?o.activeIndex=g-1:z>g&&x<=g&&(o.activeIndex=g+1)}r&&(F(l.element),o.requestUpdate(),e())}});this._cleanupFns.push(u)})},this._detachAll=()=>{this._cleanupFns.forEach(t=>t()),this._cleanupFns=[]}}static get styles(){return[p.r(M)]}willUpdate(){this._detachAll()}updated(){this._attachAll()}disconnectedCallback(){super.disconnectedCallback(),this._detachAll()}setActiveIndex(t){this.activeIndex=t,this._sendChangeEvent()}removeSlotContent(t){this.slotContents=this.slotContents.filter((e,o)=>o!==t),this.activeIndex=this.slotContents.length===0?0:Math.min(this.activeIndex,this.slotContents.length-1),this._sendChangeEvent()}render(){const t=this.slotContents.map((e,o)=>{const s=I.localize(e.label,this.contentLanguage);return p.x`<li class=${o===this.activeIndex?"active":""}>
21
21
  <div class="draggable-slot-content">
22
22
  <div
23
23
  class="draggable-slot-content-label"
package/components/slot-menu-list/index.js CHANGED
@@ -18,19 +18,19 @@
18
18
  * SOFTWARE.
19
19
  * */
20
20
  import { r as P, x as E, n as x } from "../property-DCzt3DR1.js";
21
- import { _ as S, d as F, a as j, s as D, g as w } from "../get-css-variable-YlLiVgo8.js";
21
+ import { _ as S, d as F, a as j, s as D, g as k } from "../get-css-variable-YlLiVgo8.js";
22
22
  import { a8 as $, a7 as L } from "../luzmo-icons-CVeTZ59u.js";
23
23
  import { l as M } from "../localize-BX7q0S0M.js";
24
24
  import { r as A } from "../query-all-Ddzx2fEK.js";
25
25
  import { L as R } from "../focusable-BbymtxWI.js";
26
26
  import { S as T, E as q } from "../sized-mixin-BGzkX2g1.js";
27
- const _ = () => {
27
+ const I = () => {
28
28
  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
29
29
  const r = document.createElement("style");
30
30
  r.setAttribute("data-luzmo-vars", ""), r.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-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(r);
31
31
  }
32
32
  };
33
- _();
33
+ I();
34
34
  var U = {
35
35
  large: 700
36
36
  };
@@ -50,7 +50,7 @@ function B(r) {
50
50
  iterations: 1
51
51
  });
52
52
  }
53
- function k(r, o) {
53
+ function w(r, o) {
54
54
  var t = Object.keys(r);
55
55
  if (Object.getOwnPropertySymbols) {
56
56
  var e = Object.getOwnPropertySymbols(r);
@@ -63,9 +63,9 @@ function k(r, o) {
63
63
  function C(r) {
64
64
  for (var o = 1; o < arguments.length; o++) {
65
65
  var t = arguments[o] != null ? arguments[o] : {};
66
- o % 2 ? k(Object(t), !0).forEach(function(e) {
66
+ o % 2 ? w(Object(t), !0).forEach(function(e) {
67
67
  S(r, e, t[e]);
68
- }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(r, Object.getOwnPropertyDescriptors(t)) : k(Object(t)).forEach(function(e) {
68
+ }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(r, Object.getOwnPropertyDescriptors(t)) : w(Object(t)).forEach(function(e) {
69
69
  Object.defineProperty(r, e, Object.getOwnPropertyDescriptor(t, e));
70
70
  });
71
71
  }
@@ -84,7 +84,7 @@ var N = {
84
84
  left: function(o, t) {
85
85
  return Math.abs(t.x - o.left);
86
86
  }
87
- }, I = Symbol("closestEdge");
87
+ }, _ = Symbol("closestEdge");
88
88
  function V(r, o) {
89
89
  var t, e, s = o.element, d = o.input, l = o.allowedEdges, n = {
90
90
  x: d.clientX,
@@ -97,11 +97,11 @@ function V(r, o) {
97
97
  }), u = (t = (e = a.sort(function(c, p) {
98
98
  return c.value - p.value;
99
99
  })[0]) === null || e === void 0 ? void 0 : e.edge) !== null && t !== void 0 ? t : null;
100
- return C(C({}, r), {}, S({}, I, u));
100
+ return C(C({}, r), {}, S({}, _, u));
101
101
  }
102
102
  function y(r) {
103
103
  var o;
104
- return (o = r[I]) !== null && o !== void 0 ? o : null;
104
+ return (o = r[_]) !== null && o !== void 0 ? o : null;
105
105
  }
106
106
  const G = ':host{font-family:var(--luzmo-slot-menu-list-font-family, var(--luzmo-font-family));font-size:var(--luzmo-slot-menu-list-font-size, var(--slot-menu-list-font-size));color:var(--luzmo-slot-menu-listfont-color, var(--luzmo-font-color))}:host{margin:0;padding:0;list-style:none;border-right:var(--luzmo-slot-menu-list-border-right-width, var(--luzmo-border-width)) solid var(--luzmo-slot-menu-list-border-right-color, var(--luzmo-border-color))}:host li{position:relative;cursor:pointer}:host li:hover{background-color:var(--luzmo-slot-menu-list-background-color-hover, var(--slot-menu-list-background-color-hover))}:host .active{background-color:var(--luzmo-slot-menu-list-active-background-color, var(--slot-menu-list-active-background-color));color:var(--luzmo-slot-menu-list-active-color, var(--slot-menu-list-active-color))}:host .active:hover{background-color:var(--luzmo-slot-menu-list-active-background-color-hover, var(--slot-menu-list-active-background-color-hover))}.drop-indicator{position:absolute;left:0;right:0;height:var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height));background-color:var(--luzmo-slot-menu-list-drop-indicator-color, var(--slot-menu-list-drop-indicator-color))}.drop-indicator:before{content:"";display:block;width:100%;border:var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height)) solid var(--luzmo-slot-menu-list-drop-indicator-color, var(--slot-menu-list-drop-indicator-color));border-radius:50%;position:absolute;background:var(--luzmo-slot-menu-list-drop-indicator-background, var(--luzmo-background-color));left:calc(-.5 * (var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size)) + var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height))));top:calc(-.5 * (var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size)) + var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height))));height:var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size));width:var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size))}.drop-indicator[data-edge=top]{top:calc(-.5 * var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height)))}.drop-indicator[data-edge=bottom]{bottom:calc(-.5 * var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height)))}.draggable-slot-content{display:flex;justify-content:space-between;gap:var(--luzmo-slot-menu-label-to-icon-gap, var(--slot-menu-label-to-icon-gap));align-items:center}.draggable-slot-content .draggable-slot-content-label,.draggable-slot-content .draggable-slot-content-remove{padding-block-start:var(--luzmo-slot-menu-list-item-vertical-padding, var(--slot-menu-list-item-vertical-padding));padding-block-end:var(--luzmo-slot-menu-list-item-vertical-padding, var(--slot-menu-list-item-vertical-padding))}.draggable-slot-content .draggable-slot-content-label{padding-inline-start:var(--luzmo-slot-menu-list-item-horizontal-padding, var(--slot-menu-list-item-horizontal-padding));flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.draggable-slot-content .draggable-slot-content-remove{padding-inline-end:var(--luzmo-slot-menu-list-item-horizontal-padding, var(--slot-menu-list-item-horizontal-padding));flex:0 0 auto}:host{--slot-menu-list-active-background-color: var(--luzmo-primary);--slot-menu-list-active-background-color-hover: var(--luzmo-primary-hover);--slot-menu-list-active-color: var(--luzmo-primary-inverse-color);--slot-menu-list-background-color-hover: var(--luzmo-background-color-hover);--slot-menu-list-drop-indicator-color: var(--luzmo-font-color-down);--slot-menu-list-drop-indicator-height: 2px;--slot-menu-list-drop-indicator-circle-size: 4px}:host{--slot-menu-display-settings-min-width: 19rem;--slot-menu-min-height: calc(var(--luzmo-component-height) * 2);--slot-menu-font-size: var(--luzmo-font-size);--slot-menu-list-item-horizontal-padding: var(--luzmo-spacing-4);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-3);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-3)}:host([size=s]){--slot-menu-display-settings-min-width: 16rem;--slot-menu-min-height: calc(var(--luzmo-component-height-s) * 2);--slot-menu-font-size: var(--luzmo-font-size-s);--slot-menu-list-item-horizontal-padding: var(--luzmo-spacing-3);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-3);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-2)}:host([size=l]){--slot-menu-display-settings-min-width: 23rem;--slot-menu-min-height: calc(var(--luzmo-component-height-l) * 2);--slot-menu-font-size: var(--luzmo-font-size-l);--slot-menu-list-item-horizontal-padding: var(--luzmo-spacing-5);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-3);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-4)}:host([size=xl]){--slot-menu-display-settings-min-width: 26rem;--slot-menu-min-height: calc(var(--luzmo-component-height-xl) * 2);--slot-menu-font-size: var(--luzmo-font-size-xl);--slot-menu-list-item-horizontal-padding: var(--luzmo-spacing-5);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-4);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-5)}';
107
107
  var H = Object.defineProperty, h = (r, o, t, e) => {
@@ -179,7 +179,7 @@ class z extends T(R, {
179
179
  "--luzmo-font-family"
180
180
  ]
181
181
  ].forEach(([c, p, b]) => {
182
- const m = w(o, p) || w(o, b);
182
+ const m = k(o, p) || k(o, b);
183
183
  a[c] = m;
184
184
  }), i.textContent = ((u = o.querySelector("[data-task-content]")) == null ? void 0 : u.textContent) ?? // worst case fallback if we set up our data-* up wrong
185
185
  o.textContent, Object.assign(i.style, {
@@ -286,14 +286,16 @@ class z extends T(R, {
286
286
  updated() {
287
287
  this._attachAll();
288
288
  }
289
+ disconnectedCallback() {
290
+ super.disconnectedCallback(), this._detachAll();
291
+ }
289
292
  setActiveIndex(o) {
290
293
  this.activeIndex = o, this._sendChangeEvent();
291
294
  }
292
295
  removeSlotContent(o) {
293
296
  this.slotContents = this.slotContents.filter(
294
297
  (t, e) => e !== o
295
- ), this.activeIndex === o ? this.activeIndex = o : this.slotContents.length > 0 && // go one down if index < activeIndex
296
- this.activeIndex > o && this.activeIndex--, this._sendChangeEvent();
298
+ ), this.activeIndex = this.slotContents.length === 0 ? 0 : Math.min(this.activeIndex, this.slotContents.length - 1), this._sendChangeEvent();
297
299
  }
298
300
  render() {
299
301
  const o = this.slotContents.map(
package/components/slot-menu-list/slot-menu-list.d.ts CHANGED
@@ -26,6 +26,7 @@ export declare class LuzmoSlotMenuList extends LuzmoSlotMenuList_base {
26
26
  private _detachAll;
27
27
  protected willUpdate(): void;
28
28
  protected updated(): void;
29
+ disconnectedCallback(): void;
29
30
  setActiveIndex(index: number): void;
30
31
  removeSlotContent(index: number): void;
31
32
  protected render(): TemplateResult;
package/components/{symbol-map-options.config-Bj-UuL9m.js → symbol-map-options.config-DdDA4aa7.js} RENAMED
@@ -110,7 +110,7 @@ const y = ({ slots: e }) => {
110
110
  visibleIf: y
111
111
  },
112
112
  {
113
- key: "Size",
113
+ key: "size",
114
114
  control: {
115
115
  type: "slider",
116
116
  label: "Size",