@liwe3/webcomponents 1.0.14 → 1.1.10

package/dist/ContainerBox.d.ts

@@ -0,0 +1,112 @@
+/**
+ * ContainerBox Web Component
+ * A container that wraps elements and shows a menu on hover
+ */
+import type { PopoverMenuItem } from './PopoverMenu';
+export type MenuPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export type ContainerBoxConfig = {
+    menuPosition?: MenuPosition;
+    menuItems?: PopoverMenuItem[];
+    alwaysShowMenu?: boolean;
+};
+export declare class ContainerBoxElement extends HTMLElement {
+    shadowRoot: ShadowRoot;
+    private menuPosition;
+    private menuItems;
+    private alwaysShowMenu;
+    private popoverMenu;
+    private menuButton;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Set menu position
+     */
+    setMenuPosition(position: MenuPosition): void;
+    /**
+     * Get menu position
+     */
+    getMenuPosition(): MenuPosition;
+    /**
+     * Set menu items
+     */
+    setMenuItems(items: PopoverMenuItem[]): void;
+    /**
+     * Get menu items
+     */
+    getMenuItems(): PopoverMenuItem[];
+    /**
+     * Set whether menu button is always visible
+     */
+    setAlwaysShowMenu(value: boolean): void;
+    /**
+     * Get whether menu button is always visible
+     */
+    getAlwaysShowMenu(): boolean;
+    /**
+     * Render the component
+     */
+    private render;
+    /**
+     * Create the popover menu
+     */
+    private createPopoverMenu;
+    /**
+     * Update popover menu items
+     */
+    private updatePopoverMenu;
+    /**
+     * Render menu items recursively
+     */
+    private renderMenuItems;
+    /**
+     * Create and show the popover menu
+     */
+    private createAndShowPopover;
+    /**
+     * Attach event listeners to menu items
+     */
+    private attachMenuListeners;
+    /**
+     * Update menu button position
+     */
+    private updateMenuButtonPosition;
+    /**
+     * Update menu button visibility
+     */
+    private updateMenuButtonVisibility;
+    /**
+     * Setup event listeners
+     */
+    private setupEventListeners;
+    /**
+     * Cleanup event listeners
+     */
+    private cleanupEventListeners;
+    /**
+     * Handle menu button click
+     */
+    private handleMenuButtonClick;
+    /**
+     * Show the menu
+     */
+    private showMenu;
+    /**
+     * Hide the menu
+     */
+    private hideMenu;
+    /**
+     * Handle document click to close menu
+     */
+    private handleDocumentClick;
+    /**
+     * Handle content click - pass through to slotted elements
+     */
+    private handleContentClick;
+}
+/**
+ * Conditionally defines the custom element if in a browser environment.
+ */
+declare const defineContainerBox: (tagName?: string) => void;
+export { defineContainerBox };
+//# sourceMappingURL=ContainerBox.d.ts.map

package/dist/ContainerBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContainerBox.d.ts","sourceRoot":"","sources":["../src/ContainerBox.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAErD,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;AAErF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,SAAS,CAAC,EAAE,eAAe,EAAE,CAAC;IAC9B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,qBAAa,mBAAoB,SAAQ,WAAW;IAC1C,UAAU,EAAE,UAAU,CAAC;IAC/B,OAAO,CAAC,YAAY,CAA+B;IACnD,OAAO,CAAC,SAAS,CAAyB;IAC1C,OAAO,CAAC,cAAc,CAAkB;IACxC,OAAO,CAAC,WAAW,CAA4B;IAC/C,OAAO,CAAC,UAAU,CAA4B;;IAO9C,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAI5B;;OAEG;IACH,eAAe,CAAC,QAAQ,EAAE,YAAY,GAAG,IAAI;IAK7C;;OAEG;IACH,eAAe,IAAI,YAAY;IAI/B;;OAEG;IACH,YAAY,CAAC,KAAK,EAAE,eAAe,EAAE,GAAG,IAAI;IAK5C;;OAEG;IACH,YAAY,IAAI,eAAe,EAAE;IAIjC;;OAEG;IACH,iBAAiB,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKvC;;OAEG;IACH,iBAAiB,IAAI,OAAO;IAI5B;;OAEG;IACH,OAAO,CAAC,MAAM;IAyGd;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAIzB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAIzB;;OAEG;IACH,OAAO,CAAC,eAAe;IAqBvB;;OAEG;IACH,OAAO,CAAC,oBAAoB;IA0E5B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAqE3B;;OAEG;IACH,OAAO,CAAC,wBAAwB;IAMhC;;OAEG;IACH,OAAO,CAAC,0BAA0B;IAUlC;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAY3B;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAW7B;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAa7B;;OAEG;IACH,OAAO,CAAC,QAAQ;IAwEhB;;OAEG;IACH,OAAO,CAAC,QAAQ;IAOhB;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAQ3B;;OAEG;IACH,OAAO,CAAC,kBAAkB;CAY3B;AAED;;GAEG;AACH,QAAA,MAAM,kBAAkB,GAAI,gBAA+B,KAAG,IAI7D,CAAC;AAKF,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/ContainerBox.js

@@ -0,0 +1,359 @@
+class m extends HTMLElement {
+  constructor() {
+    super(), this.menuPosition = "bottom-left", this.menuItems = [], this.alwaysShowMenu = !1, this.popoverMenu = null, this.menuButton = null, this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render(), this.setupEventListeners();
+  }
+  disconnectedCallback() {
+    this.cleanupEventListeners();
+  }
+  /**
+   * Set menu position
+   */
+  setMenuPosition(e) {
+    this.menuPosition = e, this.updateMenuButtonPosition();
+  }
+  /**
+   * Get menu position
+   */
+  getMenuPosition() {
+    return this.menuPosition;
+  }
+  /**
+   * Set menu items
+   */
+  setMenuItems(e) {
+    this.menuItems = e, this.updatePopoverMenu();
+  }
+  /**
+   * Get menu items
+   */
+  getMenuItems() {
+    return this.menuItems;
+  }
+  /**
+   * Set whether menu button is always visible
+   */
+  setAlwaysShowMenu(e) {
+    this.alwaysShowMenu = e, this.updateMenuButtonVisibility();
+  }
+  /**
+   * Get whether menu button is always visible
+   */
+  getAlwaysShowMenu() {
+    return this.alwaysShowMenu;
+  }
+  /**
+   * Render the component
+   */
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          position: relative;
+          font-family: var(--font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+        }
+
+        .container-box {
+          position: relative;
+          width: 100%;
+          height: 100%;
+        }
+
+        .content-wrapper {
+          width: 100%;
+          height: 100%;
+        }
+
+        .menu-button {
+          position: absolute;
+          background: var(--container-box-menu-bg, #fff);
+          border: 1px solid var(--container-box-menu-border, #ddd);
+          border-radius: var(--container-box-menu-radius, 4px);
+          padding: var(--container-box-menu-padding, 6px 10px);
+          cursor: pointer;
+          box-shadow: var(--container-box-menu-shadow, 0 2px 8px rgba(0,0,0,0.15));
+          z-index: 10;
+          opacity: 0;
+          transition: opacity 0.2s;
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          font-size: 14px;
+          color: var(--container-box-menu-color, #333);
+        }
+
+        .menu-button:hover {
+          background: var(--container-box-menu-hover-bg, #f5f5f5);
+        }
+
+        .container-box:hover .menu-button {
+          opacity: 1;
+        }
+
+        .menu-button.always-visible {
+          opacity: 1;
+        }
+
+        .menu-button-icon {
+          width: 16px;
+          height: 16px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        /* Position variants */
+        .menu-button.top-left {
+          top: var(--container-box-menu-offset, 8px);
+          left: var(--container-box-menu-offset, 8px);
+        }
+
+        .menu-button.top-right {
+          top: var(--container-box-menu-offset, 8px);
+          right: var(--container-box-menu-offset, 8px);
+        }
+
+        .menu-button.bottom-left {
+          bottom: var(--container-box-menu-offset, 8px);
+          left: var(--container-box-menu-offset, 8px);
+        }
+
+        .menu-button.bottom-right {
+          bottom: var(--container-box-menu-offset, 8px);
+          right: var(--container-box-menu-offset, 8px);
+        }
+
+        .popover-container {
+          position: fixed;
+          z-index: 10000;
+          pointer-events: none;
+        }
+
+        .popover-container > * {
+          pointer-events: auto;
+        }
+      </style>
+
+      <div class="container-box">
+        <div class="content-wrapper">
+          <slot></slot>
+        </div>
+        <div class="menu-button ${this.menuPosition} ${this.alwaysShowMenu ? "always-visible" : ""}">
+          <span class="menu-button-icon">⋮</span>
+        </div>
+      </div>
+      <div class="popover-container"></div>
+    `, this.menuButton = this.shadowRoot.querySelector(".menu-button"), this.createPopoverMenu();
+  }
+  /**
+   * Create the popover menu
+   */
+  createPopoverMenu() {
+  }
+  /**
+   * Update popover menu items
+   */
+  updatePopoverMenu() {
+  }
+  /**
+   * Render menu items recursively
+   */
+  renderMenuItems(e) {
+    return e.map((t) => {
+      if (t.label === "---sep")
+        return '<div class="menu-separator"></div>';
+      const o = t.items && t.items.length > 0;
+      return `
+        <div class="menu-item ${t.enabled === !1 ? "disabled" : ""} ${o ? "has-submenu" : ""}" data-has-submenu="${o}">
+          <span class="menu-item-label">${t.label}</span>
+          ${o ? '<span class="menu-item-arrow">▶</span>' : ""}
+          ${o ? `<div class="submenu">${this.renderMenuItems(t.items)}</div>` : ""}
+        </div>
+      `;
+    }).join("");
+  }
+  /**
+   * Create and show the popover menu
+   */
+  createAndShowPopover() {
+    const e = document.createElement("div");
+    return e.className = "custom-popover-menu", e.innerHTML = `
+      <style>
+        .custom-popover-menu {
+          position: fixed;
+          background: white;
+          border: 1px solid #ccc;
+          border-radius: 6px;
+          box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+          min-width: 180px;
+          z-index: 10000;
+        }
+
+        .menu-item {
+          padding: 10px 16px;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          transition: background-color 0.2s;
+          position: relative;
+          font-size: 14px;
+          color: #333;
+        }
+
+        .menu-item:hover {
+          background: #f5f5f5;
+        }
+
+        .menu-item.disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+          pointer-events: none;
+        }
+
+        .menu-item.has-submenu:hover .submenu {
+          display: block;
+        }
+
+        .menu-item-label {
+          flex: 1;
+        }
+
+        .menu-item-arrow {
+          margin-left: 12px;
+          font-size: 10px;
+          color: #666;
+        }
+
+        .menu-separator {
+          height: 1px;
+          background: #e0e0e0;
+          margin: 4px 8px;
+        }
+
+        .submenu {
+          display: none;
+          position: fixed;
+          background: white;
+          border: 1px solid #ccc;
+          border-radius: 6px;
+          box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+          min-width: 180px;
+          z-index: 10001;
+        }
+      </style>
+      ${this.renderMenuItems(this.menuItems)}
+    `, e;
+  }
+  /**
+   * Attach event listeners to menu items
+   */
+  attachMenuListeners(e, t) {
+    e.querySelectorAll(".menu-item:not(.has-submenu)").forEach((r, a) => {
+      let l = 0;
+      const s = ((u) => {
+        for (const c of u)
+          if (c.label !== "---sep" && !(c.items && c.items.length > 0)) {
+            if (l === a) return c;
+            l++;
+          }
+        return null;
+      })(t);
+      s && s.onclick && r.addEventListener("click", (u) => {
+        u.stopPropagation(), s.onclick(), this.hideMenu();
+      });
+    });
+    const n = this.getBoundingClientRect();
+    e.querySelectorAll(".menu-item.has-submenu").forEach((r) => {
+      r.addEventListener("mouseenter", () => {
+        const a = r.querySelector(".submenu");
+        if (a) {
+          const l = r.getBoundingClientRect(), p = a.getBoundingClientRect();
+          let s = l.right + 5, u = l.top;
+          s + p.width > n.right && (s = l.left - p.width - 5, s < n.left && (s = n.left)), u + p.height > n.bottom && (u = n.bottom - p.height, u < n.top && (u = n.top)), a.style.left = `${s}px`, a.style.top = `${u}px`;
+        }
+      });
+    });
+  }
+  /**
+   * Update menu button position
+   */
+  updateMenuButtonPosition() {
+    this.menuButton && (this.menuButton.className = `menu-button ${this.menuPosition} ${this.alwaysShowMenu ? "always-visible" : ""}`);
+  }
+  /**
+   * Update menu button visibility
+   */
+  updateMenuButtonVisibility() {
+    this.menuButton && (this.alwaysShowMenu ? this.menuButton.classList.add("always-visible") : this.menuButton.classList.remove("always-visible"));
+  }
+  /**
+   * Setup event listeners
+   */
+  setupEventListeners() {
+    this.menuButton && this.menuButton.addEventListener("click", this.handleMenuButtonClick.bind(this));
+    const e = this.shadowRoot.querySelector(".content-wrapper");
+    e && e.addEventListener("click", this.handleContentClick.bind(this));
+  }
+  /**
+   * Cleanup event listeners
+   */
+  cleanupEventListeners() {
+    this.menuButton && this.menuButton.removeEventListener("click", this.handleMenuButtonClick.bind(this));
+    const e = this.shadowRoot.querySelector(".content-wrapper");
+    e && e.removeEventListener("click", this.handleContentClick.bind(this));
+  }
+  /**
+   * Handle menu button click
+   */
+  handleMenuButtonClick(e) {
+    e.stopPropagation(), this.menuButton && (this.popoverMenu ? this.hideMenu() : this.showMenu());
+  }
+  /**
+   * Show the menu
+   */
+  showMenu() {
+    if (!this.menuButton || this.menuItems.length === 0) return;
+    this.popoverMenu && this.popoverMenu.remove(), this.popoverMenu = this.createAndShowPopover(), document.body.appendChild(this.popoverMenu);
+    const e = this.menuButton.getBoundingClientRect(), t = this.getBoundingClientRect();
+    this.popoverMenu.style.left = `${e.left}px`, this.popoverMenu.style.top = `${e.bottom + 4}px`, requestAnimationFrame(() => {
+      const o = this.popoverMenu.getBoundingClientRect();
+      let n = e.left, i = e.bottom + 4;
+      n + o.width > t.right && (n = t.right - o.width, n < t.left && (n = t.left)), n < t.left && (n = t.left), i + o.height > t.bottom && (i = e.top - o.height - 4, i < t.top && (i = t.top)), i < t.top && (i = t.top), this.popoverMenu.style.left = `${n}px`, this.popoverMenu.style.top = `${i}px`;
+    }), this.attachMenuListeners(this.popoverMenu, this.menuItems), setTimeout(() => {
+      document.addEventListener("click", this.handleDocumentClick.bind(this), { once: !0 });
+    }, 0);
+  }
+  /**
+   * Hide the menu
+   */
+  hideMenu() {
+    this.popoverMenu && (this.popoverMenu.remove(), this.popoverMenu = null);
+  }
+  /**
+   * Handle document click to close menu
+   */
+  handleDocumentClick(e) {
+    const t = e.target, o = this.popoverMenu;
+    o && !o.contains(t) && !this.menuButton?.contains(t) && this.hideMenu();
+  }
+  /**
+   * Handle content click - pass through to slotted elements
+   */
+  handleContentClick(e) {
+    const t = this.shadowRoot.querySelector("slot");
+    !t || t.assignedElements().length === 0 || e.stopPropagation();
+  }
+}
+const d = (h = "liwe3-container-box") => {
+  typeof window < "u" && !window.customElements.get(h) && customElements.define(h, m);
+};
+d();
+export {
+  m as ContainerBoxElement,
+  d as defineContainerBox
+};
+//# sourceMappingURL=ContainerBox.js.map

package/dist/ContainerBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContainerBox.js","sources":["../src/ContainerBox.ts"],"sourcesContent":["/**\n * ContainerBox Web Component\n * A container that wraps elements and shows a menu on hover\n */\n\nimport type { PopoverMenuItem } from './PopoverMenu';\n\nexport type MenuPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';\n\nexport type ContainerBoxConfig = {\n  menuPosition?: MenuPosition;\n  menuItems?: PopoverMenuItem[];\n  alwaysShowMenu?: boolean;\n};\n\nexport class ContainerBoxElement extends HTMLElement {\n  declare shadowRoot: ShadowRoot;\n  private menuPosition: MenuPosition = 'bottom-left';\n  private menuItems: PopoverMenuItem[] = [];\n  private alwaysShowMenu: boolean = false;\n  private popoverMenu: HTMLElement | null = null;\n  private menuButton: HTMLElement | null = null;\n\n  constructor() {\n    super();\n    this.attachShadow({ mode: 'open' });\n  }\n\n  connectedCallback(): void {\n    this.render();\n    this.setupEventListeners();\n  }\n\n  disconnectedCallback(): void {\n    this.cleanupEventListeners();\n  }\n\n  /**\n   * Set menu position\n   */\n  setMenuPosition(position: MenuPosition): void {\n    this.menuPosition = position;\n    this.updateMenuButtonPosition();\n  }\n\n  /**\n   * Get menu position\n   */\n  getMenuPosition(): MenuPosition {\n    return this.menuPosition;\n  }\n\n  /**\n   * Set menu items\n   */\n  setMenuItems(items: PopoverMenuItem[]): void {\n    this.menuItems = items;\n    this.updatePopoverMenu();\n  }\n\n  /**\n   * Get menu items\n   */\n  getMenuItems(): PopoverMenuItem[] {\n    return this.menuItems;\n  }\n\n  /**\n   * Set whether menu button is always visible\n   */\n  setAlwaysShowMenu(value: boolean): void {\n    this.alwaysShowMenu = value;\n    this.updateMenuButtonVisibility();\n  }\n\n  /**\n   * Get whether menu button is always visible\n   */\n  getAlwaysShowMenu(): boolean {\n    return this.alwaysShowMenu;\n  }\n\n  /**\n   * Render the component\n   */\n  private render(): void {\n    this.shadowRoot.innerHTML = `\n      <style>\n        :host {\n          display: block;\n          position: relative;\n          font-family: var(--font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);\n        }\n\n        .container-box {\n          position: relative;\n          width: 100%;\n          height: 100%;\n        }\n\n        .content-wrapper {\n          width: 100%;\n          height: 100%;\n        }\n\n        .menu-button {\n          position: absolute;\n          background: var(--container-box-menu-bg, #fff);\n          border: 1px solid var(--container-box-menu-border, #ddd);\n          border-radius: var(--container-box-menu-radius, 4px);\n          padding: var(--container-box-menu-padding, 6px 10px);\n          cursor: pointer;\n          box-shadow: var(--container-box-menu-shadow, 0 2px 8px rgba(0,0,0,0.15));\n          z-index: 10;\n          opacity: 0;\n          transition: opacity 0.2s;\n          display: flex;\n          align-items: center;\n          gap: 4px;\n          font-size: 14px;\n          color: var(--container-box-menu-color, #333);\n        }\n\n        .menu-button:hover {\n          background: var(--container-box-menu-hover-bg, #f5f5f5);\n        }\n\n        .container-box:hover .menu-button {\n          opacity: 1;\n        }\n\n        .menu-button.always-visible {\n          opacity: 1;\n        }\n\n        .menu-button-icon {\n          width: 16px;\n          height: 16px;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n\n        /* Position variants */\n        .menu-button.top-left {\n          top: var(--container-box-menu-offset, 8px);\n          left: var(--container-box-menu-offset, 8px);\n        }\n\n        .menu-button.top-right {\n          top: var(--container-box-menu-offset, 8px);\n          right: var(--container-box-menu-offset, 8px);\n        }\n\n        .menu-button.bottom-left {\n          bottom: var(--container-box-menu-offset, 8px);\n          left: var(--container-box-menu-offset, 8px);\n        }\n\n        .menu-button.bottom-right {\n          bottom: var(--container-box-menu-offset, 8px);\n          right: var(--container-box-menu-offset, 8px);\n        }\n\n        .popover-container {\n          position: fixed;\n          z-index: 10000;\n          pointer-events: none;\n        }\n\n        .popover-container > * {\n          pointer-events: auto;\n        }\n      </style>\n\n      <div class=\"container-box\">\n        <div class=\"content-wrapper\">\n          <slot></slot>\n        </div>\n        <div class=\"menu-button ${this.menuPosition} ${this.alwaysShowMenu ? 'always-visible' : ''}\">\n          <span class=\"menu-button-icon\">⋮</span>\n        </div>\n      </div>\n      <div class=\"popover-container\"></div>\n    `;\n\n    this.menuButton = this.shadowRoot.querySelector('.menu-button');\n    this.createPopoverMenu();\n  }\n\n  /**\n   * Create the popover menu\n   */\n  private createPopoverMenu(): void {\n    // We'll create the popover dynamically when needed\n  }\n\n  /**\n   * Update popover menu items\n   */\n  private updatePopoverMenu(): void {\n    // Menu items are stored and used when showing the menu\n  }\n\n  /**\n   * Render menu items recursively\n   */\n  private renderMenuItems(items: PopoverMenuItem[]): string {\n    return items.map(item => {\n      if (item.label === '---sep') {\n        return '<div class=\"menu-separator\"></div>';\n      }\n\n      const hasSubmenu = item.items && item.items.length > 0;\n      const isDisabled = item.enabled === false;\n      const disabledClass = isDisabled ? 'disabled' : '';\n      const submenuClass = hasSubmenu ? 'has-submenu' : '';\n\n      return `\n        <div class=\"menu-item ${disabledClass} ${submenuClass}\" data-has-submenu=\"${hasSubmenu}\">\n          <span class=\"menu-item-label\">${item.label}</span>\n          ${hasSubmenu ? '<span class=\"menu-item-arrow\">▶</span>' : ''}\n          ${hasSubmenu ? `<div class=\"submenu\">${this.renderMenuItems(item.items!)}</div>` : ''}\n        </div>\n      `;\n    }).join('');\n  }\n\n  /**\n   * Create and show the popover menu\n   */\n  private createAndShowPopover(): HTMLElement {\n    const popover = document.createElement('div');\n    popover.className = 'custom-popover-menu';\n    popover.innerHTML = `\n      <style>\n        .custom-popover-menu {\n          position: fixed;\n          background: white;\n          border: 1px solid #ccc;\n          border-radius: 6px;\n          box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n          min-width: 180px;\n          z-index: 10000;\n        }\n\n        .menu-item {\n          padding: 10px 16px;\n          cursor: pointer;\n          display: flex;\n          align-items: center;\n          justify-content: space-between;\n          transition: background-color 0.2s;\n          position: relative;\n          font-size: 14px;\n          color: #333;\n        }\n\n        .menu-item:hover {\n          background: #f5f5f5;\n        }\n\n        .menu-item.disabled {\n          opacity: 0.5;\n          cursor: not-allowed;\n          pointer-events: none;\n        }\n\n        .menu-item.has-submenu:hover .submenu {\n          display: block;\n        }\n\n        .menu-item-label {\n          flex: 1;\n        }\n\n        .menu-item-arrow {\n          margin-left: 12px;\n          font-size: 10px;\n          color: #666;\n        }\n\n        .menu-separator {\n          height: 1px;\n          background: #e0e0e0;\n          margin: 4px 8px;\n        }\n\n        .submenu {\n          display: none;\n          position: fixed;\n          background: white;\n          border: 1px solid #ccc;\n          border-radius: 6px;\n          box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n          min-width: 180px;\n          z-index: 10001;\n        }\n      </style>\n      ${this.renderMenuItems(this.menuItems)}\n    `;\n\n    return popover;\n  }\n\n  /**\n   * Attach event listeners to menu items\n   */\n  private attachMenuListeners(popover: HTMLElement, items: PopoverMenuItem[]): void {\n    const menuItems = popover.querySelectorAll('.menu-item:not(.has-submenu)');\n    \n    menuItems.forEach((element, index) => {\n      let flatIndex = 0;\n      const findItem = (items: PopoverMenuItem[]): PopoverMenuItem | null => {\n        for (const item of items) {\n          if (item.label === '---sep') continue;\n          if (!(item.items && item.items.length > 0)) {\n            if (flatIndex === index) return item;\n            flatIndex++;\n          }\n        }\n        return null;\n      };\n\n      const item = findItem(items);\n      if (item && item.onclick) {\n        element.addEventListener('click', (e) => {\n          e.stopPropagation();\n          item.onclick!();\n          this.hideMenu();\n        });\n      }\n    });\n\n    // Handle submenu positioning within container boundaries\n    const containerRect = this.getBoundingClientRect();\n    const submenuItems = popover.querySelectorAll('.menu-item.has-submenu');\n    \n    submenuItems.forEach(element => {\n      element.addEventListener('mouseenter', () => {\n        const submenu = element.querySelector('.submenu') as HTMLElement;\n        if (submenu) {\n          const rect = element.getBoundingClientRect();\n          const submenuRect = submenu.getBoundingClientRect();\n          \n          let left = rect.right + 5;\n          let top = rect.top;\n          \n          // Check if submenu would overflow container on the right\n          if (left + submenuRect.width > containerRect.right) {\n            // Try positioning to the left of the parent item\n            left = rect.left - submenuRect.width - 5;\n            \n            // If still overflowing left, position at container left edge\n            if (left < containerRect.left) {\n              left = containerRect.left;\n            }\n          }\n          \n          // Check if submenu would overflow container at the bottom\n          if (top + submenuRect.height > containerRect.bottom) {\n            // Align bottom of submenu with bottom of container\n            top = containerRect.bottom - submenuRect.height;\n            \n            // If still overflowing at top, position at container top\n            if (top < containerRect.top) {\n              top = containerRect.top;\n            }\n          }\n          \n          submenu.style.left = `${left}px`;\n          submenu.style.top = `${top}px`;\n        }\n      });\n    });\n  }\n\n  /**\n   * Update menu button position\n   */\n  private updateMenuButtonPosition(): void {\n    if (!this.menuButton) return;\n\n    this.menuButton.className = `menu-button ${this.menuPosition} ${this.alwaysShowMenu ? 'always-visible' : ''}`;\n  }\n\n  /**\n   * Update menu button visibility\n   */\n  private updateMenuButtonVisibility(): void {\n    if (!this.menuButton) return;\n\n    if (this.alwaysShowMenu) {\n      this.menuButton.classList.add('always-visible');\n    } else {\n      this.menuButton.classList.remove('always-visible');\n    }\n  }\n\n  /**\n   * Setup event listeners\n   */\n  private setupEventListeners(): void {\n    if (this.menuButton) {\n      this.menuButton.addEventListener('click', this.handleMenuButtonClick.bind(this));\n    }\n\n    // Allow clicks to pass through to slotted content\n    const contentWrapper = this.shadowRoot.querySelector('.content-wrapper');\n    if (contentWrapper) {\n      contentWrapper.addEventListener('click', this.handleContentClick.bind(this));\n    }\n  }\n\n  /**\n   * Cleanup event listeners\n   */\n  private cleanupEventListeners(): void {\n    if (this.menuButton) {\n      this.menuButton.removeEventListener('click', this.handleMenuButtonClick.bind(this));\n    }\n\n    const contentWrapper = this.shadowRoot.querySelector('.content-wrapper');\n    if (contentWrapper) {\n      contentWrapper.removeEventListener('click', this.handleContentClick.bind(this));\n    }\n  }\n\n  /**\n   * Handle menu button click\n   */\n  private handleMenuButtonClick(e: Event): void {\n    e.stopPropagation();\n\n    if (!this.menuButton) return;\n\n    // Toggle menu visibility\n    if (this.popoverMenu) {\n      this.hideMenu();\n    } else {\n      this.showMenu();\n    }\n  }\n\n  /**\n   * Show the menu\n   */\n  private showMenu(): void {\n    if (!this.menuButton || this.menuItems.length === 0) return;\n\n    // Create the popover\n    if (this.popoverMenu) {\n      this.popoverMenu.remove();\n    }\n\n    this.popoverMenu = this.createAndShowPopover() as any;\n    document.body.appendChild(this.popoverMenu as any);\n\n    // Get button and container bounds\n    const buttonRect = this.menuButton.getBoundingClientRect();\n    const containerRect = this.getBoundingClientRect();\n    \n    // Temporarily position to measure\n    (this.popoverMenu as any).style.left = `${buttonRect.left}px`;\n    (this.popoverMenu as any).style.top = `${buttonRect.bottom + 4}px`;\n    \n    // Wait for next frame to get accurate measurements\n    requestAnimationFrame(() => {\n      const menuRect = (this.popoverMenu as any).getBoundingClientRect();\n      \n      let left = buttonRect.left;\n      let top = buttonRect.bottom + 4;\n      \n      // Check if menu would overflow container on the right\n      if (left + menuRect.width > containerRect.right) {\n        // Try to align right edge of menu with right edge of container\n        left = containerRect.right - menuRect.width;\n        \n        // If still overflowing left, align with left edge of container\n        if (left < containerRect.left) {\n          left = containerRect.left;\n        }\n      }\n      \n      // Check if menu would overflow container on the left\n      if (left < containerRect.left) {\n        left = containerRect.left;\n      }\n      \n      // Check if menu would overflow container at the bottom\n      if (top + menuRect.height > containerRect.bottom) {\n        // Try positioning above the button\n        top = buttonRect.top - menuRect.height - 4;\n        \n        // If still overflowing at top, position at container top\n        if (top < containerRect.top) {\n          top = containerRect.top;\n        }\n      }\n      \n      // Check if menu would overflow container at the top\n      if (top < containerRect.top) {\n        top = containerRect.top;\n      }\n      \n      // Apply final position\n      (this.popoverMenu as any).style.left = `${left}px`;\n      (this.popoverMenu as any).style.top = `${top}px`;\n    });\n\n    // Attach event listeners\n    this.attachMenuListeners(this.popoverMenu as any, this.menuItems);\n\n    // Add click listener to close menu when clicking outside\n    setTimeout(() => {\n      document.addEventListener('click', this.handleDocumentClick.bind(this), { once: true });\n    }, 0);\n  }\n\n  /**\n   * Hide the menu\n   */\n  private hideMenu(): void {\n    if (this.popoverMenu) {\n      (this.popoverMenu as any).remove();\n      this.popoverMenu = null;\n    }\n  }\n\n  /**\n   * Handle document click to close menu\n   */\n  private handleDocumentClick(e: Event): void {\n    const target = e.target as Node;\n    const popoverElement = this.popoverMenu as any;\n    if (popoverElement && !popoverElement.contains(target) && !this.menuButton?.contains(target)) {\n      this.hideMenu();\n    }\n  }\n\n  /**\n   * Handle content click - pass through to slotted elements\n   */\n  private handleContentClick(e: Event): void {\n    // Get the slotted elements\n    const slot = this.shadowRoot.querySelector('slot');\n    if (!slot) return;\n\n    const assignedElements = slot.assignedElements();\n    if (assignedElements.length === 0) return;\n\n    // The click naturally propagates to slotted content\n    // We just need to ensure it doesn't trigger the menu\n    e.stopPropagation();\n  }\n}\n\n/**\n * Conditionally defines the custom element if in a browser environment.\n */\nconst defineContainerBox = (tagName = 'liwe3-container-box'): void => {\n  if (typeof window !== 'undefined' && !window.customElements.get(tagName)) {\n    customElements.define(tagName, ContainerBoxElement);\n  }\n};\n\n// Auto-register with default tag name\ndefineContainerBox();\n\nexport { defineContainerBox };\n"],"names":["ContainerBoxElement","position","items","value","item","hasSubmenu","popover","element","index","flatIndex","e","containerRect","submenu","rect","submenuRect","left","top","contentWrapper","buttonRect","menuRect","target","popoverElement","slot","defineContainerBox","tagName"],"mappings":"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"}

package/dist/DateSelector.d.ts

@@ -0,0 +1,103 @@
+/**
+ * DateSelector Web Component
+ * A customizable date picker with single date and range selection modes
+ */
+export type DateRange = {
+    start: string | null;
+    end: string | null;
+};
+export declare class DateSelectorElement extends HTMLElement {
+    shadowRoot: ShadowRoot;
+    private currentDate;
+    private selectedDate;
+    private selectedRange;
+    private readonly MONTH_NAMES;
+    private readonly DAY_NAMES;
+    constructor();
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string): void;
+    get rangeMode(): boolean;
+    set rangeMode(value: boolean);
+    /**
+     * Renders the date selector component
+     */
+    private render;
+    /**
+     * Generates year options for the dropdown (current year ±10 years)
+     */
+    private generateYearOptions;
+    /**
+     * Generates the calendar grid with day headers and day cells
+     */
+    private generateCalendarGrid;
+    /**
+     * Checks if two date strings match
+     */
+    private dateMatches;
+    /**
+     * Checks if a date is within the selected range
+     */
+    private isDateInRange;
+    /**
+     * Attaches main event listeners (called once during construction)
+     */
+    private attachEventListeners;
+    /**
+     * Called after each render to setup any post-render event listeners
+     */
+    private attachEventListenersToShadowRoot;
+    /**
+     * Navigates to the previous or next month
+     */
+    private navigateMonth;
+    /**
+     * Navigates to a specific year
+     */
+    private navigateToYear;
+    /**
+     * Handles click on a day cell
+     */
+    private handleDayClick;
+    /**
+     * Handles single date selection
+     */
+    private handleSingleSelection;
+    /**
+     * Handles range selection
+     */
+    private handleRangeSelection;
+    /**
+     * Updates hover effect when selecting a range
+     */
+    private updateRangeHover;
+    /**
+     * Clears the hover effect for range selection
+     */
+    private clearRangeHover;
+    /**
+     * Sets the selected date programmatically (single date mode only)
+     */
+    setDate(dateStr: string): void;
+    /**
+     * Sets the selected range programmatically (range mode only)
+     */
+    setRange(startDate: string, endDate: string): void;
+    /**
+     * Gets the currently selected date
+     */
+    getSelectedDate(): string | null;
+    /**
+     * Gets the currently selected range
+     */
+    getSelectedRange(): DateRange;
+    /**
+     * Clears the current selection
+     */
+    clear(): void;
+}
+/**
+ * Conditionally defines the custom element if in a browser environment.
+ */
+declare const defineDateSelector: (tagName?: string) => void;
+export { defineDateSelector };
+//# sourceMappingURL=DateSelector.d.ts.map

package/dist/DateSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateSelector.d.ts","sourceRoot":"","sources":["../src/DateSelector.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;CACpB,CAAC;AAEF,qBAAa,mBAAoB,SAAQ,WAAW;IAC1C,UAAU,EAAE,UAAU,CAAC;IAC/B,OAAO,CAAC,WAAW,CAAoB;IACvC,OAAO,CAAC,YAAY,CAAuB;IAC3C,OAAO,CAAC,aAAa,CAAyC;IAG9D,OAAO,CAAC,QAAQ,CAAC,WAAW,CAG1B;IAEF,OAAO,CAAC,QAAQ,CAAC,SAAS,CAA+D;;IASzF,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAQ5C,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAM3B;IAED;;OAEG;IACH,OAAO,CAAC,MAAM;IAsKd;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAa3B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAkE5B;;OAEG;IACH,OAAO,CAAC,WAAW;IAInB;;OAEG;IACH,OAAO,CAAC,aAAa;IAUrB;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAoC5B;;OAEG;IACH,OAAO,CAAC,gCAAgC;IAKxC;;OAEG;IACH,OAAO,CAAC,aAAa;IAiBrB;;OAEG;IACH,OAAO,CAAC,cAAc;IAKtB;;OAEG;IACH,OAAO,CAAC,cAAc;IAYtB;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAU7B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IA2B5B;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAgBxB;;OAEG;IACH,OAAO,CAAC,eAAe;IAOvB;;OAEG;IACI,OAAO,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAQrC;;OAEG;IACI,QAAQ,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI;IAQzD;;OAEG;IACI,eAAe,IAAI,MAAM,GAAG,IAAI;IAIvC;;OAEG;IACI,gBAAgB,IAAI,SAAS;IAIpC;;OAEG;IACI,KAAK,IAAI,IAAI;CAKrB;AAED;;GAEG;AACH,QAAA,MAAM,kBAAkB,GAAI,UAAS,MAA8B,KAAG,IAIrE,CAAC;AAKF,OAAO,EAAE,kBAAkB,EAAE,CAAC"}