@luzmo/analytics-components-kit 1.0.1-alpha.15 → 1.0.1-alpha.150

package/components/slot-menu-list-BLJxoLeI.js

@@ -0,0 +1,285 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2026 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. This license terminates
+ * automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+import { a as _defineProperty, i as dropTargetForElements, n as setCustomNativeDragPreview, r as draggable, t as getCssVariableValue } from "./get-css-variable-DpEed5QG.js";
+import { i as LuzmoElement, n as SizedMixin, t as ElementSizes } from "./base-rg2x95aL.js";
+import { t as __decorate } from "./decorate-Da6S_xrw.js";
+import { t as localize } from "./localize-Dlt3EN5i.js";
+import { luzmoIcon, luzmoTrashOutline } from "@luzmo/icons";
+import { html, unsafeCSS } from "lit";
+import { property, queryAll } from "lit/decorators.js";
+var durations = {
+	none: 0,
+	small: 100,
+	medium: 350,
+	large: 700
+}, EXITING_MOTION_MULTIPLIER = .5;
+durations.none, durations.small * EXITING_MOTION_MULTIPLIER, durations.medium * EXITING_MOTION_MULTIPLIER, durations.large * EXITING_MOTION_MULTIPLIER;
+function triggerPostMoveFlash(e) {
+	e.animate([{ backgroundColor: "var(--ds-background-selected, #E9F2FF)" }, {}], {
+		duration: durations.large,
+		easing: "cubic-bezier(0.25, 0.1, 0.25, 1.0)",
+		iterations: 1
+	});
+}
+function ownKeys(e, y) {
+	var b = Object.keys(e);
+	if (Object.getOwnPropertySymbols) {
+		var x = Object.getOwnPropertySymbols(e);
+		y && (x = x.filter(function(y) {
+			return Object.getOwnPropertyDescriptor(e, y).enumerable;
+		})), b.push.apply(b, x);
+	}
+	return b;
+}
+function _objectSpread(y) {
+	for (var b = 1; b < arguments.length; b++) {
+		var x = arguments[b] == null ? {} : arguments[b];
+		b % 2 ? ownKeys(Object(x), !0).forEach(function(b) {
+			_defineProperty(y, b, x[b]);
+		}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(y, Object.getOwnPropertyDescriptors(x)) : ownKeys(Object(x)).forEach(function(e) {
+			Object.defineProperty(y, e, Object.getOwnPropertyDescriptor(x, e));
+		});
+	}
+	return y;
+}
+var getDistanceToEdge = {
+	top: function(e, y) {
+		return Math.abs(y.y - e.top);
+	},
+	right: function(e, y) {
+		return Math.abs(e.right - y.x);
+	},
+	bottom: function(e, y) {
+		return Math.abs(e.bottom - y.y);
+	},
+	left: function(e, y) {
+		return Math.abs(y.x - e.left);
+	}
+}, uniqueKey = Symbol("closestEdge");
+function attachClosestEdge(y, b) {
+	var x = b.element, S = b.input, C = b.allowedEdges, w = {
+		x: S.clientX,
+		y: S.clientY
+	}, T = x.getBoundingClientRect(), E = C.map(function(e) {
+		return {
+			edge: e,
+			value: getDistanceToEdge[e](T, w)
+		};
+	}).sort(function(e, y) {
+		return e.value - y.value;
+	})[0]?.edge ?? null;
+	return _objectSpread(_objectSpread({}, y), {}, _defineProperty({}, uniqueKey, E));
+}
+function extractClosestEdge(e) {
+	return e[uniqueKey] ?? null;
+}
+var slot_menu_list_module_default = ":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));max-height:var(--luzmo-slot-menu-list-max-height,var(--slot-menu-list-max-height));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));margin:0;padding:0;list-style:none;overflow-y:auto}:host li{cursor:pointer;position:relative}:host li:hover{background-color:var(--luzmo-slot-menu-list-background-color-hover,var(--slot-menu-list-background-color-hover))}:host li{border-bottom:var(--luzmo-slot-menu-list-border-bottom-width,var(--slot-menu-list-border-bottom-width))solid var(--luzmo-slot-menu-list-border-bottom-color,var(--slot-menu-list-border-bottom-color))}: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{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));position:absolute;left:0;right:0}.drop-indicator:before{content:\"\";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));background:var(--luzmo-slot-menu-list-drop-indicator-background,var(--luzmo-background-color));width:100%;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));border-radius:50%;display:block;position:absolute}.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{justify-content:space-between;gap:var(--luzmo-slot-menu-label-to-icon-gap,var(--slot-menu-label-to-icon-gap));touch-action:none;align-items:center;display:flex}.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{text-overflow:ellipsis;white-space:nowrap;flex:auto;padding-inline-start:var(--luzmo-slot-menu-list-item-horizontal-padding,var(--slot-menu-list-item-horizontal-padding));overflow:hidden}.draggable-slot-content .draggable-slot-content-remove{flex:none;padding-inline-end:var(--luzmo-slot-menu-list-item-horizontal-padding,var(--slot-menu-list-item-horizontal-padding))}: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;--slot-menu-list-border-bottom-width:0px;--slot-menu-list-border-bottom-color:transparent;--slot-menu-list-max-height:calc(var(--luzmo-component-height)*4);--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)}", LuzmoSlotMenuList = class extends SizedMixin(LuzmoElement, { validSizes: Object.values(ElementSizes) }) {
+	constructor(...e) {
+		super(...e), this.language = "en", this.contentLanguage = "en", this.slotContents = [], this.activeIndex = 0, this._sendChangeEvent = () => {
+			this.dispatchEvent(new CustomEvent("luzmo-slot-list-changed", {
+				bubbles: !0,
+				composed: !0,
+				cancelable: !0,
+				detail: {
+					slotContents: structuredClone(this.slotContents),
+					activeIndex: this.activeIndex
+				}
+			}));
+		}, this._cleanupFns = [], this._attachAll = () => {
+			[...this._draggableSlotContentElements]?.forEach((e) => {
+				let C = this._sendChangeEvent.bind(this), w = this, T = draggable({
+					element: e,
+					onGenerateDragPreview({ nativeSetDragImage: y }) {
+						setCustomNativeDragPreview({
+							nativeSetDragImage: y,
+							render({ container: y }) {
+								let b = document.createElement("div");
+								b.classList.add("drag-preview");
+								let x = {};
+								[
+									[
+										"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(([y, b, C]) => {
+									x[y] = getCssVariableValue(e, b) || getCssVariableValue(e, C);
+								}), b.textContent = e.querySelector("[data-task-content]")?.textContent ?? e.textContent, Object.assign(b.style, {
+									border: `1px solid ${x.borderColor}`,
+									backgroundColor: x.backgroundColor,
+									borderRadius: x.borderRadius,
+									fontFamily: x.fontFamily,
+									fontSize: x.fontSize,
+									color: x.color,
+									paddingInline: `${x.horizontalPadding}`,
+									paddingBlock: `${x.verticalPadding}`
+								}), y.append(b);
+							}
+						});
+					},
+					getInitialData() {
+						let y = e.parentElement, b = 0;
+						return y && (b = [...y.parentElement?.children ?? []].indexOf(y)), { index: b };
+					},
+					onDragStart() {
+						e.style.opacity = "0.5";
+					},
+					onDrop() {
+						e.style.opacity = "1";
+					}
+				});
+				this._cleanupFns.push(T);
+				let E = dropTargetForElements({
+					element: e,
+					canDrop({ source: y }) {
+						return y.element === e ? !1 : y?.element?.classList.contains("draggable-slot-content");
+					},
+					getData(y) {
+						return attachClosestEdge({}, {
+							element: e,
+							input: y.input,
+							allowedEdges: ["top", "bottom"]
+						});
+					},
+					getIsSticky() {
+						return !0;
+					},
+					onDragEnter({ self: y }) {
+						let b = extractClosestEdge(y.data);
+						if (!b) return;
+						let x = document.createElement("div");
+						x.classList.add("drop-indicator"), x.dataset.edge = b, e.after(x);
+					},
+					onDrag({ self: y }) {
+						let b = extractClosestEdge(y.data);
+						if (!b) {
+							e.nextElementSibling?.remove();
+							return;
+						}
+						if (e.nextElementSibling?.getAttribute("data-edge") === b) return;
+						e.nextElementSibling?.remove();
+						let x = document.createElement("div");
+						x.classList.add("drop-indicator"), x.dataset.edge = b, e.after(x);
+					},
+					onDragLeave() {
+						e.nextElementSibling?.remove();
+					},
+					onDrop({ self: y, source: b }) {
+						e.nextElementSibling?.remove();
+						let x = extractClosestEdge(y.data), S = y.element.parentElement;
+						if (typeof b.data.index == "number" && S) {
+							let e = [...S.parentElement?.children ?? []].indexOf(S);
+							x === "bottom" && b.data.index >= e && e < (S?.parentElement?.children?.length ?? 0) - 1 ? e += 1 : x === "top" && e > b.data.index && --e;
+							let y = w.activeIndex, C = b.data.index, T = e, E = w.slotContents[C];
+							w.slotContents.splice(C, 1), w.slotContents.splice(T, 0, E), C === y ? w.activeIndex = T : C < y && T >= y ? w.activeIndex = y - 1 : C > y && T <= y && (w.activeIndex = y + 1);
+						}
+						x && (triggerPostMoveFlash(b.element), w.requestUpdate(), C());
+					}
+				});
+				this._cleanupFns.push(E);
+			});
+		}, this._detachAll = () => {
+			this._cleanupFns.forEach((e) => e()), this._cleanupFns = [];
+		};
+	}
+	static get styles() {
+		return [unsafeCSS(slot_menu_list_module_default)];
+	}
+	willUpdate() {
+		this._detachAll();
+	}
+	updated() {
+		this._attachAll();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this._detachAll();
+	}
+	setActiveIndex(e) {
+		this.activeIndex = e, this._sendChangeEvent();
+	}
+	removeSlotContent(e) {
+		this.slotContents = this.slotContents.filter((y, b) => b !== e), this.activeIndex = this.slotContents.length === 0 ? 0 : Math.min(this.activeIndex, this.slotContents.length - 1), this._sendChangeEvent();
+	}
+	render() {
+		return html`<div>${this.slotContents.map((e, y) => {
+			let b = localize(e.label ?? {}, this.contentLanguage);
+			return html`<li class=${y === this.activeIndex ? "active" : ""}>
+          <div class="draggable-slot-content">
+            <div
+              class="draggable-slot-content-label"
+              @click=${this.setActiveIndex.bind(this, y)}
+            >
+              ${b}
+            </div>
+            <div
+              class="draggable-slot-content-remove"
+              @click=${this.removeSlotContent.bind(this, y)}
+            >
+              ${luzmoIcon(luzmoTrashOutline)}
+            </div>
+          </div>
+        </li>`;
+		})}</div>`;
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: !0
+})], LuzmoSlotMenuList.prototype, "language", void 0), __decorate([property({
+	type: String,
+	attribute: "content-language",
+	reflect: !0
+})], LuzmoSlotMenuList.prototype, "contentLanguage", void 0), __decorate([queryAll(".draggable-slot-content")], LuzmoSlotMenuList.prototype, "_draggableSlotContentElements", void 0), __decorate([property({ type: Array })], LuzmoSlotMenuList.prototype, "slotContents", void 0), __decorate([property({ type: Number })], LuzmoSlotMenuList.prototype, "activeIndex", void 0), customElements.get("luzmo-slot-menu-list") || customElements.define("luzmo-slot-menu-list", LuzmoSlotMenuList);
+export { LuzmoSlotMenuList as t };

package/components/slot-menu-list-CFCvrPVt.cjs

@@ -0,0 +1,35 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2026 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. This license terminates
+ * automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+const e=require(`./chunk-350yNsax.cjs`),t=require(`./base-C_azywlB.cjs`),n=require(`./decorate-Dq4-zbi1.cjs`),r=require(`./localize-BBuZJf_h.cjs`),i=require(`./get-css-variable-D9AU2CIU.cjs`);let a=require(`@luzmo/icons`),o=require(`lit`),s=require(`lit/decorators.js`);var c={none:0,small:100,medium:350,large:700},l=.5,u={none:c.none,small:c.small*l,medium:c.medium*l,large:c.large*l};function d(e){e.animate([{backgroundColor:`var(--ds-background-selected, #E9F2FF)`},{}],{duration:c.large,easing:`cubic-bezier(0.25, 0.1, 0.25, 1.0)`,iterations:1})}function f(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function p(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]==null?{}:arguments[t];t%2?f(Object(n),!0).forEach(function(t){i.a(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):f(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}var m={top:function(e,t){return Math.abs(t.y-e.top)},right:function(e,t){return Math.abs(e.right-t.x)},bottom:function(e,t){return Math.abs(e.bottom-t.y)},left:function(e,t){return Math.abs(t.x-e.left)}},h=Symbol(`closestEdge`);function g(e,t){var n=t.element,r=t.input,a=t.allowedEdges,o={x:r.clientX,y:r.clientY},s=n.getBoundingClientRect(),c=a.map(function(e){return{edge:e,value:m[e](s,o)}}).sort(function(e,t){return e.value-t.value})[0]?.edge??null;return p(p({},e),{},i.a({},h,c))}function _(e){return e[h]??null}var v=`: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));max-height:var(--luzmo-slot-menu-list-max-height,var(--slot-menu-list-max-height));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));margin:0;padding:0;list-style:none;overflow-y:auto}:host li{cursor:pointer;position:relative}:host li:hover{background-color:var(--luzmo-slot-menu-list-background-color-hover,var(--slot-menu-list-background-color-hover))}:host li{border-bottom:var(--luzmo-slot-menu-list-border-bottom-width,var(--slot-menu-list-border-bottom-width))solid var(--luzmo-slot-menu-list-border-bottom-color,var(--slot-menu-list-border-bottom-color))}: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{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));position:absolute;left:0;right:0}.drop-indicator:before{content:"";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));background:var(--luzmo-slot-menu-list-drop-indicator-background,var(--luzmo-background-color));width:100%;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));border-radius:50%;display:block;position:absolute}.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{justify-content:space-between;gap:var(--luzmo-slot-menu-label-to-icon-gap,var(--slot-menu-label-to-icon-gap));touch-action:none;align-items:center;display:flex}.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{text-overflow:ellipsis;white-space:nowrap;flex:auto;padding-inline-start:var(--luzmo-slot-menu-list-item-horizontal-padding,var(--slot-menu-list-item-horizontal-padding));overflow:hidden}.draggable-slot-content .draggable-slot-content-remove{flex:none;padding-inline-end:var(--luzmo-slot-menu-list-item-horizontal-padding,var(--slot-menu-list-item-horizontal-padding))}: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;--slot-menu-list-border-bottom-width:0px;--slot-menu-list-border-bottom-color:transparent;--slot-menu-list-max-height:calc(var(--luzmo-component-height)*4);--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)}`,y=class extends t.n(t.i,{validSizes:Object.values(t.t)}){constructor(...e){super(...e),this.language=`en`,this.contentLanguage=`en`,this.slotContents=[],this.activeIndex=0,this._sendChangeEvent=()=>{this.dispatchEvent(new CustomEvent(`luzmo-slot-list-changed`,{bubbles:!0,composed:!0,cancelable:!0,detail:{slotContents:structuredClone(this.slotContents),activeIndex:this.activeIndex}}))},this._cleanupFns=[],this._attachAll=()=>{[...this._draggableSlotContentElements]?.forEach(e=>{let t=this._sendChangeEvent.bind(this),n=this,r=i.r({element:e,onGenerateDragPreview({nativeSetDragImage:t}){i.n({nativeSetDragImage:t,render({container:t}){let n=document.createElement(`div`);n.classList.add(`drag-preview`);let r={};[[`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(([t,n,a])=>{r[t]=i.t(e,n)||i.t(e,a)}),n.textContent=e.querySelector(`[data-task-content]`)?.textContent??e.textContent,Object.assign(n.style,{border:`1px solid ${r.borderColor}`,backgroundColor:r.backgroundColor,borderRadius:r.borderRadius,fontFamily:r.fontFamily,fontSize:r.fontSize,color:r.color,paddingInline:`${r.horizontalPadding}`,paddingBlock:`${r.verticalPadding}`}),t.append(n)}})},getInitialData(){let t=e.parentElement,n=0;return t&&(n=[...t.parentElement?.children??[]].indexOf(t)),{index:n}},onDragStart(){e.style.opacity=`0.5`},onDrop(){e.style.opacity=`1`}});this._cleanupFns.push(r);let a=i.i({element:e,canDrop({source:t}){return t.element===e?!1:t?.element?.classList.contains(`draggable-slot-content`)},getData(t){return g({},{element:e,input:t.input,allowedEdges:[`top`,`bottom`]})},getIsSticky(){return!0},onDragEnter({self:t}){let n=_(t.data);if(!n)return;let r=document.createElement(`div`);r.classList.add(`drop-indicator`),r.dataset.edge=n,e.after(r)},onDrag({self:t}){let n=_(t.data);if(!n){e.nextElementSibling?.remove();return}if(e.nextElementSibling?.getAttribute(`data-edge`)===n)return;e.nextElementSibling?.remove();let r=document.createElement(`div`);r.classList.add(`drop-indicator`),r.dataset.edge=n,e.after(r)},onDragLeave(){e.nextElementSibling?.remove()},onDrop({self:r,source:i}){e.nextElementSibling?.remove();let a=_(r.data),o=r.element.parentElement;if(typeof i.data.index==`number`&&o){let e=[...o.parentElement?.children??[]].indexOf(o);a===`bottom`&&i.data.index>=e&&e<(o?.parentElement?.children?.length??0)-1?e+=1:a===`top`&&e>i.data.index&&--e;let t=n.activeIndex,r=i.data.index,s=e,c=n.slotContents[r];n.slotContents.splice(r,1),n.slotContents.splice(s,0,c),r===t?n.activeIndex=s:r<t&&s>=t?n.activeIndex=t-1:r>t&&s<=t&&(n.activeIndex=t+1)}a&&(d(i.element),n.requestUpdate(),t())}});this._cleanupFns.push(a)})},this._detachAll=()=>{this._cleanupFns.forEach(e=>e()),this._cleanupFns=[]}}static get styles(){return[(0,o.unsafeCSS)(v)]}willUpdate(){this._detachAll()}updated(){this._attachAll()}disconnectedCallback(){super.disconnectedCallback(),this._detachAll()}setActiveIndex(e){this.activeIndex=e,this._sendChangeEvent()}removeSlotContent(e){this.slotContents=this.slotContents.filter((t,n)=>n!==e),this.activeIndex=this.slotContents.length===0?0:Math.min(this.activeIndex,this.slotContents.length-1),this._sendChangeEvent()}render(){return o.html`<div>${this.slotContents.map((e,t)=>{let n=r.t(e.label??{},this.contentLanguage);return o.html`<li class=${t===this.activeIndex?`active`:``}>
+          <div class="draggable-slot-content">
+            <div
+              class="draggable-slot-content-label"
+              @click=${this.setActiveIndex.bind(this,t)}
+            >
+              ${n}
+            </div>
+            <div
+              class="draggable-slot-content-remove"
+              @click=${this.removeSlotContent.bind(this,t)}
+            >
+              ${(0,a.luzmoIcon)(a.luzmoTrashOutline)}
+            </div>
+          </div>
+        </li>`})}</div>`}};n.t([(0,s.property)({type:String,reflect:!0})],y.prototype,`language`,void 0),n.t([(0,s.property)({type:String,attribute:`content-language`,reflect:!0})],y.prototype,`contentLanguage`,void 0),n.t([(0,s.queryAll)(`.draggable-slot-content`)],y.prototype,`_draggableSlotContentElements`,void 0),n.t([(0,s.property)({type:Array})],y.prototype,`slotContents`,void 0),n.t([(0,s.property)({type:Number})],y.prototype,`activeIndex`,void 0),customElements.get(`luzmo-slot-menu-list`)||customElements.define(`luzmo-slot-menu-list`,y),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return y}});