@luzmo/analytics-components-kit 1.0.4-beta.3 → 1.0.4

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

@@ -1,325 +0,0 @@
-/*! * 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 { n as e, o as t, t as n } from "./pragmatic-element-adapter-BFUFSRw6.js";
-import { i as r, n as i, t as a } from "./base-DYkpEuMf.js";
-import { t as o } from "./decorate-CaYbmmmm.js";
-import { t as s } from "./localize-BT7REYBY.js";
-import { n as c, t as l } from "./get-css-variable-Bpma6ZOo.js";
-import { luzmoIcon as u, luzmoTrashOutline as d } from "@luzmo/icons";
-import { html as f, unsafeCSS as p } from "lit";
-import { property as m, queryAll as h } from "lit/decorators.js";
-import { msg as g } from "@lit/localize";
-//#region node_modules/@atlaskit/motion/dist/esm/utils/durations.js
-var _ = {
-	none: 0,
-	small: 100,
-	medium: 350,
-	large: 700
-}, v = .5;
-_.none, _.small * v, _.medium * v, _.large * v;
-//#endregion
-//#region node_modules/@atlaskit/pragmatic-drag-and-drop-flourish/dist/esm/trigger-post-move-flash.js
-function y(e) {
-	e.animate([{ backgroundColor: "var(--ds-background-selected, #E9F2FF)" }, {}], {
-		duration: _.large,
-		easing: "cubic-bezier(0.25, 0.1, 0.25, 1.0)",
-		iterations: 1
-	});
-}
-//#endregion
-//#region node_modules/@atlaskit/pragmatic-drag-and-drop-hitbox/dist/esm/closest-edge.js
-function b(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 x(e) {
-	for (var n = 1; n < arguments.length; n++) {
-		var r = arguments[n] == null ? {} : arguments[n];
-		n % 2 ? b(Object(r), !0).forEach(function(n) {
-			t(e, n, r[n]);
-		}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : b(Object(r)).forEach(function(t) {
-			Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t));
-		});
-	}
-	return e;
-}
-var S = {
-	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);
-	}
-}, C = Symbol("closestEdge");
-function w(e, n) {
-	var r = n.element, i = n.input, a = n.allowedEdges, o = {
-		x: i.clientX,
-		y: i.clientY
-	}, s = r.getBoundingClientRect(), c = a.map(function(e) {
-		return {
-			edge: e,
-			value: S[e](s, o)
-		};
-	}).sort(function(e, t) {
-		return e.value - t.value;
-	})[0]?.edge ?? null;
-	return x(x({}, e), {}, t({}, C, c));
-}
-function T(e) {
-	return e[C] ?? null;
-}
-//#endregion
-//#region src/components/slot-menu-list/slot-menu-list.module.scss?inline
-var E = ":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-list-font-color,var(--luzmo-font-color))}ul{margin:0;padding:0;list-style:none}:host{max-height:var(--luzmo-slot-menu-list-max-height,var(--slot-menu-list-max-height));margin:0;padding:0;list-style:none;overflow-y:auto}:host::-webkit-scrollbar{width:var(--luzmo-slot-menu-list-scrollbar-width,var(--slot-menu-list-scrollbar-width))}:host::-webkit-scrollbar-track{background:var(--luzmo-slot-menu-list-scrollbar-track-background,var(--slot-menu-list-scrollbar-track-background));border-radius:var(--luzmo-slot-menu-list-scrollbar-track-border-radius,var(--slot-menu-list-scrollbar-track-border-radius))}:host::-webkit-scrollbar-thumb{background:var(--luzmo-slot-menu-list-scrollbar-thumb-background,var(--slot-menu-list-scrollbar-thumb-background));border-radius:var(--luzmo-slot-menu-list-scrollbar-thumb-border-radius,var(--slot-menu-list-scrollbar-thumb-border-radius))}:host::-webkit-scrollbar-thumb:hover{background:var(--luzmo-slot-menu-list-scrollbar-thumb-hover-background,var(--slot-menu-list-scrollbar-thumb-hover-background))}:host{scrollbar-width:var(--luzmo-scrollbar-width,thin);scrollbar-color:var(--luzmo-slot-menu-list-scrollbar-thumb-background,var(--slot-menu-list-scrollbar-thumb-background)) var(--luzmo-slot-menu-list-scrollbar-track-background,var(--slot-menu-list-scrollbar-track-background));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{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))}:host .active .draggable-slot-content:focus-visible{background-color:var(--luzmo-slot-menu-list-active-background-color-hover,var(--slot-menu-list-active-background-color-hover));outline:none}:host .active .draggable-slot-content-remove:focus-visible{outline-color:var(--luzmo-slot-menu-list-active-color,var(--slot-menu-list-active-color));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;cursor:pointer;align-items:center;display:flex}.draggable-slot-content:focus-visible{background-color:color-mix(in srgb, var(--luzmo-primary) 20%, transparent);outline:none}.draggable-slot-content .draggable-slot-content-label{padding-block:var(--luzmo-slot-menu-list-item-vertical-padding,var(--slot-menu-list-item-vertical-padding));text-overflow:ellipsis;white-space:nowrap;font:inherit;color:inherit;cursor:inherit;text-align:start;background:0 0;border:none;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{padding:var(--luzmo-spacing-1);font:inherit;color:inherit;cursor:inherit;border-radius:var(--luzmo-border-radius);background:0 0;border:none;flex:none;justify-content:center;align-items:center;margin-inline-end:var(--luzmo-slot-menu-list-item-horizontal-padding,var(--slot-menu-list-item-horizontal-padding));display:flex}.draggable-slot-content .draggable-slot-content-remove:focus-visible{outline:var(--luzmo-indicator-width) solid var(--luzmo-indicator-color);outline-offset:1px}: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-list-scrollbar-width:var(--luzmo-scrollbar-size);--slot-menu-list-scrollbar-track-background:var(--luzmo-scrollbar-track-background);--slot-menu-list-scrollbar-track-border-radius:var(--luzmo-scrollbar-track-border-radius);--slot-menu-list-scrollbar-thumb-background:var(--luzmo-scrollbar-thumb-background);--slot-menu-list-scrollbar-thumb-border-radius:var(--luzmo-scrollbar-thumb-border-radius);--slot-menu-list-scrollbar-thumb-hover-background:var(--luzmo-scrollbar-thumb-hover-background);--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)}", D = class extends i(r, { validSizes: Object.values(a) }) {
-	constructor(...t) {
-		super(...t), 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((t) => {
-				let r = this._sendChangeEvent.bind(this), i = this, a = n({
-					element: t,
-					onGenerateDragPreview({ nativeSetDragImage: e }) {
-						c({
-							nativeSetDragImage: e,
-							render({ container: e }) {
-								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(([e, n, i]) => {
-									r[e] = l(t, n) || l(t, i);
-								}), n.textContent = t.querySelector("[data-task-content]")?.textContent ?? t.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}`
-								}), e.append(n);
-							}
-						});
-					},
-					getInitialData() {
-						let e = t.parentElement, n = 0;
-						return e && (n = [...e.parentElement?.children ?? []].indexOf(e)), { index: n };
-					},
-					onDragStart() {
-						t.style.opacity = "0.5";
-					},
-					onDrop() {
-						t.style.opacity = "1";
-					}
-				});
-				this._cleanupFns.push(a);
-				let o = e({
-					element: t,
-					canDrop({ source: e }) {
-						return e.element === t ? !1 : e?.element?.classList.contains("draggable-slot-content");
-					},
-					getData(e) {
-						return w({}, {
-							element: t,
-							input: e.input,
-							allowedEdges: ["top", "bottom"]
-						});
-					},
-					getIsSticky() {
-						return !0;
-					},
-					onDragEnter({ self: e }) {
-						let n = T(e.data);
-						if (!n) return;
-						let r = document.createElement("div");
-						r.classList.add("drop-indicator"), r.dataset.edge = n, t.after(r);
-					},
-					onDrag({ self: e }) {
-						let n = T(e.data);
-						if (!n) {
-							t.nextElementSibling?.remove();
-							return;
-						}
-						if (t.nextElementSibling?.getAttribute("data-edge") === n) return;
-						t.nextElementSibling?.remove();
-						let r = document.createElement("div");
-						r.classList.add("drop-indicator"), r.dataset.edge = n, t.after(r);
-					},
-					onDragLeave() {
-						t.nextElementSibling?.remove();
-					},
-					onDrop({ self: e, source: n }) {
-						t.nextElementSibling?.remove();
-						let a = T(e.data), o = e.element.parentElement;
-						if (typeof n.data.index == "number" && o) {
-							let e = [...o.parentElement?.children ?? []].indexOf(o);
-							a === "bottom" && n.data.index >= e && e < (o?.parentElement?.children?.length ?? 0) - 1 ? e += 1 : a === "top" && e > n.data.index && --e;
-							let t = i.activeIndex, r = n.data.index, s = e, c = i.slotContents[r];
-							i.slotContents.splice(r, 1), i.slotContents.splice(s, 0, c), r === t ? i.activeIndex = s : r < t && s >= t ? i.activeIndex = t - 1 : r > t && s <= t && (i.activeIndex = t + 1);
-						}
-						a && (y(n.element), i.requestUpdate(), r());
-					}
-				});
-				this._cleanupFns.push(o);
-			});
-		}, this._detachAll = () => {
-			this._cleanupFns.forEach((e) => e()), this._cleanupFns = [];
-		};
-	}
-	static get styles() {
-		return [p(E)];
-	}
-	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();
-	}
-	_moveItem(e, t) {
-		let n = this.slotContents[e], r = [...this.slotContents];
-		r.splice(e, 1), r.splice(t, 0, n), this.slotContents = r, this.activeIndex === e ? this.activeIndex = t : e < this.activeIndex && t >= this.activeIndex ? --this.activeIndex : e > this.activeIndex && t <= this.activeIndex && (this.activeIndex += 1), this._sendChangeEvent(), this.updateComplete.then(() => this._draggableSlotContentElements[t]?.focus());
-	}
-	_handleContentKeydown(e, t) {
-		switch (t.key) {
-			case " ":
-			case "Enter":
-				t.preventDefault(), this.setActiveIndex(e);
-				break;
-			case "ArrowUp":
-				t.preventDefault(), t.altKey && e > 0 ? this._moveItem(e, e - 1) : !t.altKey && e > 0 && this._draggableSlotContentElements[e - 1]?.focus();
-				break;
-			case "ArrowDown":
-				t.preventDefault(), t.altKey && e < this.slotContents.length - 1 ? this._moveItem(e, e + 1) : !t.altKey && e < this.slotContents.length - 1 && this._draggableSlotContentElements[e + 1]?.focus();
-				break;
-		}
-	}
-	_handleTrashClick(e, t) {
-		t.stopPropagation(), this.removeSlotContent(e);
-	}
-	_handleTrashKeydown(e) {
-		(e.key === " " || e.key === "Enter") && e.stopPropagation();
-	}
-	render() {
-		let e = this.slotContents.map((e, t) => {
-			let n = s(e.label ?? {}, this.contentLanguage), r = t === this.activeIndex;
-			return f`<li class=${r ? "active" : ""}>
-          <div class="draggable-slot-content"
-            tabindex="0"
-            role="option"
-            aria-selected=${r ? "true" : "false"}
-            @click=${this.setActiveIndex.bind(this, t)}
-            @keydown=${this._handleContentKeydown.bind(this, t)}
-          >
-            <span class="draggable-slot-content-label" data-task-content>${n}</span>
-            <button
-              class="draggable-slot-content-remove"
-              aria-label=${g("Remove", { desc: "Remove button label" })}
-              @click=${this._handleTrashClick.bind(this, t)}
-              @keydown=${this._handleTrashKeydown}
-            >
-              ${u(d)}
-            </button>
-          </div>
-        </li>`;
-		});
-		return f`<ul role="listbox" aria-label=${g("Slot contents", { desc: "Accessible label for slot menu content list" })}>${e}</ul>`;
-	}
-};
-//#endregion
-//#region src/components/slot-menu-list/index.ts
-o([m({
-	type: String,
-	reflect: !0
-})], D.prototype, "language", void 0), o([m({
-	type: String,
-	attribute: "content-language",
-	reflect: !0
-})], D.prototype, "contentLanguage", void 0), o([h(".draggable-slot-content")], D.prototype, "_draggableSlotContentElements", void 0), o([m({ type: Array })], D.prototype, "slotContents", void 0), o([m({ type: Number })], D.prototype, "activeIndex", void 0), customElements.get("luzmo-slot-menu-list") || customElements.define("luzmo-slot-menu-list", D);
-//#endregion
-export { D as t };