@liwe3/webcomponents 1.0.14 → 1.1.10

package/dist/Dialog.d.ts

@@ -0,0 +1,102 @@
+/**
+ * Dialog Web Component
+ * A customizable dialog with HTML body, custom buttons, and modal support
+ */
+export type DialogButton = {
+    label: string;
+    backgroundColor?: string;
+    onclick: (dialog?: DialogElement) => void;
+};
+export type DialogConfig = {
+    title?: string;
+    body: string;
+    buttons?: DialogButton[];
+    modal?: boolean;
+    escToClose?: boolean;
+    clickToClose?: boolean;
+    fxAppear?: 'none' | 'fade' | 'slide';
+    fxSpeed?: number;
+    onclose?: () => void;
+};
+export declare class DialogElement extends HTMLElement {
+    shadowRoot: ShadowRoot;
+    private config;
+    private backdrop?;
+    private escKeyHandler?;
+    private eventsBound;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Shows the dialog with the given configuration
+     */
+    show(config: DialogConfig): void;
+    /**
+     * Closes the dialog
+     */
+    close(): void;
+    /**
+     * Creates the modal backdrop
+     */
+    private createBackdrop;
+    /**
+     * Sets up keyboard event listeners
+     */
+    private setupKeyboardListeners;
+    /**
+     * Removes keyboard event listeners
+     */
+    private removeKeyboardListeners;
+    /**
+     * Binds all event listeners
+     */
+    private bindEvents;
+    /**
+     * Renders the component
+     */
+    private render;
+}
+/**
+ * Conditionally defines the custom element if in a browser environment.
+ */
+declare const defineDialog: (tagName?: string) => void;
+/**
+ * Shows a dialog with the given configuration.
+ * This is the recommended way to display dialogs.
+ *
+ * @param config - The dialog configuration
+ * @returns The dialog element instance
+ *
+ * @example
+ * ```typescript
+ * import { dialogAdd } from '@liwe3/webcomponents';
+ *
+ * dialogAdd({
+ *   title: 'Delete File',
+ *   body: '<p>Are you sure you want to delete this file? This action cannot be undone.</p>',
+ *   buttons: [
+ *     {
+ *       label: 'Delete',
+ *       backgroundColor: '#dc3545',
+ *       onclick: (dialog) => {
+ *         console.log('File deleted');
+ *         dialog.close();
+ *       }
+ *     },
+ *     {
+ *       label: 'Cancel',
+ *       onclick: (dialog) => {
+ *         console.log('Cancelled');
+ *         dialog.close();
+ *       }
+ *     }
+ *   ],
+ *   modal: true,
+ *   escToClose: true,
+ *   clickToClose: true
+ * });
+ * ```
+ */
+declare const dialogAdd: (config: DialogConfig) => DialogElement;
+export { defineDialog, dialogAdd };
+//# sourceMappingURL=Dialog.d.ts.map

package/dist/Dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../src/Dialog.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,MAAM,YAAY,GAAG;IAC1B,KAAK,EAAG,MAAM,CAAC;IACf,eAAe,CAAC,EAAG,MAAM,CAAC;IAC1B,OAAO,EAAG,CAAE,MAAM,CAAC,EAAG,aAAa,KAAM,IAAI,CAAC;CAC9C,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IAC1B,KAAK,CAAC,EAAG,MAAM,CAAC;IAChB,IAAI,EAAG,MAAM,CAAC;IACd,OAAO,CAAC,EAAG,YAAY,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAG,OAAO,CAAC;IACjB,UAAU,CAAC,EAAG,OAAO,CAAC;IACtB,YAAY,CAAC,EAAG,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IACtC,OAAO,CAAC,EAAG,MAAM,CAAC;IAClB,OAAO,CAAC,EAAG,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,qBAAa,aAAc,SAAQ,WAAW;IACrC,UAAU,EAAG,UAAU,CAAC;IAChC,OAAO,CAAC,MAAM,CAQZ;IACF,OAAO,CAAC,QAAQ,CAAC,CAAe;IAChC,OAAO,CAAC,aAAa,CAAC,CAAiC;IACvD,OAAO,CAAC,WAAW,CAAmB;;IAOtC,iBAAiB,IAAM,IAAI;IAK3B,oBAAoB,IAAM,IAAI;IAO9B;;OAEG;IACH,IAAI,CAAG,MAAM,EAAG,YAAY,GAAK,IAAI;IAyBrC;;OAEG;IACH,KAAK,IAAM,IAAI;IAyBf;;OAEG;IACH,OAAO,CAAC,cAAc;IA2BtB;;OAEG;IACH,OAAO,CAAC,sBAAsB;IAW9B;;OAEG;IACH,OAAO,CAAC,uBAAuB;IAO/B;;OAEG;IACH,OAAO,CAAC,UAAU;IA+BlB;;OAEG;IACH,OAAO,CAAC,MAAM;CAyNd;AAED;;GAEG;AACH,QAAA,MAAM,YAAY,GAAK,UAAU,MAAuB,KAAK,IAI5D,CAAC;AA4BF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,QAAA,MAAM,SAAS,GAAK,QAAS,YAAY,KAAK,aAc7C,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC"}

package/dist/Dialog.js

@@ -0,0 +1,299 @@
+class g extends HTMLElement {
+  constructor() {
+    super(), this.config = {
+      title: "Dialog",
+      body: "",
+      modal: !0,
+      escToClose: !0,
+      clickToClose: !0,
+      fxAppear: "none",
+      fxSpeed: 1e3
+    }, this.eventsBound = !1, this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render(), this.setupKeyboardListeners();
+  }
+  disconnectedCallback() {
+    this.removeKeyboardListeners(), this.backdrop && this.backdrop.remove();
+  }
+  /**
+   * Shows the dialog with the given configuration
+   */
+  show(t) {
+    this.config = { ...this.config, ...t }, this.render(), this.setupKeyboardListeners(), this.config.modal && this.createBackdrop(), requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        const o = this.shadowRoot.querySelector(".dialog-container");
+        o && o.classList.add("show"), this.backdrop && (this.backdrop.style.opacity = "1");
+      });
+    });
+  }
+  /**
+   * Closes the dialog
+   */
+  close() {
+    const t = this.shadowRoot.querySelector(".dialog-container");
+    t && t.classList.add("closing"), this.backdrop && (this.backdrop.remove(), this.backdrop = void 0);
+    const o = this.config.fxAppear === "none" ? 0 : this.config.fxSpeed || 1e3;
+    setTimeout(() => {
+      this.removeKeyboardListeners(), this.dispatchEvent(new CustomEvent("close")), this.config.onclose && this.config.onclose(), this.remove();
+    }, o);
+  }
+  /**
+   * Creates the modal backdrop
+   */
+  createBackdrop() {
+    this.backdrop || (this.backdrop = document.createElement("div"), this.backdrop.className = "dialog-backdrop", this.backdrop.style.position = "fixed", this.backdrop.style.top = "0", this.backdrop.style.left = "0", this.backdrop.style.width = "100%", this.backdrop.style.height = "100%", this.backdrop.style.backgroundColor = "rgba(0, 0, 0, 0.6)", this.backdrop.style.backdropFilter = "blur(4px)", this.backdrop.style.webkitBackdropFilter = "blur(4px)", this.backdrop.style.zIndex = "99998", this.backdrop.style.opacity = "0", this.backdrop.style.transition = "opacity 0.3s ease", this.config.clickToClose && this.backdrop.addEventListener("click", () => {
+      this.close();
+    }), document.body.appendChild(this.backdrop));
+  }
+  /**
+   * Sets up keyboard event listeners
+   */
+  setupKeyboardListeners() {
+    this.config.escToClose && (this.escKeyHandler = (t) => {
+      t.key === "Escape" && this.close();
+    }, document.addEventListener("keydown", this.escKeyHandler));
+  }
+  /**
+   * Removes keyboard event listeners
+   */
+  removeKeyboardListeners() {
+    this.escKeyHandler && (document.removeEventListener("keydown", this.escKeyHandler), this.escKeyHandler = void 0);
+  }
+  /**
+   * Binds all event listeners
+   */
+  bindEvents() {
+    if (this.eventsBound) return;
+    this.eventsBound = !0, this.shadowRoot.addEventListener("click", (o) => {
+      const n = o.target;
+      if (n.closest(".close-button"))
+        this.close();
+      else if (n.closest(".dialog-button")) {
+        const i = n.closest(".dialog-button").dataset.index;
+        if (i !== void 0) {
+          const r = this.config.buttons?.[parseInt(i, 10)];
+          r && r.onclick && r.onclick(this);
+        }
+      }
+    });
+    const t = this.shadowRoot.querySelector(".dialog-container");
+    t && t.addEventListener("wheel", (o) => {
+      o.stopPropagation();
+    }, { passive: !0 });
+  }
+  /**
+   * Renders the component
+   */
+  render() {
+    const t = this.config.title || "Dialog", o = this.config.buttons || [], i = `${this.config.fxSpeed || 1e3}ms`, r = this.config.fxAppear === "fade" ? "fx-fade" : this.config.fxAppear === "slide" ? "fx-slide" : "", a = o.length > 1 ? o[0] : null, c = o.length === 1 ? o : o.slice(1);
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          font-family: var(--font-family, var(--liwe3-font-family, Ubuntu, sans-serif));
+          font-size: var(--font-size, 14px);
+        }
+
+        .dialog-container {
+          position: fixed;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          min-width: 400px;
+          max-width: 600px;
+          max-height: 80vh;
+          background: var(--dialog-background, var(--liwe3-surface-raised, white));
+          border-radius: var(--dialog-border-radius, var(--liwe3-border-radius, 8px));
+          box-shadow: var(--dialog-shadow, 0 10px 40px rgba(0, 0, 0, 0.2));
+          z-index: 99999;
+          display: flex;
+          flex-direction: column;
+          opacity: 1;
+          font-family: var(--font-family, var(--liwe3-font-family, Ubuntu, sans-serif));
+        }
+
+        /* Fade animation */
+        .dialog-container.fx-fade {
+          opacity: 0;
+          transition: opacity ${i} ease;
+        }
+
+        .dialog-container.fx-fade.show {
+          opacity: 1;
+        }
+
+        .dialog-container.fx-fade.closing {
+          opacity: 0;
+        }
+
+        /* Slide animation */
+        .dialog-container.fx-slide {
+          transform: translate(-50%, -100%);
+          opacity: 0;
+          transition: transform ${i} cubic-bezier(0.16, 1, 0.3, 1), opacity ${i} ease;
+        }
+
+        .dialog-container.fx-slide.show {
+          transform: translate(-50%, -50%);
+          opacity: 1;
+        }
+
+        .dialog-container.fx-slide.closing {
+          transform: translate(-50%, -100%);
+          opacity: 0;
+        }
+
+        .dialog-header {
+          padding: 0;
+          border-bottom: none;
+          flex-shrink: 0;
+        }
+
+        .dialog-title {
+          margin: 0;
+          padding: 20px 24px;
+          font-size: 20px;
+          font-weight: 600;
+          color: var(--dialog-title-color, var(--liwe3-text-inverse, white));
+          background: var(--dialog-title-background, linear-gradient(135deg,
+            var(--liwe3-mode1-500, #667eea),
+            var(--liwe3-mode4-500, #9f7aea)
+          ));
+          border-bottom: 1px solid var(--dialog-border-color, var(--liwe3-border-default, #e0e0e0));
+        }
+
+        .dialog-body {
+          padding: 24px;
+          overflow-y: auto;
+          flex: 1;
+          color: var(--dialog-text-color, var(--liwe3-text-mode2, #555));
+          line-height: 1.6;
+        }
+
+        .dialog-footer {
+          padding: 16px 24px;
+          border-top: 1px solid var(--dialog-border-color, var(--liwe3-border-default, #e0e0e0));
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          gap: 12px;
+          flex-shrink: 0;
+          background: var(--dialog-background, var(--liwe3-surface-raised, white));
+        }
+
+        .footer-left {
+          display: flex;
+          gap: 12px;
+        }
+
+        .footer-right {
+          display: flex;
+          gap: 12px;
+          margin-left: auto;
+        }
+
+        .dialog-button {
+          padding: 8px 20px;
+          border: 1px solid var(--dialog-button-border-color, var(--liwe3-border-default, #ccc));
+          border-radius: var(--dialog-button-border-radius, var(--liwe3-border-radius, 4px));
+          background: var(--dialog-button-background, var(--liwe3-surface-raised, white));
+          color: var(--dialog-button-color, var(--liwe3-text-mode1, #333));
+          font-size: 14px;
+          cursor: pointer;
+          transition: all 0.2s;
+          font-family: inherit;
+          font-weight: 500;
+        }
+
+        .dialog-button:hover {
+          background-color: var(--dialog-button-hover-background, var(--liwe3-hover-overlay, #f8f9fa));
+          border-color: var(--dialog-button-hover-border-color, var(--liwe3-border-strong, #999));
+        }
+
+        .dialog-button:active {
+          background-color: var(--dialog-button-active-background, var(--liwe3-active-overlay, #e9ecef));
+        }
+
+        .close-button {
+          padding: 8px 20px;
+          border: 1px solid var(--dialog-close-border-color, var(--liwe3-border-default, #ccc));
+          border-radius: var(--dialog-button-border-radius, var(--liwe3-border-radius, 4px));
+          background: var(--dialog-close-background, var(--liwe3-surface-raised, white));
+          color: var(--dialog-close-color, var(--liwe3-text-mode1, #333));
+          font-size: 14px;
+          cursor: pointer;
+          transition: all 0.2s;
+          font-family: inherit;
+          font-weight: 500;
+        }
+
+        .close-button:hover {
+          background-color: var(--dialog-close-hover-background, var(--liwe3-hover-overlay, #f8f9fa));
+          border-color: var(--dialog-close-hover-border-color, var(--liwe3-border-strong, #999));
+        }
+
+        @media (max-width: 768px) {
+          .dialog-container {
+            min-width: 90vw;
+            max-width: 90vw;
+          }
+        }
+      </style>
+
+      <div class="dialog-container ${r}">
+        <div class="dialog-header">
+          <h2 class="dialog-title">${t}</h2>
+        </div>
+
+        <div class="dialog-body">
+          ${this.config.body}
+        </div>
+
+        <div class="dialog-footer">
+          ${a ? `
+            <div class="footer-left">
+              <button
+                class="dialog-button"
+                data-index="0"
+                style="${a.backgroundColor ? `background-color: ${a.backgroundColor}; color: white; border-color: ${a.backgroundColor};` : ""}"
+              >
+                ${a.label}
+              </button>
+            </div>
+          ` : ""}
+
+          <div class="footer-right">
+            ${c.map((d, s) => `
+              <button
+                class="dialog-button"
+                data-index="${a ? s + 1 : s}"
+                style="${d.backgroundColor ? `background-color: ${d.backgroundColor}; color: white; border-color: ${d.backgroundColor};` : ""}"
+              >
+                ${d.label}
+              </button>
+            `).join("")}
+            ${o.length === 0 ? '<button class="close-button">Close</button>' : ""}
+          </div>
+        </div>
+      </div>
+    `, this.bindEvents();
+  }
+}
+const b = (e = "liwe3-dialog") => {
+  typeof window < "u" && !window.customElements.get(e) && customElements.define(e, g);
+};
+b();
+const l = "liwe3-dialog-container", f = () => {
+  let e = document.getElementById(l);
+  return e || (e = document.createElement("div"), e.id = l, e.style.position = "fixed", e.style.zIndex = "99999", e.style.pointerEvents = "none", document.body.appendChild(e)), e;
+}, h = (e) => {
+  const t = f(), o = document.createElement("liwe3-dialog");
+  return o.style.pointerEvents = "auto", o.show(e), t.appendChild(o), o;
+};
+export {
+  g as DialogElement,
+  b as defineDialog,
+  h as dialogAdd
+};
+//# sourceMappingURL=Dialog.js.map

package/dist/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sources":["../src/Dialog.ts"],"sourcesContent":["/**\n * Dialog Web Component\n * A customizable dialog with HTML body, custom buttons, and modal support\n */\n\nexport type DialogButton = {\n\tlabel : string;\n\tbackgroundColor? : string;\n\tonclick : ( dialog? : DialogElement ) => void;\n};\n\nexport type DialogConfig = {\n\ttitle? : string; // Default: \"Dialog\"\n\tbody : string; // HTML content\n\tbuttons? : DialogButton[];\n\tmodal? : boolean; // If true, dims background and prevents interaction outside dialog\n\tescToClose? : boolean; // If true, Esc key closes dialog\n\tclickToClose? : boolean; // If true, clicking outside closes dialog (like cancel)\n\tfxAppear? : 'none' | 'fade' | 'slide'; // Animation effect when dialog appears (default: 'none')\n\tfxSpeed? : number; // Animation duration in milliseconds (default: 1000)\n\tonclose? : () => void;\n};\n\nexport class DialogElement extends HTMLElement {\n\tdeclare shadowRoot : ShadowRoot;\n\tprivate config : DialogConfig = {\n\t\ttitle: 'Dialog',\n\t\tbody: '',\n\t\tmodal: true,\n\t\tescToClose: true,\n\t\tclickToClose: true,\n\t\tfxAppear: 'none',\n\t\tfxSpeed: 1000,\n\t};\n\tprivate backdrop? : HTMLElement;\n\tprivate escKeyHandler? : ( e : KeyboardEvent ) => void;\n\tprivate eventsBound : boolean = false;\n\n\tconstructor () {\n\t\tsuper();\n\t\tthis.attachShadow( { mode: 'open' } );\n\t}\n\n\tconnectedCallback () : void {\n\t\tthis.render();\n\t\tthis.setupKeyboardListeners();\n\t}\n\n\tdisconnectedCallback () : void {\n\t\tthis.removeKeyboardListeners();\n\t\tif ( this.backdrop ) {\n\t\t\tthis.backdrop.remove();\n\t\t}\n\t}\n\n\t/**\n\t * Shows the dialog with the given configuration\n\t */\n\tshow ( config : DialogConfig ) : void {\n\t\tthis.config = { ...this.config, ...config };\n\t\tthis.render();\n\t\tthis.setupKeyboardListeners();\n\n\t\t// Create backdrop if modal is enabled\n\t\tif ( this.config.modal ) {\n\t\t\tthis.createBackdrop();\n\t\t}\n\n\t\t// Add opening animation class\n\t\trequestAnimationFrame( () => {\n\t\t\trequestAnimationFrame( () => {\n\t\t\t\tconst dialog = this.shadowRoot.querySelector( '.dialog-container' ) as HTMLElement;\n\t\t\t\tif ( dialog ) {\n\t\t\t\t\tdialog.classList.add( 'show' );\n\t\t\t\t}\n\t\t\t\tif ( this.backdrop ) {\n\t\t\t\t\t// Use inline style instead of class since backdrop is outside shadow DOM\n\t\t\t\t\tthis.backdrop.style.opacity = '1';\n\t\t\t\t}\n\t\t\t} );\n\t\t} );\n\t}\n\n\t/**\n\t * Closes the dialog\n\t */\n\tclose () : void {\n\t\tconst dialog = this.shadowRoot.querySelector( '.dialog-container' ) as HTMLElement;\n\n\t\t// Add closing animation\n\t\tif ( dialog ) {\n\t\t\tdialog.classList.add( 'closing' );\n\t\t}\n\t\tif ( this.backdrop ) {\n\t\t\tthis.backdrop.remove();\n\t\t\tthis.backdrop = undefined;\n\t\t}\n\n\t\t// Wait for animation to complete\n\t\tconst animationDuration = this.config.fxAppear === 'none' ? 0 : ( this.config.fxSpeed || 1000 );\n\t\tsetTimeout( () => {\n\t\t\tthis.removeKeyboardListeners();\n\n\t\t\tthis.dispatchEvent( new CustomEvent( 'close' ) );\n\t\t\tif ( this.config.onclose ) {\n\t\t\t\tthis.config.onclose();\n\t\t\t}\n\t\t\tthis.remove();\n\t\t}, animationDuration );\n\t}\n\n\t/**\n\t * Creates the modal backdrop\n\t */\n\tprivate createBackdrop () : void {\n\t\tif ( this.backdrop ) return;\n\n\t\tthis.backdrop = document.createElement( 'div' );\n\t\tthis.backdrop.className = 'dialog-backdrop';\n\t\tthis.backdrop.style.position = 'fixed';\n\t\tthis.backdrop.style.top = '0';\n\t\tthis.backdrop.style.left = '0';\n\t\tthis.backdrop.style.width = '100%';\n\t\tthis.backdrop.style.height = '100%';\n\t\tthis.backdrop.style.backgroundColor = 'rgba(0, 0, 0, 0.6)';\n\t\tthis.backdrop.style.backdropFilter = 'blur(4px)';\n\t\t( this.backdrop.style as any ).webkitBackdropFilter = 'blur(4px)'; // Safari support\n\t\tthis.backdrop.style.zIndex = '99998';\n\t\tthis.backdrop.style.opacity = '0';\n\t\tthis.backdrop.style.transition = 'opacity 0.3s ease';\n\n\t\t// Handle click outside to close\n\t\tif ( this.config.clickToClose ) {\n\t\t\tthis.backdrop.addEventListener( 'click', () => {\n\t\t\t\tthis.close();\n\t\t\t} );\n\t\t}\n\n\t\tdocument.body.appendChild( this.backdrop );\n\t}\n\n\t/**\n\t * Sets up keyboard event listeners\n\t */\n\tprivate setupKeyboardListeners () : void {\n\t\tif ( this.config.escToClose ) {\n\t\t\tthis.escKeyHandler = ( e : KeyboardEvent ) => {\n\t\t\t\tif ( e.key === 'Escape' ) {\n\t\t\t\t\tthis.close();\n\t\t\t\t}\n\t\t\t};\n\t\t\tdocument.addEventListener( 'keydown', this.escKeyHandler );\n\t\t}\n\t}\n\n\t/**\n\t * Removes keyboard event listeners\n\t */\n\tprivate removeKeyboardListeners () : void {\n\t\tif ( this.escKeyHandler ) {\n\t\t\tdocument.removeEventListener( 'keydown', this.escKeyHandler );\n\t\t\tthis.escKeyHandler = undefined;\n\t\t}\n\t}\n\n\t/**\n\t * Binds all event listeners\n\t */\n\tprivate bindEvents () : void {\n\t\t// Only bind events once to prevent duplicate event listeners\n\t\tif ( this.eventsBound ) return;\n\t\tthis.eventsBound = true;\n\n\t\t// Handle button clicks\n\t\tthis.shadowRoot.addEventListener( 'click', ( e ) => {\n\t\t\tconst target = e.target as HTMLElement;\n\n\t\t\tif ( target.closest( '.close-button' ) ) {\n\t\t\t\tthis.close();\n\t\t\t} else if ( target.closest( '.dialog-button' ) ) {\n\t\t\t\tconst buttonIndex = ( target.closest( '.dialog-button' ) as HTMLElement ).dataset.index;\n\t\t\t\tif ( buttonIndex !== undefined ) {\n\t\t\t\t\tconst button = this.config.buttons?.[parseInt( buttonIndex, 10 )];\n\t\t\t\t\tif ( button && button.onclick ) {\n\t\t\t\t\t\tbutton.onclick( this );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\n\t\t// Prevent scroll propagation to body when scrolling within dialog\n\t\tconst dialogContainer = this.shadowRoot.querySelector( '.dialog-container' ) as HTMLElement;\n\t\tif ( dialogContainer ) {\n\t\t\tdialogContainer.addEventListener( 'wheel', ( e ) => {\n\t\t\t\te.stopPropagation();\n\t\t\t}, { passive: true } );\n\t\t}\n\t}\n\n\t/**\n\t * Renders the component\n\t */\n\tprivate render () : void {\n\t\tconst title = this.config.title || 'Dialog';\n\t\tconst buttons = this.config.buttons || [];\n\t\tconst animationSpeed = this.config.fxSpeed || 1000;\n\t\tconst animationDuration = `${animationSpeed}ms`;\n\t\tconst fxClass = this.config.fxAppear === 'fade'\n\t\t\t? 'fx-fade'\n\t\t\t: this.config.fxAppear === 'slide'\n\t\t\t? 'fx-slide'\n\t\t\t: '';\n\n\t\t// Determine button layout:\n\t\t// - If only 1 button, put it on the right\n\t\t// - If 2+ buttons, put first on left, rest on right\n\t\tconst firstButton = buttons.length > 1 ? buttons[0] : null;\n\t\tconst rightButtons = buttons.length === 1 ? buttons : buttons.slice( 1 );\n\n\t\tthis.shadowRoot.innerHTML = `\n      <style>\n        :host {\n          display: block;\n          font-family: var(--font-family, var(--liwe3-font-family, Ubuntu, sans-serif));\n          font-size: var(--font-size, 14px);\n        }\n\n        .dialog-container {\n          position: fixed;\n          top: 50%;\n          left: 50%;\n          transform: translate(-50%, -50%);\n          min-width: 400px;\n          max-width: 600px;\n          max-height: 80vh;\n          background: var(--dialog-background, var(--liwe3-surface-raised, white));\n          border-radius: var(--dialog-border-radius, var(--liwe3-border-radius, 8px));\n          box-shadow: var(--dialog-shadow, 0 10px 40px rgba(0, 0, 0, 0.2));\n          z-index: 99999;\n          display: flex;\n          flex-direction: column;\n          opacity: 1;\n          font-family: var(--font-family, var(--liwe3-font-family, Ubuntu, sans-serif));\n        }\n\n        /* Fade animation */\n        .dialog-container.fx-fade {\n          opacity: 0;\n          transition: opacity ${animationDuration} ease;\n        }\n\n        .dialog-container.fx-fade.show {\n          opacity: 1;\n        }\n\n        .dialog-container.fx-fade.closing {\n          opacity: 0;\n        }\n\n        /* Slide animation */\n        .dialog-container.fx-slide {\n          transform: translate(-50%, -100%);\n          opacity: 0;\n          transition: transform ${animationDuration} cubic-bezier(0.16, 1, 0.3, 1), opacity ${animationDuration} ease;\n        }\n\n        .dialog-container.fx-slide.show {\n          transform: translate(-50%, -50%);\n          opacity: 1;\n        }\n\n        .dialog-container.fx-slide.closing {\n          transform: translate(-50%, -100%);\n          opacity: 0;\n        }\n\n        .dialog-header {\n          padding: 0;\n          border-bottom: none;\n          flex-shrink: 0;\n        }\n\n        .dialog-title {\n          margin: 0;\n          padding: 20px 24px;\n          font-size: 20px;\n          font-weight: 600;\n          color: var(--dialog-title-color, var(--liwe3-text-inverse, white));\n          background: var(--dialog-title-background, linear-gradient(135deg,\n            var(--liwe3-mode1-500, #667eea),\n            var(--liwe3-mode4-500, #9f7aea)\n          ));\n          border-bottom: 1px solid var(--dialog-border-color, var(--liwe3-border-default, #e0e0e0));\n        }\n\n        .dialog-body {\n          padding: 24px;\n          overflow-y: auto;\n          flex: 1;\n          color: var(--dialog-text-color, var(--liwe3-text-mode2, #555));\n          line-height: 1.6;\n        }\n\n        .dialog-footer {\n          padding: 16px 24px;\n          border-top: 1px solid var(--dialog-border-color, var(--liwe3-border-default, #e0e0e0));\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          gap: 12px;\n          flex-shrink: 0;\n          background: var(--dialog-background, var(--liwe3-surface-raised, white));\n        }\n\n        .footer-left {\n          display: flex;\n          gap: 12px;\n        }\n\n        .footer-right {\n          display: flex;\n          gap: 12px;\n          margin-left: auto;\n        }\n\n        .dialog-button {\n          padding: 8px 20px;\n          border: 1px solid var(--dialog-button-border-color, var(--liwe3-border-default, #ccc));\n          border-radius: var(--dialog-button-border-radius, var(--liwe3-border-radius, 4px));\n          background: var(--dialog-button-background, var(--liwe3-surface-raised, white));\n          color: var(--dialog-button-color, var(--liwe3-text-mode1, #333));\n          font-size: 14px;\n          cursor: pointer;\n          transition: all 0.2s;\n          font-family: inherit;\n          font-weight: 500;\n        }\n\n        .dialog-button:hover {\n          background-color: var(--dialog-button-hover-background, var(--liwe3-hover-overlay, #f8f9fa));\n          border-color: var(--dialog-button-hover-border-color, var(--liwe3-border-strong, #999));\n        }\n\n        .dialog-button:active {\n          background-color: var(--dialog-button-active-background, var(--liwe3-active-overlay, #e9ecef));\n        }\n\n        .close-button {\n          padding: 8px 20px;\n          border: 1px solid var(--dialog-close-border-color, var(--liwe3-border-default, #ccc));\n          border-radius: var(--dialog-button-border-radius, var(--liwe3-border-radius, 4px));\n          background: var(--dialog-close-background, var(--liwe3-surface-raised, white));\n          color: var(--dialog-close-color, var(--liwe3-text-mode1, #333));\n          font-size: 14px;\n          cursor: pointer;\n          transition: all 0.2s;\n          font-family: inherit;\n          font-weight: 500;\n        }\n\n        .close-button:hover {\n          background-color: var(--dialog-close-hover-background, var(--liwe3-hover-overlay, #f8f9fa));\n          border-color: var(--dialog-close-hover-border-color, var(--liwe3-border-strong, #999));\n        }\n\n        @media (max-width: 768px) {\n          .dialog-container {\n            min-width: 90vw;\n            max-width: 90vw;\n          }\n        }\n      </style>\n\n      <div class=\"dialog-container ${fxClass}\">\n        <div class=\"dialog-header\">\n          <h2 class=\"dialog-title\">${title}</h2>\n        </div>\n\n        <div class=\"dialog-body\">\n          ${this.config.body}\n        </div>\n\n        <div class=\"dialog-footer\">\n          ${\n\t\t\tfirstButton\n\t\t\t\t? `\n            <div class=\"footer-left\">\n              <button\n                class=\"dialog-button\"\n                data-index=\"0\"\n                style=\"${firstButton.backgroundColor ? `background-color: ${firstButton.backgroundColor}; color: white; border-color: ${firstButton.backgroundColor};` : ''}\"\n              >\n                ${firstButton.label}\n              </button>\n            </div>\n          `\n\t\t\t\t: ''\n\t\t}\n\n          <div class=\"footer-right\">\n            ${\n\t\t\trightButtons.map( ( button, index ) => `\n              <button\n                class=\"dialog-button\"\n                data-index=\"${firstButton ? index + 1 : index}\"\n                style=\"${button.backgroundColor ? `background-color: ${button.backgroundColor}; color: white; border-color: ${button.backgroundColor};` : ''}\"\n              >\n                ${button.label}\n              </button>\n            ` ).join( '' )\n\t\t}\n            ${buttons.length === 0 ? '<button class=\"close-button\">Close</button>' : ''}\n          </div>\n        </div>\n      </div>\n    `;\n\n\t\tthis.bindEvents();\n\t}\n}\n\n/**\n * Conditionally defines the custom element if in a browser environment.\n */\nconst defineDialog = ( tagName : string = 'liwe3-dialog' ) : void => {\n\tif ( typeof window !== 'undefined' && !window.customElements.get( tagName ) ) {\n\t\tcustomElements.define( tagName, DialogElement );\n\t}\n};\n\n// Auto-register with default tag name\ndefineDialog();\n\n/**\n * Container ID for dialogs\n */\nconst DIALOG_CONTAINER_ID = 'liwe3-dialog-container';\n\n/**\n * Gets or creates the dialog container element\n */\nconst getDialogContainer = () : HTMLElement => {\n\tlet container = document.getElementById( DIALOG_CONTAINER_ID );\n\n\tif ( !container ) {\n\t\tcontainer = document.createElement( 'div' );\n\t\tcontainer.id = DIALOG_CONTAINER_ID;\n\t\tcontainer.style.position = 'fixed';\n\t\tcontainer.style.zIndex = '99999';\n\t\tcontainer.style.pointerEvents = 'none';\n\t\tdocument.body.appendChild( container );\n\t}\n\n\treturn container;\n};\n\n/**\n * Shows a dialog with the given configuration.\n * This is the recommended way to display dialogs.\n *\n * @param config - The dialog configuration\n * @returns The dialog element instance\n *\n * @example\n * ```typescript\n * import { dialogAdd } from '@liwe3/webcomponents';\n *\n * dialogAdd({\n *   title: 'Delete File',\n *   body: '<p>Are you sure you want to delete this file? This action cannot be undone.</p>',\n *   buttons: [\n *     {\n *       label: 'Delete',\n *       backgroundColor: '#dc3545',\n *       onclick: (dialog) => {\n *         console.log('File deleted');\n *         dialog.close();\n *       }\n *     },\n *     {\n *       label: 'Cancel',\n *       onclick: (dialog) => {\n *         console.log('Cancelled');\n *         dialog.close();\n *       }\n *     }\n *   ],\n *   modal: true,\n *   escToClose: true,\n *   clickToClose: true\n * });\n * ```\n */\nconst dialogAdd = ( config : DialogConfig ) : DialogElement => {\n\tconst container = getDialogContainer();\n\tconst dialog = document.createElement( 'liwe3-dialog' ) as DialogElement;\n\n\t// Allow pointer events on individual dialogs\n\tdialog.style.pointerEvents = 'auto';\n\n\t// Show the dialog with the provided config\n\tdialog.show( config );\n\n\t// Add to container\n\tcontainer.appendChild( dialog );\n\n\treturn dialog;\n};\n\nexport { defineDialog, dialogAdd };\n"],"names":["DialogElement","config","dialog","animationDuration","e","target","buttonIndex","button","dialogContainer","title","buttons","fxClass","firstButton","rightButtons","index","defineDialog","tagName","DIALOG_CONTAINER_ID","getDialogContainer","container","dialogAdd"],"mappings":"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"}

package/dist/Drawer.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Drawer Web Component
+ * A container that can be expanded, shrunk, or closed with smooth animations
+ */
+export type DrawerDirection = 'horizontal' | 'vertical';
+export type DrawerState = 'expanded' | 'shrunk' | 'closed';
+export interface DrawerConfig {
+    direction?: DrawerDirection;
+    duration?: number;
+    showTitleWhenShrunk?: boolean;
+    closable?: boolean;
+    title?: string;
+    icon?: string;
+    showToggleButton?: boolean;
+    contentPadding?: string;
+}
+export declare class DrawerElement extends HTMLElement {
+    shadowRoot: ShadowRoot;
+    private currentState;
+    private config;
+    constructor();
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    get direction(): DrawerDirection;
+    set direction(value: DrawerDirection);
+    get duration(): number;
+    set duration(value: number);
+    get showTitleWhenShrunk(): boolean;
+    set showTitleWhenShrunk(value: boolean);
+    get closable(): boolean;
+    set closable(value: boolean);
+    get title(): string;
+    set title(value: string);
+    get icon(): string;
+    set icon(value: string);
+    get showToggleButton(): boolean;
+    set showToggleButton(value: boolean);
+    get contentPadding(): string;
+    set contentPadding(value: string);
+    get state(): DrawerState;
+    set state(value: DrawerState);
+    /**
+     * Expand the drawer
+     */
+    expand(): void;
+    /**
+     * Shrink the drawer
+     */
+    shrink(): void;
+    /**
+     * Close the drawer (removes from DOM)
+     */
+    close(): void;
+    /**
+     * Toggle between expanded and shrunk states
+     */
+    toggle(): void;
+    private setState;
+    private bindEvents;
+    private render;
+}
+export declare function defineDrawer(tagName?: string): void;
+//# sourceMappingURL=Drawer.d.ts.map

package/dist/Drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../src/Drawer.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,MAAM,eAAe,GAAG,YAAY,GAAG,UAAU,CAAC;AACxD,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE3D,MAAM,WAAW,YAAY;IAC3B,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,qBAAa,aAAc,SAAQ,WAAW;IACpC,UAAU,EAAE,UAAU,CAAC;IAC/B,OAAO,CAAC,YAAY,CAA2B;IAC/C,OAAO,CAAC,MAAM,CASZ;;IASF,MAAM,KAAK,kBAAkB,IAAK,MAAM,EAAE,CAEzC;IAED,wBAAwB,CAAG,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAI,IAAI;IAmCjG,IAAI,SAAS,IAAK,eAAe,CAEhC;IAED,IAAI,SAAS,CAAG,KAAK,EAAE,eAAe,EAGrC;IAED,IAAI,QAAQ,IAAK,MAAM,CAEtB;IAED,IAAI,QAAQ,CAAG,KAAK,EAAE,MAAM,EAG3B;IAED,IAAI,mBAAmB,IAAK,OAAO,CAElC;IAED,IAAI,mBAAmB,CAAG,KAAK,EAAE,OAAO,EAGvC;IAED,IAAI,QAAQ,IAAK,OAAO,CAEvB;IAED,IAAI,QAAQ,CAAG,KAAK,EAAE,OAAO,EAG5B;IAED,IAAI,KAAK,IAAK,MAAM,CAEnB;IAED,IAAI,KAAK,CAAG,KAAK,EAAE,MAAM,EAGxB;IAED,IAAI,IAAI,IAAK,MAAM,CAElB;IAED,IAAI,IAAI,CAAG,KAAK,EAAE,MAAM,EAGvB;IAED,IAAI,gBAAgB,IAAK,OAAO,CAE/B;IAED,IAAI,gBAAgB,CAAG,KAAK,EAAE,OAAO,EAGpC;IAED,IAAI,cAAc,IAAK,MAAM,CAE5B;IAED,IAAI,cAAc,CAAG,KAAK,EAAE,MAAM,EAGjC;IAED,IAAI,KAAK,IAAK,WAAW,CAExB;IAED,IAAI,KAAK,CAAG,KAAK,EAAE,WAAW,EAE7B;IAED;;OAEG;IACH,MAAM,IAAK,IAAI;IAIf;;OAEG;IACH,MAAM,IAAK,IAAI;IAIf;;OAEG;IACH,KAAK,IAAK,IAAI;IAId;;OAEG;IACH,MAAM,IAAK,IAAI;IAQf,OAAO,CAAC,QAAQ;IAwChB,OAAO,CAAC,UAAU;IAgBlB,OAAO,CAAC,MAAM;CA+Kf;AAQD,wBAAgB,YAAY,CAAG,OAAO,GAAE,MAAuB,GAAI,IAAI,CAItE"}