@luzmo/analytics-components-kit 1.0.1-alpha.1 → 1.0.1-alpha.10

package/components/set-locale-DJYT4V7U.js

@@ -0,0 +1,212 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2024 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.
+ * */
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const _ = "lit-localize-status";
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const C = (e) => typeof e != "string" && "strTag" in e, y = (e, t, s) => {
+  let r = e[0];
+  for (let n = 1; n < e.length; n++)
+    r += t[s ? s[n - 1] : n - 1], r += e[n];
+  return r;
+};
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const I = (e) => C(e) ? y(e.strings, e.values) : e;
+let x = I, E = !1;
+function z(e) {
+  if (E)
+    throw new Error("lit-localize can only be configured once");
+  x = e, E = !0;
+}
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+class P {
+  constructor(t) {
+    this.__litLocalizeEventHandler = (s) => {
+      s.detail.status === "ready" && this.host.requestUpdate();
+    }, this.host = t;
+  }
+  hostConnected() {
+    window.addEventListener(_, this.__litLocalizeEventHandler);
+  }
+  hostDisconnected() {
+    window.removeEventListener(_, this.__litLocalizeEventHandler);
+  }
+}
+const b = (e) => e.addController(new P(e)), j = b;
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const X = () => (e, t) => (e.addInitializer(j), e);
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+class M {
+  constructor() {
+    this.settled = !1, this.promise = new Promise((t, s) => {
+      this._resolve = t, this._reject = s;
+    });
+  }
+  resolve(t) {
+    this.settled = !0, this._resolve(t);
+  }
+  reject(t) {
+    this.settled = !0, this._reject(t);
+  }
+}
+/**
+ * @license
+ * Copyright 2014 Travis Webb
+ * SPDX-License-Identifier: MIT
+ */
+const i = [];
+for (let e = 0; e < 256; e++)
+  i[e] = (e >> 4 & 15).toString(16) + (e & 15).toString(16);
+function H(e) {
+  let t = 0, s = 8997, r = 0, n = 33826, o = 0, a = 40164, g = 0, c = 52210;
+  for (let h = 0; h < e.length; h++)
+    s ^= e.charCodeAt(h), t = s * 435, r = n * 435, o = a * 435, g = c * 435, o += s << 8, g += n << 8, r += t >>> 16, s = t & 65535, o += r >>> 16, n = r & 65535, c = g + (o >>> 16) & 65535, a = o & 65535;
+  return i[c >> 8] + i[c & 255] + i[a >> 8] + i[a & 255] + i[n >> 8] + i[n & 255] + i[s >> 8] + i[s & 255];
+}
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const R = "", q = "h", A = "s";
+function k(e, t) {
+  return (t ? q : A) + H(typeof e == "string" ? e : e.join(R));
+}
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const p = /* @__PURE__ */ new WeakMap(), w = /* @__PURE__ */ new Map();
+function D(e, t, s) {
+  if (e) {
+    const r = (s == null ? void 0 : s.id) ?? N(t), n = e[r];
+    if (n) {
+      if (typeof n == "string")
+        return n;
+      if ("strTag" in n)
+        return y(
+          n.strings,
+          // Cast `template` because its type wasn't automatically narrowed (but
+          // we know it must be the same type as `localized`).
+          t.values,
+          n.values
+        );
+      {
+        let o = p.get(n);
+        return o === void 0 && (o = n.values, p.set(n, o)), {
+          ...n,
+          values: o.map((a) => t.values[a])
+        };
+      }
+    }
+  }
+  return I(t);
+}
+function N(e) {
+  const t = typeof e == "string" ? e : e.strings;
+  let s = w.get(t);
+  return s === void 0 && (s = k(t, typeof e != "string" && !("strTag" in e)), w.set(t, s)), s;
+}
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function v(e) {
+  window.dispatchEvent(new CustomEvent(_, { detail: e }));
+}
+let u = "", L, S, f, m, T, l = new M();
+l.resolve();
+let d = 0;
+const U = (e) => (z((t, s) => D(T, t, s)), u = S = e.sourceLocale, f = new Set(e.targetLocales), f.add(e.sourceLocale), m = e.loadLocale, { getLocale: W, setLocale: $ }), W = () => u, $ = (e) => {
+  if (e === (L ?? u))
+    return l.promise;
+  if (!f || !m)
+    throw new Error("Internal error");
+  if (!f.has(e))
+    throw new Error("Invalid locale code");
+  d++;
+  const t = d;
+  return L = e, l.settled && (l = new M()), v({ status: "loading", loadingLocale: e }), (e === S ? (
+    // We could switch to the source locale synchronously, but we prefer to
+    // queue it on a microtask so that switching locales is consistently
+    // asynchronous.
+    Promise.resolve({ templates: void 0 })
+  ) : m(e)).then((r) => {
+    d === t && (u = e, L = void 0, T = r.templates, v({ status: "ready", readyLocale: e }), l.resolve());
+  }, (r) => {
+    d === t && (v({
+      status: "error",
+      errorLocale: e,
+      errorMessage: r.toString()
+    }), l.reject(r));
+  }), l.promise;
+}, F = (e, t, s) => {
+  const r = e[t];
+  return r ? typeof r == "function" ? r() : Promise.resolve(r) : new Promise((n, o) => {
+    (typeof queueMicrotask == "function" ? queueMicrotask : setTimeout)(
+      o.bind(
+        null,
+        new Error(
+          "Unknown variable dynamic import: " + t + (t.split("/").length !== s ? ". Note that variables only represent file names one level deep." : "")
+        )
+      )
+    );
+  });
+}, O = "en", V = [
+  "de",
+  "es",
+  "fr",
+  "nl"
+], { setLocale: G } = U({
+  sourceLocale: O,
+  targetLocales: V,
+  loadLocale: (e) => F(/* @__PURE__ */ Object.assign({ "../../generated/locales/de.ts": () => import("./de-BaTUIQk1.js"), "../../generated/locales/es.ts": () => import("./es-D37mTCZB.js"), "../../generated/locales/fr.ts": () => import("./fr-BWJHvkss.js"), "../../generated/locales/nl.ts": () => import("./nl-CWxJcTNT.js") }), `../../generated/locales/${e}.ts`, 5)
+});
+export {
+  X as l,
+  x as m,
+  G as s,
+  V as t
+};

package/components/sized-mixin-BxMraZLS-B_y0PzR3.js

@@ -0,0 +1,82 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2024 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 { R as a } from "./property-B2F7x7Cz.js";
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * 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.
+ * */
+var c = Object.defineProperty, h = Object.getOwnPropertyDescriptor, p = (r, i, s, u) => {
+  for (var e = h(i, s), l = r.length - 1, t; l >= 0; l--)
+    (t = r[l]) && (e = t(i, s, e) || e);
+  return e && c(i, s, e), e;
+};
+const m = {
+  xxs: "xxs",
+  xs: "xs",
+  s: "s",
+  m: "m",
+  l: "l",
+  xl: "xl",
+  xxl: "xxl"
+};
+function f(r, {
+  validSizes: i = ["s", "m", "l", "xl"],
+  noDefaultSize: s,
+  defaultSize: u = "m"
+} = {}) {
+  class e extends r {
+    constructor() {
+      super(...arguments), this._size = u;
+    }
+    get size() {
+      return this._size || u;
+    }
+    set size(t) {
+      const z = s ? null : u, o = t && t.toLocaleLowerCase(), n = i.includes(o) ? o : z;
+      if (n && this.setAttribute("size", n), this._size === n)
+        return;
+      const x = this._size;
+      this._size = n, this.requestUpdate("size", x);
+    }
+    update(t) {
+      !this.hasAttribute("size") && !s && this.setAttribute("size", this.size), super.update(t);
+    }
+  }
+  return p([
+    a({ type: String })
+  ], e.prototype, "size"), e;
+}
+export {
+  m as d,
+  f as m
+};

package/components/sized-mixin-BxMraZLS-DEFWqo8f.cjs

@@ -0,0 +1,36 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2024 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.
+ * */
+"use strict";const x=require("./property-0L4eB11h.cjs");/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * 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.
+ * */var a=Object.defineProperty,h=Object.getOwnPropertyDescriptor,p=(r,i,s,u)=>{for(var e=h(i,s),n=r.length-1,t;n>=0;n--)(t=r[n])&&(e=t(i,s,e)||e);return e&&a(i,s,e),e};const d={xxs:"xxs",xs:"xs",s:"s",m:"m",l:"l",xl:"xl",xxl:"xxl"};function m(r,{validSizes:i=["s","m","l","xl"],noDefaultSize:s,defaultSize:u="m"}={}){class e extends r{constructor(){super(...arguments),this._size=u}get size(){return this._size||u}set size(t){const o=s?null:u,z=t&&t.toLocaleLowerCase(),l=i.includes(z)?z:o;if(l&&this.setAttribute("size",l),this._size===l)return;const c=this._size;this._size=l,this.requestUpdate("size",c)}update(t){!this.hasAttribute("size")&&!s&&this.setAttribute("size",this.size),super.update(t)}}return p([x.Rt({type:String})],e.prototype,"size"),e}exports.d=d;exports.m=m;

package/components/slot-menu/index.cjs

@@ -0,0 +1,55 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2024 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.
+ * */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../index-DEVOZNSc.cjs");const t=require("../property-0L4eB11h.cjs");require("../display-settings/index.cjs");require("../slot-menu-list/index.cjs");const a=require("../luzmo-icons-XsFsTAl3.cjs"),c=require("../sized-mixin-BxMraZLS-DEFWqo8f.cjs"),h=require("../localize-DbobqcKs.cjs"),d=require("../query-D5qWDopr.cjs"),p=":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))}.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));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)}: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)}";var v=Object.defineProperty,n=(i,o,l,r)=>{for(var s=void 0,u=i.length-1,m;u>=0;u--)(m=i[u])&&(s=m(o,l,s)||s);return s&&v(o,l,s),s};class e extends c.m(t.kt,{validSizes:Object.values(c.d)}){constructor(){super(...arguments),this.language="en",this.contentLanguage="en",this.slotType="numeric",this.variant="draggable",this.slotContents=[],this._slotListData=[],this._slotContents=[],this._currentSlotContent={},this._activeIndex=0}static get styles(){return[t.r$1(p)]}disconnectedCallback(){super.disconnectedCallback()}_sendChangeEvent(){this.dispatchEvent(new CustomEvent("slot-contents-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{slotContents:[...this._slotContents]}}))}_sendCloseEvent(){this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0,cancelable:!0}))}willUpdate(o){var l;o.has("slotContents")&&(this._slotContents=structuredClone(this.slotContents),this._slotListData=structuredClone(this.slotContents),this._currentSlotContent=((l=this._slotContents)==null?void 0:l[this._activeIndex??0])??{})}updated(){this.updateContentLabel()}_handleSlotListChange(o){var r;this._slotContents=structuredClone(o.detail.slotContents);const l=o.detail.activeIndex;l!==this._activeIndex&&(this._activeIndex=l),this._currentSlotContent=((r=this._slotContents)==null?void 0:r[this._activeIndex??0])??{},this.displaySettingsElement.slotContent=this._currentSlotContent,this._slotContents.length<=1&&this.requestUpdate(),this._sendChangeEvent()}_handleSlotContentChange(o){this._slotContents[this._activeIndex]=structuredClone(o.detail.slotContent),this._slotListData=structuredClone(this._slotContents),this.slotMenuListElement&&(this.slotMenuListElement.slotContents=this._slotListData),this.updateContentLabel(),this._sendChangeEvent()}updateContentLabel(){if(this.slotContentLabelElement){const o=h.localize(this._slotContents[this._activeIndex].label,this.contentLanguage);this.slotContentLabelElement.textContent=o}}removeSlotContent(o){this._slotContents=this._slotContents.filter((l,r)=>r!==o),this._currentSlotContent={},this._sendChangeEvent(),this._sendCloseEvent(),this.requestUpdate()}close(){this._sendCloseEvent()}_removeActiveSlotContent(){this.removeSlotContent(this._activeIndex)}render(){return t.x`<div class="slot-menu-top-menu">
+        ${this.variant==="draggable"?t.x`<div class="drag-handle">${a.O2(a.W)}</div>`:""}
+        ${this._slotContents.length===1&&this.variant!=="popup"?t.x` <div class="slot-content-action">
+              <div class="slot-content-label"></div>
+              <div
+                class="slot-content-remove"
+                @click=${this.removeSlotContent.bind(this,0)}
+              >
+                ${a.O2(a.v1)}
+              </div>
+            </div>`:""}
+      </div>
+      <div
+        class="slot-contents-container ${this._slotContents.length>1?"multiple":""}"
+      >
+        ${this.variant==="popup"?"":t.x`<div class="close" @click=${this.close}>
+              ${a.O2(a.B)}
+            </div>`}
+        <div class="inner-container">
+          ${this._slotContents.length>1?t.x`<luzmo-slot-menu-list
+                .slotContents=${this._slotListData}
+                .activeIndex=${this._activeIndex}
+                @slot-list-changed=${this._handleSlotListChange}
+              ></luzmo-slot-menu-list>`:""}
+          <luzmo-display-settings
+            .size=${this.size}
+            .language=${this.language}
+            .contentLanguage=${this.contentLanguage}
+            .slotContent=${this._currentSlotContent}
+            .slotType=${this.slotType}
+            .showRemoveButton=${this.variant==="popup"&&this._slotContents.length===1}
+            @slot-content-changed=${this._handleSlotContentChange}
+            @remove-slot-content=${this._removeActiveSlotContent}
+          ></luzmo-display-settings>
+        </div>
+      </div>`}}n([t.n({type:String,reflect:!0})],e.prototype,"language");n([t.n({type:String,attribute:"content-language",reflect:!0})],e.prototype,"contentLanguage");n([t.n({type:String,attribute:"slot-type",reflect:!0})],e.prototype,"slotType");n([t.n({type:Boolean,attribute:"no-drag",reflect:!0})],e.prototype,"noDrag");n([t.n({type:Boolean,attribute:"no-close",reflect:!0})],e.prototype,"noClose");n([t.n({type:String,reflect:!0})],e.prototype,"variant");n([t.n({type:Boolean,attribute:"no-top-menu-label",reflect:!0})],e.prototype,"noTopMenuLabel");n([t.n()],e.prototype,"slotContents");n([d.e(".slot-content-label")],e.prototype,"slotContentLabelElement");n([d.e("luzmo-display-settings")],e.prototype,"displaySettingsElement");n([d.e("luzmo-slot-menu-list")],e.prototype,"slotMenuListElement");customElements.get("luzmo-slot-menu")||customElements.define("luzmo-slot-menu",e);exports.LuzmoSlotMenu=e;

package/components/slot-menu/index.d.ts

@@ -0,0 +1,7 @@
+import { LuzmoSlotMenu } from './slot-menu';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-slot-menu': LuzmoSlotMenu;
+    }
+}
+export { LuzmoSlotMenu } from './slot-menu';

package/components/slot-menu/index.js

@@ -0,0 +1,188 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2024 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 "../index-BVX_ozT9.js";
+import { k as z, a as h, x as i, n } from "../property-B2F7x7Cz.js";
+import "../display-settings/index.js";
+import "../slot-menu-list/index.js";
+import { O as m, W as g, v, B as b } from "../luzmo-icons-BE2T8vWu.js";
+import { m as f, d as x } from "../sized-mixin-BxMraZLS-B_y0PzR3.js";
+import { l as y } from "../localize-B6AsX_Zv.js";
+import { e as d } from "../query-Ddbd72Um.js";
+const p = () => {
+  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+    const r = document.createElement("style");
+    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-color-negative: #ca221c;--luzmo-color-negative-hover: #b3241f;--luzmo-color-negative-down: #9f231f;--luzmo-color-negative-focus: #b3241f;--luzmo-color-negative-rgb: 202, 34, 28;--luzmo-color-positive: rgb(20, 150, 101);--luzmo-color-positive-hover: rgb(17, 128, 86);--luzmo-color-positive-down: rgb(16, 105, 71);--luzmo-color-positive-focus: rgb(17, 128, 86);--luzmo-color-positive-rgb: 20, 150, 101;--luzmo-color-selected: rgb(110, 110, 110);--luzmo-color-selected-hover: rgb(70, 70, 70);--luzmo-color-selected-down: rgb(40, 40, 40);--luzmo-color-selected-focus: rgb(70, 70, 70);--luzmo-color-selected-hard: #1e1e1e;--luzmo-color-selected-hard-hover: rgb(0, 0, 0);--luzmo-color-selected-hard-down: rgb(0, 0, 0);--luzmo-color-selected-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);
+  }
+};
+p();
+const w = ":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))}.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));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)}: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)}";
+var C = Object.defineProperty, l = (r, o, e, a) => {
+  for (var s = void 0, u = r.length - 1, c; u >= 0; u--)
+    (c = r[u]) && (s = c(o, e, s) || s);
+  return s && C(o, e, s), s;
+};
+class t extends f(z, {
+  validSizes: Object.values(x)
+}) {
+  constructor() {
+    super(...arguments), this.language = "en", this.contentLanguage = "en", this.slotType = "numeric", this.variant = "draggable", this.slotContents = [], this._slotListData = [], this._slotContents = [], this._currentSlotContent = {}, this._activeIndex = 0;
+  }
+  static get styles() {
+    return [h(w)];
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+  _sendChangeEvent() {
+    this.dispatchEvent(
+      new CustomEvent("slot-contents-changed", {
+        bubbles: !0,
+        composed: !0,
+        cancelable: !0,
+        detail: {
+          slotContents: [...this._slotContents]
+        }
+      })
+    );
+  }
+  _sendCloseEvent() {
+    this.dispatchEvent(
+      new CustomEvent("close", {
+        bubbles: !0,
+        composed: !0,
+        cancelable: !0
+      })
+    );
+  }
+  willUpdate(o) {
+    var e;
+    o.has("slotContents") && (this._slotContents = structuredClone(this.slotContents), this._slotListData = structuredClone(this.slotContents), this._currentSlotContent = ((e = this._slotContents) == null ? void 0 : e[this._activeIndex ?? 0]) ?? {});
+  }
+  updated() {
+    this.updateContentLabel();
+  }
+  _handleSlotListChange(o) {
+    var a;
+    this._slotContents = structuredClone(o.detail.slotContents);
+    const e = o.detail.activeIndex;
+    e !== this._activeIndex && (this._activeIndex = e), this._currentSlotContent = ((a = this._slotContents) == null ? void 0 : a[this._activeIndex ?? 0]) ?? {}, this.displaySettingsElement.slotContent = this._currentSlotContent, this._slotContents.length <= 1 && this.requestUpdate(), this._sendChangeEvent();
+  }
+  _handleSlotContentChange(o) {
+    this._slotContents[this._activeIndex] = structuredClone(
+      o.detail.slotContent
+    ), this._slotListData = structuredClone(this._slotContents), this.slotMenuListElement && (this.slotMenuListElement.slotContents = this._slotListData), this.updateContentLabel(), this._sendChangeEvent();
+  }
+  // we set & update the label manually to not lose focus when typing in the display settings bc of rerender
+  updateContentLabel() {
+    if (this.slotContentLabelElement) {
+      const o = y(
+        this._slotContents[this._activeIndex].label,
+        this.contentLanguage
+      );
+      this.slotContentLabelElement.textContent = o;
+    }
+  }
+  removeSlotContent(o) {
+    this._slotContents = this._slotContents.filter(
+      (e, a) => a !== o
+    ), this._currentSlotContent = {}, this._sendChangeEvent(), this._sendCloseEvent(), this.requestUpdate();
+  }
+  close() {
+    this._sendCloseEvent();
+  }
+  _removeActiveSlotContent() {
+    this.removeSlotContent(this._activeIndex);
+  }
+  render() {
+    return i`<div class="slot-menu-top-menu">
+        ${this.variant === "draggable" ? i`<div class="drag-handle">${m(g)}</div>` : ""}
+        ${this._slotContents.length === 1 && this.variant !== "popup" ? i` <div class="slot-content-action">
+              <div class="slot-content-label"></div>
+              <div
+                class="slot-content-remove"
+                @click=${this.removeSlotContent.bind(this, 0)}
+              >
+                ${m(v)}
+              </div>
+            </div>` : ""}
+      </div>
+      <div
+        class="slot-contents-container ${this._slotContents.length > 1 ? "multiple" : ""}"
+      >
+        ${this.variant === "popup" ? "" : i`<div class="close" @click=${this.close}>
+              ${m(b)}
+            </div>`}
+        <div class="inner-container">
+          ${this._slotContents.length > 1 ? i`<luzmo-slot-menu-list
+                .slotContents=${this._slotListData}
+                .activeIndex=${this._activeIndex}
+                @slot-list-changed=${this._handleSlotListChange}
+              ></luzmo-slot-menu-list>` : ""}
+          <luzmo-display-settings
+            .size=${this.size}
+            .language=${this.language}
+            .contentLanguage=${this.contentLanguage}
+            .slotContent=${this._currentSlotContent}
+            .slotType=${this.slotType}
+            .showRemoveButton=${this.variant === "popup" && this._slotContents.length === 1}
+            @slot-content-changed=${this._handleSlotContentChange}
+            @remove-slot-content=${this._removeActiveSlotContent}
+          ></luzmo-display-settings>
+        </div>
+      </div>`;
+  }
+}
+l([
+  n({ type: String, reflect: !0 })
+], t.prototype, "language");
+l([
+  n({ type: String, attribute: "content-language", reflect: !0 })
+], t.prototype, "contentLanguage");
+l([
+  n({ type: String, attribute: "slot-type", reflect: !0 })
+], t.prototype, "slotType");
+l([
+  n({ type: Boolean, attribute: "no-drag", reflect: !0 })
+], t.prototype, "noDrag");
+l([
+  n({ type: Boolean, attribute: "no-close", reflect: !0 })
+], t.prototype, "noClose");
+l([
+  n({ type: String, reflect: !0 })
+], t.prototype, "variant");
+l([
+  n({ type: Boolean, attribute: "no-top-menu-label", reflect: !0 })
+], t.prototype, "noTopMenuLabel");
+l([
+  n()
+], t.prototype, "slotContents");
+l([
+  d(".slot-content-label")
+], t.prototype, "slotContentLabelElement");
+l([
+  d("luzmo-display-settings")
+], t.prototype, "displaySettingsElement");
+l([
+  d("luzmo-slot-menu-list")
+], t.prototype, "slotMenuListElement");
+customElements.get("luzmo-slot-menu") || customElements.define("luzmo-slot-menu", t);
+export {
+  t as LuzmoSlotMenu
+};