@luzmo/analytics-components-kit 1.0.1-alpha.96 → 1.0.1-alpha.97

package/components/widget-menu/index.js

@@ -1,213 +0,0 @@
-/*! * A kit of modern Luzmo Web Components for analytics in your web application.
- * 
- * Copyright © 2025 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 { localized as s, msg as c } from "@lit/localize";
-import { luzmoTrashOutline as g, luzmoClone as v, luzmoEdit as z } from "@luzmo/icons";
-import "@luzmo/lucero/icon";
-import "@luzmo/lucero/tooltip";
-import { unsafeCSS as h, LitElement as b, html as m } from "lit";
-import { property as n } from "lit/decorators.js";
-import { g as p, t as w, s as f } from "../set-locale-Dp3N_gXN.js";
-(function() {
-  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
-    const o = document.createElement("style");
-    o.setAttribute("data-luzmo-vars", ""), o.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-background-color-alt-1: rgb(250, 250, 250);--luzmo-background-color-alt-2: rgb(239, 239, 239);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-color-disabled);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-secondary-outline: rgba(255, 0, 255, 0.2);--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-color-informative: #1a77e9;--luzmo-color-informative-rgb: 26, 119, 233;--luzmo-color-disabled: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(o);
-  }
-})();
-const x = ':host{box-sizing:border-box;display:block;width:min-content}:host luzmo-icon{display:flex}:host .widget-menu{display:flex;flex-direction:column;align-items:center;gap:var(--luzmo-widget-menu-gap, var(--widget-menu-gap));font-size:var(--luzmo-widget-menu-font-size, var(--widget-menu-font-size));width:min-content}:host .widget-menu .widget-edit{display:flex;flex-direction:column;gap:var(--luzmo-widget-menu-edit-item-gap, var(--widget-menu-edit-item-gap))}:host .widget-menu .widget-edit-item{display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;padding:var(--luzmo-widget-menu-edit-item-padding, var(--widget-menu-edit-item-padding));background-color:var(--luzmo-widget-menu-edit-item-background, var(--widget-menu-edit-item-background));transition:var(--luzmo-widget-menu-transition, var(--widget-menu-transition))}:host .widget-menu .widget-edit-item:first-of-type{border-top-right-radius:var(--luzmo-widget-menu-edit-item-border-radius, var(--widget-menu-edit-item-border-radius));border-top-left-radius:var(--luzmo-widget-menu-edit-item-border-radius, var(--widget-menu-edit-item-border-radius))}:host .widget-menu .widget-edit-item:last-of-type{border-bottom-right-radius:var(--luzmo-widget-menu-edit-item-border-radius, var(--widget-menu-edit-item-border-radius));border-bottom-left-radius:var(--luzmo-widget-menu-edit-item-border-radius, var(--widget-menu-edit-item-border-radius));box-shadow:var(--luzmo-widget-menu-box-shadow, var(--widget-menu-box-shadow))}:host .widget-menu .widget-edit-item:hover,:host .widget-menu .widget-edit-item[selected]{background-color:var(--luzmo-widget-menu-edit-item-background-hover, var(--widget-menu-edit-item-background-hover))}:host .widget-menu .widget-edit-item:active{background-color:var(--luzmo-widget-menu-edit-item-background-active, var(--widget-menu-edit-item-background-active))}:host .widget-menu .widget-edit-item luzmo-icon{color:var(--luzmo-widget-menu-edit-item-icon-color, var(--widget-menu-edit-item-icon-color))}:host .widget-menu .widget-remove{display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;padding:var(--luzmo-widget-menu-remove-padding, var(--widget-menu-remove-padding));border-radius:var(--luzmo-widget-menu-remove-border-radius, var(--widget-menu-remove-border-radius));background-color:var(--luzmo-widget-menu-remove-background, var(--widget-menu-remove-background));transition:var(--luzmo-widget-menu-transition, var(--widget-menu-transition));box-shadow:var(--luzmo-widget-menu-box-shadow, var(--widget-menu-box-shadow))}:host .widget-menu .widget-remove:hover,:host .widget-menu .widget-remove[selected]{background-color:var(--luzmo-widget-menu-remove-background-hover, var(--widget-menu-remove-background-hover))}:host .widget-menu .widget-remove:hover luzmo-icon,:host .widget-menu .widget-remove[selected] luzmo-icon{color:var(--luzmo-widget-menu-remove-icon-color-hover, var(--widget-menu-remove-icon-color-hover))}:host .widget-menu .widget-remove:active{background-color:var(--luzmo-widget-menu-remove-background-active, var(--widget-menu-remove-background-active))}:host .widget-menu .widget-remove:active luzmo-icon{color:var(--luzmo-widget-menu-remove-icon-color-hover, var(--widget-menu-remove-icon-color-hover))}:host .widget-menu .widget-remove luzmo-icon{color:var(--luzmo-widget-menu-remove-icon-color, var(--widget-menu-remove-icon-color))}:host .widget-menu luzmo-tooltip{--tooltip-font-family: var( --luzmo-widget-menu-tooltip-font-family, var(--widget-menu-tooltip-font-family) );font-family:var(--luzmo-widget-menu-tooltip-font-family, var(--widget-menu-tooltip-font-family))}:host{--widget-menu-gap: var(--luzmo-spacing-3, .375rem);--widget-menu-edit-item-gap: 0;--widget-menu-edit-item-padding: var(--luzmo-spacing-3, .125rem);--widget-menu-edit-item-border-radius: var(--luzmo-border-radius, .25rem);--widget-menu-edit-item-background: var(--luzmo-selected-color-hover, rgb(70, 69, 76));--widget-menu-edit-item-background-hover: var(--secondary, var(--luzmo-primary));--widget-menu-edit-item-background-active: var(--secondary, var(--luzmo-primary));--widget-menu-edit-item-icon-color: var(--luzmo-primary-inverse-color, white);--widget-menu-remove-padding: var(--luzmo-spacing-3, .125rem);--widget-menu-remove-border-radius: var(--luzmo-border-radius, .25rem);--widget-menu-remove-background: var(--luzmo-selected-color-hover, rgb(70, 69, 76));--widget-menu-remove-background-hover: var(--luzmo-negative-color, rgb(222, 55, 55));--widget-menu-remove-background-active: var(--luzmo-negative-color, rgb(222, 55, 55));--widget-menu-remove-icon-color: var(--luzmo-primary-inverse-color, white);--widget-menu-remove-icon-color-hover: var(--luzmo-primary-inverse-color, white);--widget-menu-transition: all var(--luzmo-animation-duration, .2s) ease;--widget-menu-font-size: var(--luzmo-font-size-m, .875rem);--widget-menu-box-shadow: 0px 4px 4px 0px var(--Boxshadow, rgba(var(--luzmo-border-color-rgb), .2));--widget-menu-tooltip-font-family: var(--luzmo-font-family, "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif)}';
-var y = Object.defineProperty, k = Object.getOwnPropertyDescriptor, d = (e, o, t, i) => {
-  for (var l = i > 1 ? void 0 : i ? k(o, t) : o, u = e.length - 1, a; u >= 0; u--)
-    (a = e[u]) && (l = (i ? a(o, t, l) : a(l)) || l);
-  return i && l && y(o, t, l), l;
-};
-let r = class extends b {
-  constructor() {
-    super(...arguments), this.vizItemId = "", this.hide = [], this.language = "en", this.selectedItem = null, this.menuItemConfigs = {
-      edit: {
-        icon: z,
-        label: "Edit",
-        eventName: "edit",
-        itemType: "edit",
-        cssClass: "widget-edit-item widget-edit",
-        dataE2e: "widget-menu-edit",
-        onHover: () => this._handleHoverOverEdit()
-      },
-      clone: {
-        icon: v,
-        label: "Clone",
-        eventName: "clone",
-        itemType: "clone",
-        cssClass: "widget-edit-item widget-clone",
-        dataE2e: "widget-menu-clone"
-      },
-      remove: {
-        icon: g,
-        label: "Delete",
-        eventName: "remove",
-        itemType: "remove",
-        cssClass: "widget-remove"
-      }
-    };
-  }
-  /**
-   * Check if there are any edit items to show
-   */
-  get hasEditItemsToShow() {
-    var t, i;
-    const e = !((t = this.hide) != null && t.includes("edit")), o = !((i = this.hide) != null && i.includes("clone"));
-    return e || o;
-  }
-  /**
-   * Check if a menu item should be shown
-   */
-  _shouldShowItem(e) {
-    var o;
-    return !((o = this.hide) != null && o.includes(e));
-  }
-  willUpdate(e) {
-    e.has("language") && this.language !== p() && ([...w].includes(this.language ?? "en") || this.language === "en") && f(this.language);
-  }
-  /**
-   * Toggle selected state for a menu item
-   */
-  _handleSelectedToggle(e) {
-    if (e !== "edit")
-      return;
-    const o = this.selectedItem === e ? null : e;
-    this.selectedItem = o, this._emitSelectedChanged();
-  }
-  /**
-   * Emit selected-changed event
-   */
-  _emitSelectedChanged() {
-    this.dispatchEvent(
-      new CustomEvent("selected-changed", {
-        bubbles: !0,
-        composed: !0,
-        detail: { selectedItem: this.selectedItem }
-      })
-    );
-  }
-  /**
-   * Handle menu item click with unified event dispatching
-   */
-  _handleMenuItemClick(e) {
-    this._handleSelectedToggle(e.itemType), this.dispatchEvent(
-      new CustomEvent("widget-menu-element-clicked", {
-        bubbles: !0,
-        composed: !0,
-        detail: {
-          action: e.eventName,
-          type: e.itemType,
-          id: this.vizItemId
-        }
-      })
-    );
-  }
-  /**
-   * Create a bound click handler for a menu item config
-   */
-  _createMenuItemClickHandler(e) {
-    return () => this._handleMenuItemClick(e);
-  }
-  _handleHoverOverEdit() {
-    this.dispatchEvent(
-      new CustomEvent("hover-over-edit", {
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  /**
-   * Render a menu item button
-   */
-  _renderMenuItem(e) {
-    const o = this.selectedItem === e.itemType, t = c(e.label, {
-      desc: `Widget menu ${e.itemType} tooltip`
-    });
-    return m`
-      <div
-        class=${e.cssClass}
-        data-e2e=${e.dataE2e || ""}
-        data-menu-item=${e.itemType}
-        role="button"
-        tabindex="0"
-        aria-label=${t}
-        ?selected=${o}
-        @mouseenter=${e.onHover}
-        @click=${this._createMenuItemClickHandler(e)}
-      >
-        <luzmo-icon .icon=${e.icon} size="s"></luzmo-icon>
-        <luzmo-tooltip
-          self-managed
-          placement="right"
-          fallback-placements="left"
-        >
-          ${t}
-        </luzmo-tooltip>
-      </div>
-    `;
-  }
-  /**
-   * Render edit section (edit and clone items)
-   */
-  _renderEditSection() {
-    return this.hasEditItemsToShow ? m`
-      <div class="widget-edit">
-        ${this._shouldShowItem("edit") ? this._renderMenuItem(this.menuItemConfigs.edit) : ""}
-        ${this._shouldShowItem("clone") ? this._renderMenuItem(this.menuItemConfigs.clone) : ""}
-      </div>
-    ` : m``;
-  }
-  /**
-   * Render remove section
-   */
-  _renderRemoveSection() {
-    return this._shouldShowItem("remove") ? this._renderMenuItem(this.menuItemConfigs.remove) : m``;
-  }
-  render() {
-    return m`
-      <div class="widget-menu font-size-lg">
-        ${this._renderEditSection()}
-        ${this._renderRemoveSection()}
-      </div>
-    `;
-  }
-};
-r.styles = h(x);
-r.tagName = "luzmo-widget-menu";
-d([
-  n({ type: String, reflect: !0, attribute: "viz-item-id" })
-], r.prototype, "vizItemId", 2);
-d([
-  n({ type: Array, attribute: !1 })
-], r.prototype, "hide", 2);
-d([
-  n({ type: String, reflect: !0 })
-], r.prototype, "language", 2);
-d([
-  n({ type: String, reflect: !0, attribute: "selected-item" })
-], r.prototype, "selectedItem", 2);
-r = d([
-  s()
-], r);
-customElements.get("luzmo-widget-menu") || customElements.define("luzmo-widget-menu", r);
-export {
-  r as LuzmoWidgetMenu
-};