@luzmo/analytics-components-kit 1.0.1-alpha.3 → 1.0.1-alpha.4

package/lib/index-DSbgZduE.js

@@ -0,0 +1,501 @@
+/*! * 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 { S as v, L as f, r as x, x as z, n as l, e as I } from "./if-defined-BbzmSG-O.js";
+import { s as E } from "./observe-slot-text-DOYmGOZe.js";
+function p(c, t, e) {
+  return typeof c === t ? () => c : typeof c == "function" ? c : e;
+}
+class C {
+  constructor(t, {
+    direction: e,
+    elementEnterAction: r,
+    elements: i,
+    focusInIndex: s,
+    isFocusableElement: o,
+    listenerScope: g
+  } = { elements: () => [] }) {
+    this._currentIndex = -1, this.prevIndex = -1, this._direction = () => "both", this.directionLength = 5, this.elementEnterAction = (a) => {
+    }, this._focused = !1, this._focusInIndex = (a) => 0, this.isFocusableElement = (a) => !0, this._listenerScope = () => this.host, this.offset = 0, this.recentlyConnected = !1, this.handleFocusin = (a) => {
+      if (!this.isEventWithinListenerScope(a))
+        return;
+      const n = a.composedPath();
+      let h = -1;
+      n.find((b) => (h = this.elements.indexOf(b), h !== -1)), this.prevIndex = this.currentIndex, this.currentIndex = h > -1 ? h : this.currentIndex, this.isRelatedTargetOrContainAnElement(a) && this.hostContainsFocus();
+    }, this.handleClick = () => {
+      var h;
+      const a = this.elements;
+      if (a.length === 0)
+        return;
+      let n = a[this.currentIndex];
+      this.currentIndex < 0 || ((!n || !this.isFocusableElement(n)) && (this.setCurrentIndexCircularly(1), n = a[this.currentIndex]), n && this.isFocusableElement(n) && ((h = a[this.prevIndex]) == null || h.setAttribute("tabindex", "-1"), n.setAttribute("tabindex", "0")));
+    }, this.handleFocusout = (a) => {
+      this.isRelatedTargetOrContainAnElement(a) && this.hostNoLongerContainsFocus();
+    }, this.handleKeydown = (a) => {
+      if (!this.acceptsEventCode(a.code) || a.defaultPrevented)
+        return;
+      let n = 0;
+      switch (this.prevIndex = this.currentIndex, a.code) {
+        case "ArrowRight": {
+          n += 1;
+          break;
+        }
+        case "ArrowDown": {
+          n += this.direction === "grid" ? this.directionLength : 1;
+          break;
+        }
+        case "ArrowLeft": {
+          n -= 1;
+          break;
+        }
+        case "ArrowUp": {
+          n -= this.direction === "grid" ? this.directionLength : 1;
+          break;
+        }
+        case "End": {
+          this.currentIndex = 0, n -= 1;
+          break;
+        }
+        case "Home": {
+          this.currentIndex = this.elements.length - 1, n += 1;
+          break;
+        }
+      }
+      a.preventDefault(), this.direction === "grid" && this.currentIndex + n < 0 ? this.currentIndex = 0 : this.direction === "grid" && this.currentIndex + n > this.elements.length - 1 ? this.currentIndex = this.elements.length - 1 : this.setCurrentIndexCircularly(n), this.elementEnterAction(this.elements[this.currentIndex]), this.focus();
+    }, this.mutationObserver = new MutationObserver(() => {
+      this.handleItemMutation();
+    }), this.host = t, this.host.addController(this), this._elements = i, this.isFocusableElement = o || this.isFocusableElement, this._direction = p(
+      e,
+      "string",
+      this._direction
+    ), this.elementEnterAction = r || this.elementEnterAction, this._focusInIndex = p(
+      s,
+      "number",
+      this._focusInIndex
+    ), this._listenerScope = p(
+      g,
+      "object",
+      this._listenerScope
+    );
+  }
+  get currentIndex() {
+    return this._currentIndex === -1 && (this._currentIndex = this.focusInIndex), this._currentIndex - this.offset;
+  }
+  set currentIndex(t) {
+    this._currentIndex = t + this.offset;
+  }
+  get direction() {
+    return this._direction();
+  }
+  get elements() {
+    return this.cachedElements || (this.cachedElements = this._elements()), this.cachedElements;
+  }
+  set focused(t) {
+    t !== this.focused && (this._focused = t);
+  }
+  get focused() {
+    return this._focused;
+  }
+  get focusInElement() {
+    return this.elements[this.focusInIndex];
+  }
+  get focusInIndex() {
+    return this._focusInIndex(this.elements);
+  }
+  isEventWithinListenerScope(t) {
+    return this._listenerScope() === this.host ? !0 : t.composedPath().includes(this._listenerScope());
+  }
+  /*  In  handleItemMutation() method the first if condition is checking if the element is not focused or if the element's children's length is not decreasing then it means no element has been deleted and we must return.
+        Then we are checking if the deleted element was the focused one before the deletion if so then we need to proceed else we casn return;
+    */
+  handleItemMutation() {
+    if (this._currentIndex === -1 || this.elements.length <= this._elements().length)
+      return;
+    const t = this.elements[this.currentIndex];
+    if (this.clearElementCache(), this.elements.includes(t))
+      return;
+    const e = this.currentIndex !== this.elements.length, r = e ? 1 : -1;
+    e && this.setCurrentIndexCircularly(-1), this.setCurrentIndexCircularly(r), this.focus();
+  }
+  update({ elements: t } = { elements: () => [] }) {
+    this.unmanage(), this._elements = t, this.clearElementCache(), this.manage();
+  }
+  focus(t) {
+    var i;
+    const e = this.elements;
+    if (e.length === 0)
+      return;
+    let r = e[this.currentIndex];
+    (!r || !this.isFocusableElement(r)) && (this.setCurrentIndexCircularly(1), r = e[this.currentIndex]), r && this.isFocusableElement(r) && ((i = e[this.prevIndex]) == null || i.setAttribute("tabindex", "-1"), r.tabIndex = 0, r.focus(t));
+  }
+  clearElementCache(t = 0) {
+    this.mutationObserver.disconnect(), delete this.cachedElements, this.offset = t, requestAnimationFrame(() => {
+      this.elements.forEach((e) => {
+        this.mutationObserver.observe(e, {
+          attributes: !0
+        });
+      });
+    });
+  }
+  setCurrentIndexCircularly(t) {
+    const { length: e } = this.elements;
+    let r = e;
+    this.prevIndex = this.currentIndex;
+    let i = (e + this.currentIndex + t) % e;
+    for (
+      ;
+      // don't cycle the elements more than once
+      r && this.elements[i] && !this.isFocusableElement(this.elements[i]);
+    )
+      i = (e + i + t) % e, r -= 1;
+    this.currentIndex = i;
+  }
+  hostContainsFocus() {
+    this.host.addEventListener("focusout", this.handleFocusout), this.host.addEventListener("keydown", this.handleKeydown), this.focused = !0;
+  }
+  hostNoLongerContainsFocus() {
+    this.host.addEventListener("focusin", this.handleFocusin), this.host.removeEventListener("focusout", this.handleFocusout), this.host.removeEventListener("keydown", this.handleKeydown), this.focused = !1;
+  }
+  isRelatedTargetOrContainAnElement(t) {
+    const e = t.relatedTarget, r = this.elements.includes(e), i = this.elements.some(
+      (s) => s.contains(e)
+    );
+    return !(r || i);
+  }
+  acceptsEventCode(t) {
+    if (t === "End" || t === "Home")
+      return !0;
+    switch (this.direction) {
+      case "horizontal":
+        return t === "ArrowLeft" || t === "ArrowRight";
+      case "vertical":
+        return t === "ArrowUp" || t === "ArrowDown";
+      case "both":
+      case "grid":
+        return t.startsWith("Arrow");
+    }
+  }
+  manage() {
+    this.addEventListeners();
+  }
+  unmanage() {
+    this.removeEventListeners();
+  }
+  addEventListeners() {
+    this.host.addEventListener("focusin", this.handleFocusin), this.host.addEventListener("click", this.handleClick);
+  }
+  removeEventListeners() {
+    this.host.removeEventListener("focusin", this.handleFocusin), this.host.removeEventListener("focusout", this.handleFocusout), this.host.removeEventListener("keydown", this.handleKeydown), this.host.removeEventListener("click", this.handleClick);
+  }
+  hostConnected() {
+    this.recentlyConnected = !0, this.addEventListeners();
+  }
+  hostDisconnected() {
+    this.mutationObserver.disconnect(), this.removeEventListeners();
+  }
+  hostUpdated() {
+    this.recentlyConnected && (this.recentlyConnected = !1, this.elements.forEach((t) => {
+      this.mutationObserver.observe(t, {
+        attributes: !0
+      });
+    }));
+  }
+}
+class y extends C {
+  constructor() {
+    super(...arguments), this.managed = !0, this.manageIndexesAnimationFrame = 0;
+  }
+  set focused(t) {
+    t !== this.focused && (super.focused = t, this.manageTabindexes());
+  }
+  get focused() {
+    return super.focused;
+  }
+  clearElementCache(t = 0) {
+    cancelAnimationFrame(this.manageIndexesAnimationFrame), super.clearElementCache(t), this.managed && (this.manageIndexesAnimationFrame = requestAnimationFrame(
+      () => this.manageTabindexes()
+    ));
+  }
+  manageTabindexes() {
+    this.focused ? this.updateTabindexes(() => ({ tabIndex: -1 })) : this.updateTabindexes((t) => ({
+      removeTabIndex: t.contains(this.focusInElement) && t !== this.focusInElement,
+      tabIndex: t === this.focusInElement ? 0 : -1
+    }));
+  }
+  updateTabindexes(t) {
+    this.elements.forEach((e) => {
+      const { tabIndex: r, removeTabIndex: i } = t(e);
+      if (!i) {
+        this.focused ? e !== this.elements[this.currentIndex] && (e.tabIndex = r) : e.tabIndex = r;
+        return;
+      }
+      e.removeAttribute("tabindex");
+      const s = e;
+      s.requestUpdate && s.requestUpdate();
+    });
+  }
+  manage() {
+    this.managed = !0, this.manageTabindexes(), super.manage();
+  }
+  unmanage() {
+    this.managed = !1, this.updateTabindexes(() => ({ tabIndex: 0 })), super.unmanage();
+  }
+  hostUpdated() {
+    super.hostUpdated(), this.host.hasUpdated || this.manageTabindexes();
+  }
+}
+const A = ":host{gap:var(--luzmo-action-group-horizontal-spacing-regular, var(--action-group-horizontal-spacing-regular));flex-wrap:wrap;display:flex}::slotted(*){flex-shrink:0}::slotted(:focus-visible){z-index:3}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0}:host([vertical]){gap:var(--luzmo-action-group-vertical-spacing-regular, var(--action-group-vertical-spacing-regular));flex-direction:column;display:inline-flex}:host([compact]){gap:var(--luzmo-action-group-gap-size-compact, var(--action-group-gap-size-compact))}:host([compact]:not([quiet])){flex-wrap:nowrap}:host([compact]:not([quiet])) ::slotted(*){border-radius:var(--luzmo-action-group-border-radius-reset, var(--action-group-border-radius-reset));z-index:0;position:relative}:host([compact]:not([quiet])) ::slotted(:first-child){--luzmo-actionbutton-focus-indicator-border-radius: var( --luzmo-action-group-border-radius, var(--action-group-border-radius) ) 0px 0px var(--luzmo-action-group-border-radius, var(--action-group-border-radius));border-start-start-radius:var(--luzmo-action-group-border-radius, var(--action-group-border-radius));border-end-start-radius:var(--luzmo-action-group-border-radius, var(--action-group-border-radius));margin-inline-start:var(--luzmo-action-group-button-spacing-reset, var(--action-group-button-spacing-reset))}:host([compact]:not([quiet])) ::slotted(:not(:first-child)){--luzmo-actionbutton-focus-indicator-border-radius: 0px;margin-inline-start:var(--luzmo-action-group-horizontal-spacing-compact, var(--action-group-horizontal-spacing-compact));margin-inline-end:var(--luzmo-action-group-horizontal-spacing-compact, var(--action-group-horizontal-spacing-compact))}:host([compact]:not([quiet])) ::slotted(:last-child){--luzmo-actionbutton-focus-indicator-border-radius: 0px var(--luzmo-action-group-border-radius, var(--action-group-border-radius)) var(--luzmo-action-group-border-radius, var(--action-group-border-radius)) 0px;border-start-end-radius:var(--luzmo-action-group-border-radius, var(--action-group-border-radius));border-end-end-radius:var(--luzmo-action-group-border-radius, var(--action-group-border-radius));margin-inline-start:var(--luzmo-action-group-horizontal-spacing-compact, var(--action-group-horizontal-spacing-compact));margin-inline-end:var(--luzmo-action-group-border-radius-reset, var(--action-group-border-radius-reset))}:host([compact]:not([quiet])) ::slotted([selected]){z-index:1}@media (hover: hover){:host([compact]:not([quiet])) ::slotted(:hover){z-index:2}}:host([compact]:not([quiet])) ::slotted(:focus-visible){z-index:3}:host([compact]:not([quiet])[vertical]){gap:var(--luzmo-action-group-gap-size-compact, var(--action-group-gap-size-compact))}:host([compact][vertical]:not([quiet])) ::slotted(*){border-radius:var(--luzmo-action-group-border-radius-reset, var(--action-group-border-radius-reset))}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){--luzmo-actionbutton-focus-indicator-border-radius: var( --luzmo-action-group-border-radius, var(--action-group-border-radius) ) var(--luzmo-action-group-border-radius, var(--action-group-border-radius)) 0px 0px;border-start-start-radius:var(--luzmo-action-group-border-radius, var(--action-group-border-radius));border-start-end-radius:var(--luzmo-action-group-border-radius, var(--action-group-border-radius));margin-block-start:var(--luzmo-action-group-vertical-spacing-compact, var(--action-group-vertical-spacing-compact));margin-block-end:var(--luzmo-action-group-vertical-spacing-compact, var(--action-group-vertical-spacing-compact));margin-inline-end:var(--luzmo-action-group-button-spacing-reset, var(--action-group-button-spacing-reset))}:host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)){margin-block-start:var(--luzmo-action-group-button-spacing-reset, var(--action-group-button-spacing-reset));margin-block-end:var(--luzmo-action-group-vertical-spacing-compact, var(--action-group-vertical-spacing-compact));margin-inline-start:var(--luzmo-action-group-button-spacing-reset, var(--action-group-button-spacing-reset));margin-inline-end:var(--luzmo-action-group-button-spacing-reset, var(--action-group-button-spacing-reset))}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){--luzmo-actionbutton-focus-indicator-border-radius: 0px 0px var(--luzmo-action-group-border-radius, var(--action-group-border-radius)) var(--luzmo-action-group-border-radius, var(--action-group-border-radius));border-end-end-radius:var(--luzmo-action-group-border-radius, var(--action-group-border-radius));border-end-start-radius:var(--luzmo-action-group-border-radius, var(--action-group-border-radius));margin-block-start:var(--luzmo-action-group-vertical-spacing-compact, var(--action-group-vertical-spacing-compact));margin-block-end:var(--luzmo-action-group-button-spacing-reset, var(--action-group-button-spacing-reset))}:host([justified]) ::slotted(*){flex:1}:host{--action-group-gap-size-compact: 0px;--action-group-horizontal-spacing-compact: -1px;--action-group-vertical-spacing-compact: -1px;--action-group-button-spacing-reset: 0px;--action-group-border-radius-reset: 0px;--action-group-border-radius: var(--luzmo-border-radius);--action-group-horizontal-spacing-regular: var(--luzmo-spacing-3);--action-group-vertical-spacing-regular: var(--luzmo-spacing-3)}:host([size=xs]),:host([size=s]){--action-group-horizontal-spacing-regular: var(--luzmo-spacing-2);--action-group-vertical-spacing-regular: var(--luzmo-spacing-2)}:host,:host([size=l]),:host([size=xl]){--action-group-horizontal-spacing-regular: var(--luzmo-spacing-3);--action-group-vertical-spacing-regular: var(--luzmo-spacing-3)}:host([dir][compact][vertical]) ::slotted(:nth-child(n)){margin-right:0;margin-left:0}:host([justified]) ::slotted(:not([role])),:host([vertical]) ::slotted(:not([role])){display:flex;flex-direction:column;align-items:stretch}:host([compact]:not([quiet])) ::slotted(:not([role])){--overriden-border-radius: 0;--luzmo-action-button-border-radius: var(--overriden-border-radius)}:host([compact][vertical]:not([quiet])) ::slotted(:not([role]):first-child){--overriden-border-radius: var( --luzmo-action-group-border-radius, var(--action-group-border-radius) ) var(--luzmo-action-group-border-radius, var(--action-group-border-radius)) 0 0}:host([compact][vertical]:not([quiet])) ::slotted(:not([role]):last-child){--overriden-border-radius: 0 0 var(--luzmo-action-group-border-radius, var(--action-group-border-radius)) var(--luzmo-action-group-border-radius, var(--action-group-border-radius))}:host([dir=ltr][compact]:not([quiet],[vertical])) ::slotted(:not([role]):first-child){--overriden-border-radius: var( --luzmo-action-group-border-radius, var(--action-group-border-radius) ) 0 0 var(--luzmo-action-group-border-radius, var(--action-group-border-radius))}:host([dir=rtl][compact]:not([quiet],[vertical])) ::slotted(:not([role]):first-child){--overriden-border-radius: 0 var(--luzmo-action-group-border-radius, var(--action-group-border-radius)) var(--luzmo-action-group-border-radius, var(--action-group-border-radius)) 0}:host([dir=ltr][compact]:not([quiet],[vertical])) ::slotted(:not([role]):last-child){--overriden-border-radius: 0 var(--luzmo-action-group-border-radius, var(--action-group-border-radius)) var(--luzmo-action-group-border-radius, var(--action-group-border-radius)) 0}:host([dir=rtl][compact]:not([quiet],[vertical])) ::slotted(:not([role]):last-child){--overriden-border-radius: var( --luzmo-action-group-border-radius, var(--action-group-border-radius) ) 0 0 var(--luzmo-action-group-border-radius, var(--action-group-border-radius))}:host([compact]:not([quiet])) ::slotted(*){--luzmo-action-button-focus-ring-border-radius: 0}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){--luzmo-action-button-focus-ring-border-radius: var(--luzmo-border-radius) var(--luzmo-action-group-border-radius, var(--action-group-border-radius)) 0 0}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){--luzmo-action-button-focus-ring-border-radius: 0 0 var(--luzmo-action-group-border-radius, var(--action-group-border-radius)) var(--luzmo-action-group-border-radius, var(--action-group-border-radius))}:host([dir=ltr][compact]:not([quiet],[vertical])) ::slotted(:first-child){--luzmo-action-button-focus-ring-border-radius: var(--luzmo-border-radius) 0 0 var(--luzmo-action-group-border-radius, var(--action-group-border-radius))}:host([dir=rtl][compact]:not([quiet],[vertical])) ::slotted(:first-child){--luzmo-action-button-focus-ring-border-radius: 0 var(--luzmo-action-group-border-radius, var(--action-group-border-radius)) var(--luzmo-action-group-border-radius, var(--action-group-border-radius)) 0}:host([dir=ltr][compact]:not([quiet],[vertical])) ::slotted(:last-child){--luzmo-action-button-focus-ring-border-radius: 0 var(--luzmo-action-group-border-radius, var(--action-group-border-radius)) var(--luzmo-action-group-border-radius, var(--action-group-border-radius)) 0}:host([dir=rtl][compact]:not([quiet],[vertical])) ::slotted(:last-child){--luzmo-action-button-focus-ring-border-radius: var(--luzmo-border-radius) 0 0 var(--luzmo-action-group-border-radius, var(--action-group-border-radius))}";
+var _ = Object.defineProperty, q = Object.getOwnPropertyDescriptor, d = (c, t, e, r) => {
+  for (var i = r > 1 ? void 0 : r ? q(t, e) : t, s = c.length - 1, o; s >= 0; s--)
+    (o = c[s]) && (i = (r ? o(t, e, i) : o(i)) || i);
+  return r && i && _(t, e, i), i;
+};
+const m = [];
+class u extends v(f, {
+  validSizes: ["xs", "s", "m", "l", "xl"],
+  noDefaultSize: !0
+}) {
+  constructor() {
+    super(), this._buttons = [], this._buttonSelector = "luzmo-action-button, luzmo-action-menu", this.rovingTabindexController = new y(
+      this,
+      {
+        focusInIndex: (t) => {
+          let e = -1;
+          const r = t.findIndex((i, s) => (!t[e] && !i.disabled && (e = s), i.selected && !i.disabled));
+          return t[r] ? r : e;
+        },
+        elements: () => this.buttons,
+        isFocusableElement: (t) => !t.disabled
+      }
+    ), this.compact = !1, this.emphasized = !1, this.justified = !1, this.label = "", this.quiet = !1, this.vertical = !1, this._selected = m, this.hasManaged = !1, this.manageButtons = () => {
+      if (!this.slotElement)
+        return;
+      const e = this.slotElement.assignedElements({
+        flatten: !0
+      }).reduce((r, i) => {
+        if (i.matches(this._buttonSelector))
+          r.push(i);
+        else {
+          const s = [
+            ...i.querySelectorAll(`:scope > ${this._buttonSelector}`)
+          ];
+          r.push(...s);
+        }
+        return r;
+      }, []);
+      if (this.buttons = e, this.selects || !this.hasManaged) {
+        const r = [];
+        this.buttons.forEach((i) => {
+          i.selected && r.push(i.value);
+        }), this.setSelected([...this.selected, ...r]);
+      }
+      this.manageChildren(), this.manageSelects(), this.hasManaged = !0;
+    }, new E(this, {
+      config: {
+        childList: !0,
+        subtree: !0
+      },
+      callback: () => {
+        this.manageButtons();
+      },
+      skipInitial: !0
+    });
+  }
+  static get styles() {
+    return [x(A)];
+  }
+  set buttons(t) {
+    t !== this.buttons && (this._buttons = t, this.rovingTabindexController.clearElementCache());
+  }
+  get buttons() {
+    return this._buttons;
+  }
+  set selected(t) {
+    this.requestUpdate("selected", this._selected), this._selected = t, this.updateComplete.then(() => {
+      this.applySelects(), this.manageChildren();
+    });
+  }
+  get selected() {
+    return this._selected;
+  }
+  dispatchChange(t) {
+    this.dispatchEvent(
+      new Event("change", {
+        bubbles: !0,
+        composed: !0,
+        cancelable: !0
+      })
+    ) || (this.setSelected(t), this.buttons.map((r) => {
+      r.selected = this.selected.includes(r.value);
+    }));
+  }
+  setSelected(t, e) {
+    if (t === this.selected)
+      return;
+    const r = this.selected;
+    this.requestUpdate("selected", r), this._selected = t, e && this.dispatchChange(r);
+  }
+  focus(t) {
+    this.rovingTabindexController.focus(t);
+  }
+  deselectSelectedButtons() {
+    this.buttons.forEach((t) => {
+      t.selected && (t.selected = !1, t.tabIndex = -1, t.setAttribute(
+        this.selects ? "aria-checked" : (
+          /* c8 ignore */
+          "aria-pressed"
+        ),
+        "false"
+      ));
+    });
+  }
+  handleActionButtonChange(t) {
+    t.stopPropagation(), t.preventDefault();
+  }
+  handleClick(t) {
+    const e = t.target;
+    if (e.value !== void 0)
+      switch (this.selects) {
+        case "single": {
+          this.deselectSelectedButtons(), e.selected = !0, e.tabIndex = 0, e.setAttribute("aria-checked", "true"), this.setSelected([e.value], !0);
+          break;
+        }
+        case "multiple": {
+          const r = [...this.selected];
+          e.selected = !e.selected, e.setAttribute("aria-checked", e.selected ? "true" : "false"), e.selected ? r.push(e.value) : r.splice(this.selected.indexOf(e.value), 1), this.setSelected(r, !0), this.buttons.forEach((i) => {
+            i.tabIndex = -1;
+          }), e.tabIndex = 0;
+          break;
+        }
+      }
+  }
+  async applySelects() {
+    await this.manageSelects(!0);
+  }
+  async manageSelects(t) {
+    if (this.buttons.length === 0)
+      return;
+    const e = this.buttons;
+    switch (this.selects) {
+      case "single": {
+        this.setAttribute("role", "radiogroup");
+        const r = [], i = e.map(async (o) => {
+          await o.updateComplete, o.setAttribute("role", "radio"), o.setAttribute(
+            "aria-checked",
+            o.selected ? "true" : "false"
+          ), o.selected && r.push(o);
+        });
+        if (t)
+          break;
+        await Promise.all(i);
+        const s = r.map((o) => o.value);
+        this.setSelected(s || m);
+        break;
+      }
+      case "multiple": {
+        this.getAttribute("role") === "radiogroup" && this.removeAttribute("role");
+        const r = [], i = e.map(async (o) => {
+          await o.updateComplete, o.setAttribute("role", "checkbox"), o.setAttribute(
+            "aria-checked",
+            o.selected ? "true" : "false"
+          ), o.selected && r.push(o.value);
+        });
+        if (t)
+          break;
+        await Promise.all(i);
+        const s = r.length > 0 ? r : m;
+        this.setSelected(s);
+        break;
+      }
+      default:
+        if (this.selected.length > 0) {
+          const r = [], i = e.map(async (s) => {
+            await s.updateComplete, s.setAttribute("role", "button"), s.selected ? (s.setAttribute("aria-pressed", "true"), r.push(s)) : s.removeAttribute("aria-pressed");
+          });
+          if (t)
+            break;
+          await Promise.all(i), this.setSelected(r.map((s) => s.value));
+        } else {
+          this.buttons.forEach((r) => {
+            r.setAttribute("role", "button");
+          });
+          break;
+        }
+    }
+    this.hasAttribute("role") || this.setAttribute("role", "toolbar");
+  }
+  render() {
+    return z`
+      <slot role="presentation" @slotchange=${this.manageButtons}></slot>
+    `;
+  }
+  firstUpdated(t) {
+    super.firstUpdated(t), this.addEventListener("click", this.handleClick);
+  }
+  updated(t) {
+    super.updated(t), t.has("selects") && (this.manageSelects(), this.manageChildren(), this.selects ? this.renderRoot.addEventListener(
+      "change",
+      this.handleActionButtonChange
+    ) : this.renderRoot.removeEventListener(
+      "change",
+      this.handleActionButtonChange
+    )), (t.has("quiet") || t.has("emphasized") || t.has("size") || t.has("staticColor")) && this.manageChildren(t), t.has("label") && (this.label || t.get("label") !== void 0) && (this.label.length > 0 ? this.setAttribute("aria-label", this.label) : this.removeAttribute("aria-label"));
+  }
+  manageChildren(t) {
+    this.buttons.forEach((e) => {
+      (this.quiet || t != null && t.get("quiet")) && (e.quiet = this.quiet), (this.emphasized || t != null && t.get("emphasized")) && (e.emphasized = this.emphasized), (this.staticColor || t != null && t.get("staticColor")) && (e.staticColor = this.staticColor), (this.selects || !this.hasManaged) && (e.selected = this.selected.includes(e.value)), this.size && (this.size !== "m" || (t == null ? void 0 : t.get("size")) !== void 0) && (e.size = this.size);
+    });
+  }
+}
+d([
+  l({ type: Boolean, reflect: !0 })
+], u.prototype, "compact", 2);
+d([
+  l({ type: Boolean, reflect: !0 })
+], u.prototype, "emphasized", 2);
+d([
+  l({ type: Boolean, reflect: !0 })
+], u.prototype, "justified", 2);
+d([
+  l({ type: String })
+], u.prototype, "label", 2);
+d([
+  l({ type: Boolean, reflect: !0 })
+], u.prototype, "quiet", 2);
+d([
+  l({ type: String })
+], u.prototype, "selects", 2);
+d([
+  l({ reflect: !0, attribute: "static-color" })
+], u.prototype, "staticColor", 2);
+d([
+  l({ type: Boolean, reflect: !0 })
+], u.prototype, "vertical", 2);
+d([
+  l({ type: Array })
+], u.prototype, "selected", 1);
+d([
+  I("slot")
+], u.prototype, "slotElement", 2);
+customElements.get("luzmo-action-group") || customElements.define("luzmo-action-group", u);
+export {
+  C as F,
+  u as L,
+  y as R
+};

package/lib/index-D_KYpfBM.js

@@ -0,0 +1,24 @@
+/*! * 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 { Popover as o } from "./popover-Bwnkg-5-.js";
+customElements.get("luzmo-popover") || customElements.define("luzmo-popover", o);
+export {
+  o as Popover
+};