@liwe3/webcomponents 1.0.2 → 1.1.0

package/dist/Toast.js

@@ -0,0 +1,507 @@
+class l extends HTMLElement {
+  constructor() {
+    super(), this.config = {
+      title: "",
+      text: "",
+      type: "info",
+      closable: !0,
+      duration: 5e3
+    }, this.remainingTime = 0, this.pauseTime = 0, this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return ["title", "text", "type", "icon", "closable", "duration", "buttons"];
+  }
+  attributeChangedCallback(t, e, o) {
+    e !== o && this.render();
+  }
+  connectedCallback() {
+    this.render(), this.startAutoCloseTimer();
+  }
+  disconnectedCallback() {
+    this.clearAutoCloseTimer();
+  }
+  get title() {
+    const t = this.getAttribute("title"), e = this.config.title;
+    if ((!t || t.trim() === "") && (!e || e.trim() === "")) {
+      const o = this.type;
+      return o.charAt(0).toUpperCase() + o.slice(1);
+    }
+    return t || e;
+  }
+  set title(t) {
+    t && t.trim() !== "" ? (this.setAttribute("title", t), this.config.title = t) : (this.removeAttribute("title"), this.config.title = "");
+  }
+  get text() {
+    return this.getAttribute("text") || this.config.text;
+  }
+  set text(t) {
+    this.setAttribute("text", t), this.config.text = t;
+  }
+  get type() {
+    return this.getAttribute("type") || this.config.type || "info";
+  }
+  set type(t) {
+    this.setAttribute("type", t), this.config.type = t;
+  }
+  get icon() {
+    return this.getAttribute("icon") || this.config.icon;
+  }
+  set icon(t) {
+    t ? (this.setAttribute("icon", t), this.config.icon = t) : (this.removeAttribute("icon"), this.config.icon = void 0);
+  }
+  get closable() {
+    return this.hasAttribute("closable") ? this.getAttribute("closable") !== "false" : this.config.closable !== !1;
+  }
+  set closable(t) {
+    t ? this.setAttribute("closable", "true") : this.setAttribute("closable", "false"), this.config.closable = t;
+  }
+  get duration() {
+    const t = this.getAttribute("duration");
+    return t ? parseInt(t, 10) : this.config.duration ?? 5e3;
+  }
+  set duration(t) {
+    this.setAttribute("duration", t.toString()), this.config.duration = t;
+  }
+  get buttons() {
+    const t = this.getAttribute("buttons");
+    if (t)
+      try {
+        return JSON.parse(t);
+      } catch (e) {
+        return console.error("Invalid buttons format:", e), [];
+      }
+    return this.config.buttons || [];
+  }
+  set buttons(t) {
+    this.setAttribute("buttons", JSON.stringify(t)), this.config.buttons = t;
+  }
+  /**
+   * Shows the toast with the given configuration
+   */
+  show(t) {
+    this.config = { ...this.config, ...t }, t.buttons && t.buttons.length > 0 && (this.config.duration = 0), t.title && t.title.trim() !== "" ? this.title = t.title : (this.removeAttribute("title"), this.config.title = ""), this.text = t.text, t.type && (this.type = t.type), t.icon !== void 0 && (this.icon = t.icon), t.closable !== void 0 && (this.closable = t.closable), t.buttons && t.buttons.length > 0 ? this.duration = 0 : t.duration !== void 0 && (this.duration = t.duration), t.buttons && (this.buttons = t.buttons), this.render(), this.startAutoCloseTimer();
+  }
+  /**
+   * Closes the toast
+   */
+  close() {
+    this.clearAutoCloseTimer();
+    const t = this.shadowRoot.querySelector(".toast-container");
+    if (t) {
+      requestAnimationFrame(() => {
+        t.classList.add("closing");
+      });
+      const e = () => {
+        t.removeEventListener("animationend", e);
+        const o = this, i = o.offsetHeight;
+        o.style.height = `${i}px`, o.style.marginBottom = "12px", o.offsetHeight, o.style.height = "0px", o.style.marginBottom = "0px", o.style.opacity = "0", setTimeout(() => {
+          this.dispatchEvent(new CustomEvent("close")), this.config.onClose && this.config.onClose(), this.remove();
+        }, 300);
+      };
+      t.addEventListener("animationend", e), setTimeout(() => {
+        this.isConnected && e();
+      }, 350);
+    } else
+      this.dispatchEvent(new CustomEvent("close")), this.config.onClose && this.config.onClose(), this.remove();
+  }
+  /**
+   * Starts the auto-close timer if duration is set
+   */
+  startAutoCloseTimer() {
+    this.clearAutoCloseTimer(), this.duration > 0 && (this.remainingTime = this.duration, this.pauseTime = Date.now(), this.autoCloseTimer = window.setTimeout(() => {
+      this.close();
+    }, this.duration), this.startProgressBarAnimation());
+  }
+  /**
+   * Pauses the auto-close timer
+   */
+  pauseAutoCloseTimer() {
+    this.autoCloseTimer && this.duration > 0 && (clearTimeout(this.autoCloseTimer), this.autoCloseTimer = void 0, this.remainingTime -= Date.now() - this.pauseTime, this.pauseProgressBarAnimation());
+  }
+  /**
+   * Resumes the auto-close timer
+   */
+  resumeAutoCloseTimer() {
+    !this.autoCloseTimer && this.remainingTime > 0 && (this.pauseTime = Date.now(), this.autoCloseTimer = window.setTimeout(() => {
+      this.close();
+    }, this.remainingTime), this.resumeProgressBarAnimation());
+  }
+  /**
+   * Clears the auto-close timer
+   */
+  clearAutoCloseTimer() {
+    this.autoCloseTimer && (clearTimeout(this.autoCloseTimer), this.autoCloseTimer = void 0);
+  }
+  /**
+   * Starts the progress bar animation
+   */
+  startProgressBarAnimation() {
+    !this.progressBar || this.duration <= 0 || (this.progressBar.style.animation = "none", this.progressBar.offsetWidth, this.progressBar.style.animation = `shrinkProgress ${this.duration}ms linear forwards`);
+  }
+  /**
+   * Pauses the progress bar animation
+   */
+  pauseProgressBarAnimation() {
+    if (!this.progressBar) return;
+    const e = window.getComputedStyle(this.progressBar).width, o = this.progressBar.parentElement?.offsetWidth || 1, i = parseFloat(e) / o * 100;
+    this.progressBar.style.animation = "none", this.progressBar.style.width = `${i}%`;
+  }
+  /**
+   * Resumes the progress bar animation
+   */
+  resumeProgressBarAnimation() {
+    if (!this.progressBar || this.remainingTime <= 0) return;
+    const e = window.getComputedStyle(this.progressBar).width, o = this.progressBar.parentElement?.offsetWidth || 1, i = parseFloat(e) / o * 100, r = this.remainingTime, a = `shrinkProgress-${Date.now()}`, n = this.shadowRoot.styleSheets[0], c = `
+      @keyframes ${a} {
+        from {
+          width: ${i}%;
+        }
+        to {
+          width: 0%;
+        }
+      }
+    `;
+    n && n.insertRule(c, n.cssRules.length), this.progressBar.style.animation = `${a} ${r}ms linear forwards`;
+  }
+  /**
+   * Gets the color scheme for the toast type
+   */
+  getTypeColors() {
+    switch (this.type) {
+      case "success":
+        return {
+          background: "var(--toast-success-background, #d4edda)",
+          border: "var(--toast-success-border, #c3e6cb)",
+          icon: "var(--toast-success-icon, #155724)"
+        };
+      case "error":
+        return {
+          background: "var(--toast-error-background, #f8d7da)",
+          border: "var(--toast-error-border, #f5c6cb)",
+          icon: "var(--toast-error-icon, #721c24)"
+        };
+      case "warning":
+        return {
+          background: "var(--toast-warning-background, #fff3cd)",
+          border: "var(--toast-warning-border, #ffeaa7)",
+          icon: "var(--toast-warning-icon, #856404)"
+        };
+      case "info":
+      default:
+        return {
+          background: "var(--toast-info-background, #d1ecf1)",
+          border: "var(--toast-info-border, #bee5eb)",
+          icon: "var(--toast-info-icon, #0c5460)"
+        };
+    }
+  }
+  /**
+   * Gets the default icon for the toast type
+   */
+  getDefaultIcon() {
+    switch (this.type) {
+      case "success":
+        return "✓";
+      case "error":
+        return "✕";
+      case "warning":
+        return "⚠";
+      case "info":
+      default:
+        return "ℹ";
+    }
+  }
+  /**
+   * Binds all event listeners
+   */
+  bindEvents() {
+    this.shadowRoot.addEventListener("click", (e) => {
+      const o = e.target;
+      if (o.closest(".close-button"))
+        this.close();
+      else if (o.closest(".toast-button")) {
+        const i = o.closest(".toast-button").dataset.index;
+        if (i !== void 0) {
+          const r = this.buttons[parseInt(i, 10)];
+          r && r.onClick && r.onClick();
+        }
+      }
+    });
+    const t = this.shadowRoot.querySelector(".toast-container");
+    t && (t.addEventListener("mouseenter", () => {
+      this.pauseAutoCloseTimer();
+    }), t.addEventListener("mouseleave", () => {
+      this.resumeAutoCloseTimer();
+    }));
+  }
+  /**
+   * Renders the component
+   */
+  render() {
+    const t = this.getTypeColors(), e = this.icon ? `<img src="${this.icon}" alt="Toast icon" class="toast-icon-img" />` : `<span class="toast-icon-default">${this.getDefaultIcon()}</span>`;
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          font-family: var(--font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+          font-size: var(--font-size, 14px);
+          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        .toast-container {
+          display: flex;
+          flex-direction: column;
+          min-width: 300px;
+          max-width: 500px;
+          padding: 16px;
+          background: ${t.background};
+          border: 1px solid ${t.border};
+          border-radius: var(--toast-border-radius, 8px);
+          box-shadow: var(--toast-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));
+          animation: slideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+          position: relative;
+          will-change: transform, opacity;
+        }
+
+        .toast-container.closing {
+          animation: slideOut 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
+        }
+
+        @keyframes slideIn {
+          from {
+            opacity: 0;
+            transform: translateY(-20px) scale(0.95);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0) scale(1);
+          }
+        }
+
+        @keyframes slideOut {
+          from {
+            opacity: 1;
+            transform: translateY(0) scale(1);
+          }
+          to {
+            opacity: 0;
+            transform: translateY(-20px) scale(0.95);
+          }
+        }
+
+        .toast-header {
+          display: flex;
+          align-items: flex-start;
+          gap: 12px;
+          margin-bottom: 8px;
+        }
+
+        .toast-icon {
+          flex-shrink: 0;
+          width: 24px;
+          height: 24px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: ${t.icon};
+        }
+
+        .toast-icon-img {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+        }
+
+        .toast-icon-default {
+          font-size: 20px;
+          font-weight: bold;
+        }
+
+        .toast-content {
+          flex: 1;
+          min-width: 0;
+        }
+
+        .toast-title {
+          font-weight: 600;
+          font-size: 16px;
+          margin: 0 0 4px 0;
+          color: var(--toast-title-color, #333);
+        }
+
+        .toast-text {
+          margin: 0;
+          color: var(--toast-text-color, #555);
+          line-height: 1.5;
+          word-wrap: break-word;
+        }
+
+        .close-button {
+          position: absolute;
+          top: 8px;
+          right: 8px;
+          width: 24px;
+          height: 24px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: transparent;
+          border: none;
+          cursor: pointer;
+          font-size: 20px;
+          color: var(--toast-close-color, #666);
+          border-radius: 4px;
+          transition: background-color 0.2s, color 0.2s;
+          padding: 0;
+        }
+
+        .close-button:hover {
+          background-color: var(--toast-close-hover-background, rgba(0, 0, 0, 0.1));
+          color: var(--toast-close-hover-color, #333);
+        }
+
+        .toast-buttons {
+          display: flex;
+          gap: 8px;
+          justify-content: flex-end;
+          margin-top: 12px;
+          padding-top: 12px;
+          border-top: 1px solid var(--toast-button-border, rgba(0, 0, 0, 0.1));
+        }
+
+        .toast-button {
+          padding: 6px 16px;
+          border: 1px solid var(--toast-button-border-color, #ccc);
+          border-radius: var(--toast-button-border-radius, 4px);
+          background: var(--toast-button-background, white);
+          color: var(--toast-button-color, #333);
+          font-size: 14px;
+          cursor: pointer;
+          transition: background-color 0.2s, border-color 0.2s;
+          font-family: inherit;
+        }
+
+        .toast-button:hover {
+          background-color: var(--toast-button-hover-background, #f8f9fa);
+          border-color: var(--toast-button-hover-border-color, #999);
+        }
+
+        .toast-button:active {
+          background-color: var(--toast-button-active-background, #e9ecef);
+        }
+
+        .toast-progress-bar {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          height: 4px;
+          width: 100%;
+          background: var(--toast-progress-bar-color, rgba(0, 0, 0, 0.3));
+          border-bottom-left-radius: var(--toast-border-radius, 8px);
+          border-bottom-right-radius: var(--toast-border-radius, 8px);
+          transform-origin: left;
+        }
+
+        @keyframes shrinkProgress {
+          from {
+            width: 100%;
+          }
+          to {
+            width: 0%;
+          }
+        }
+      </style>
+
+      <div class="toast-container">
+        ${this.closable ? '<button class="close-button" aria-label="Close">×</button>' : ""}
+
+        <div class="toast-header">
+          <div class="toast-icon">
+            ${e}
+          </div>
+          <div class="toast-content">
+            <h4 class="toast-title">${this.title}</h4>
+            <p class="toast-text">${this.text}</p>
+          </div>
+        </div>
+
+        ${this.buttons.length > 0 ? `
+          <div class="toast-buttons">
+            ${this.buttons.map((o, i) => `
+              <button class="toast-button" data-index="${i}">
+                ${o.label}
+              </button>
+            `).join("")}
+          </div>
+        ` : ""}
+
+        ${this.duration > 0 ? '<div class="toast-progress-bar"></div>' : ""}
+      </div>
+    `, this.progressBar = this.shadowRoot.querySelector(".toast-progress-bar"), this.bindEvents();
+  }
+}
+const d = (s = "liwe3-toast") => {
+  typeof window < "u" && !window.customElements.get(s) && customElements.define(s, l);
+};
+d();
+const h = "liwe3-toast-container", u = (s) => {
+  switch (s) {
+    case "TL":
+      return { top: "20px", left: "20px", alignItems: "flex-start" };
+    case "T":
+      return { top: "20px", left: "50%", alignItems: "center" };
+    case "TR":
+      return { top: "20px", right: "20px", alignItems: "flex-end" };
+    case "BL":
+      return { bottom: "20px", left: "20px", alignItems: "flex-start" };
+    case "B":
+      return { bottom: "20px", left: "50%", alignItems: "center" };
+    case "BR":
+      return { bottom: "20px", right: "20px", alignItems: "flex-end" };
+    default:
+      return { top: "20px", right: "20px", alignItems: "flex-end" };
+  }
+}, m = (s = "TR") => {
+  const t = `${h}-${s.toLowerCase()}`;
+  let e = document.getElementById(t);
+  if (!e) {
+    e = document.createElement("div"), e.id = t, e.style.position = "fixed", e.style.zIndex = "99999", e.style.display = "flex", e.style.flexDirection = "column", e.style.maxWidth = "400px", e.style.pointerEvents = "none";
+    const o = u(s);
+    o.top && (e.style.top = o.top), o.bottom && (e.style.bottom = o.bottom), o.left && (e.style.left = o.left), o.right && (e.style.right = o.right), e.style.alignItems = o.alignItems, (s === "T" || s === "B") && (e.style.transform = "translateX(-50%)");
+    const i = `${t}-styles`;
+    if (!document.getElementById(i)) {
+      const r = document.createElement("style");
+      r.id = i, r.textContent = `
+        #${t} > * {
+          margin-bottom: 12px;
+          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+          overflow: hidden;
+        }
+
+        #${t} > *:last-child {
+          margin-bottom: 0;
+        }
+
+        @media (max-width: 768px) {
+          #${t} {
+            left: 20px !important;
+            right: 20px !important;
+            max-width: none !important;
+            transform: none !important;
+          }
+        }
+      `, document.head.appendChild(r);
+    }
+    document.body.appendChild(e);
+  }
+  return e;
+}, p = (s) => {
+  const t = s.position || "TR", e = m(t), o = document.createElement("liwe3-toast");
+  return o.style.pointerEvents = "auto", o.show(s), e.appendChild(o), o;
+};
+export {
+  l as ToastElement,
+  d as defineToast,
+  p as toastAdd
+};
+//# sourceMappingURL=Toast.js.map

package/dist/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.js","sources":["../src/Toast.ts"],"sourcesContent":["/**\n * Toast Web Component\n * A customizable toast notification system with multiple types, icons, buttons, and auto-dismiss\n */\n\nexport type ToastType = 'info' | 'warning' | 'error' | 'success';\n\nexport type ToastPosition = 'TL' | 'T' | 'TR' | 'BL' | 'B' | 'BR';\n\nexport type ToastButton = {\n  label: string;\n  onClick: () => void;\n};\n\nexport type ToastConfig = {\n  title: string;\n  text: string;\n  type?: ToastType;\n  icon?: string; // URL to icon/image\n  buttons?: ToastButton[];\n  closable?: boolean; // Show close X button\n  duration?: number; // Auto-dismiss after x milliseconds (0 = no auto-dismiss, default: 5000ms)\n  position?: ToastPosition; // Toast container position (default: 'TR')\n  onClose?: () => void;\n};\n\nexport class ToastElement extends HTMLElement {\n  declare shadowRoot: ShadowRoot;\n  private config: ToastConfig = {\n    title: '',\n    text: '',\n    type: 'info',\n    closable: true,\n    duration: 5000\n  };\n  private autoCloseTimer?: number;\n  private remainingTime: number = 0;\n  private pauseTime: number = 0;\n  private progressBar?: HTMLElement;\n\n  constructor () {\n    super();\n    this.attachShadow( { mode: 'open' } );\n  }\n\n  static get observedAttributes (): string[] {\n    return [ 'title', 'text', 'type', 'icon', 'closable', 'duration', 'buttons' ];\n  }\n\n  attributeChangedCallback ( _name: string, oldValue: string | null, newValue: string | null ): void {\n    if ( oldValue !== newValue ) {\n      this.render();\n    }\n  }\n\n  connectedCallback (): void {\n    this.render();\n    this.startAutoCloseTimer();\n  }\n\n  disconnectedCallback (): void {\n    this.clearAutoCloseTimer();\n  }\n\n  get title (): string {\n    const attrTitle = this.getAttribute( 'title' );\n    const configTitle = this.config.title;\n\n    // If no title is provided or empty, use capitalized type\n    if ( ( !attrTitle || attrTitle.trim() === '' ) && ( !configTitle || configTitle.trim() === '' ) ) {\n      const type = this.type;\n      return type.charAt( 0 ).toUpperCase() + type.slice( 1 );\n    }\n\n    return attrTitle || configTitle;\n  }\n\n  set title ( value: string ) {\n    if ( value && value.trim() !== '' ) {\n      this.setAttribute( 'title', value );\n      this.config.title = value;\n    } else {\n      this.removeAttribute( 'title' );\n      this.config.title = '';\n    }\n  }\n\n  get text (): string {\n    return this.getAttribute( 'text' ) || this.config.text;\n  }\n\n  set text ( value: string ) {\n    this.setAttribute( 'text', value );\n    this.config.text = value;\n  }\n\n  get type (): ToastType {\n    const attr = this.getAttribute( 'type' );\n    return ( attr as ToastType ) || this.config.type || 'info';\n  }\n\n  set type ( value: ToastType ) {\n    this.setAttribute( 'type', value );\n    this.config.type = value;\n  }\n\n  get icon (): string | undefined {\n    return this.getAttribute( 'icon' ) || this.config.icon;\n  }\n\n  set icon ( value: string | undefined ) {\n    if ( value ) {\n      this.setAttribute( 'icon', value );\n      this.config.icon = value;\n    } else {\n      this.removeAttribute( 'icon' );\n      this.config.icon = undefined;\n    }\n  }\n\n  get closable (): boolean {\n    if ( this.hasAttribute( 'closable' ) ) {\n      return this.getAttribute( 'closable' ) !== 'false';\n    }\n    return this.config.closable !== false;\n  }\n\n  set closable ( value: boolean ) {\n    if ( value ) {\n      this.setAttribute( 'closable', 'true' );\n    } else {\n      this.setAttribute( 'closable', 'false' );\n    }\n    this.config.closable = value;\n  }\n\n  get duration (): number {\n    const attr = this.getAttribute( 'duration' );\n    if ( attr ) {\n      return parseInt( attr, 10 );\n    }\n    return this.config.duration ?? 5000;\n  }\n\n  set duration ( value: number ) {\n    this.setAttribute( 'duration', value.toString() );\n    this.config.duration = value;\n  }\n\n  get buttons (): ToastButton[] {\n    const attr = this.getAttribute( 'buttons' );\n    if ( attr ) {\n      try {\n        return JSON.parse( attr );\n      } catch ( e ) {\n        console.error( 'Invalid buttons format:', e );\n        return [];\n      }\n    }\n    return this.config.buttons || [];\n  }\n\n  set buttons ( value: ToastButton[] ) {\n    this.setAttribute( 'buttons', JSON.stringify( value ) );\n    this.config.buttons = value;\n  }\n\n  /**\n   * Shows the toast with the given configuration\n   */\n  show ( config: ToastConfig ): void {\n    this.config = { ...this.config, ...config };\n\n    // If buttons are present, force duration to 0 (user must interact to close)\n    if ( config.buttons && config.buttons.length > 0 ) {\n      this.config.duration = 0;\n    }\n\n    // Sync config to attributes\n    if ( config.title && config.title.trim() !== '' ) {\n      this.title = config.title;\n    } else {\n      // Clear title if not provided or empty\n      this.removeAttribute( 'title' );\n      this.config.title = '';\n    }\n    this.text = config.text;\n    if ( config.type ) this.type = config.type;\n    if ( config.icon !== undefined ) this.icon = config.icon;\n    if ( config.closable !== undefined ) this.closable = config.closable;\n    if ( config.buttons && config.buttons.length > 0 ) {\n      // Force duration to 0 when buttons are present\n      this.duration = 0;\n    } else if ( config.duration !== undefined ) {\n      this.duration = config.duration;\n    }\n    if ( config.buttons ) this.buttons = config.buttons;\n\n    this.render();\n    this.startAutoCloseTimer();\n  }\n\n  /**\n   * Closes the toast\n   */\n  close (): void {\n    this.clearAutoCloseTimer();\n\n    // Add closing animation\n    const container = this.shadowRoot.querySelector( '.toast-container' ) as HTMLElement;\n    if ( container ) {\n      // Use requestAnimationFrame to ensure smooth animation\n      requestAnimationFrame( () => {\n        container.classList.add( 'closing' );\n      } );\n\n      // Listen for animation end event for smoother transition\n      const handleAnimationEnd = () => {\n        container.removeEventListener( 'animationend', handleAnimationEnd );\n\n        // Animate the host element collapsing (height and margin to 0)\n        const hostElement = this as unknown as HTMLElement;\n        const currentHeight = hostElement.offsetHeight;\n\n        // Set explicit height for animation\n        hostElement.style.height = `${ currentHeight }px`;\n        hostElement.style.marginBottom = '12px';\n\n        // Force reflow\n        void hostElement.offsetHeight;\n\n        // Animate to 0\n        hostElement.style.height = '0px';\n        hostElement.style.marginBottom = '0px';\n        hostElement.style.opacity = '0';\n\n        // Wait for transition to complete, then remove\n        setTimeout( () => {\n          this.dispatchEvent( new CustomEvent( 'close' ) );\n          if ( this.config.onClose ) {\n            this.config.onClose();\n          }\n          this.remove();\n        }, 300 );\n      };\n\n      container.addEventListener( 'animationend', handleAnimationEnd );\n\n      // Fallback timeout in case animationend doesn't fire\n      setTimeout( () => {\n        if ( this.isConnected ) {\n          handleAnimationEnd();\n        }\n      }, 350 );\n    } else {\n      this.dispatchEvent( new CustomEvent( 'close' ) );\n      if ( this.config.onClose ) {\n        this.config.onClose();\n      }\n      this.remove();\n    }\n  }\n\n  /**\n   * Starts the auto-close timer if duration is set\n   */\n  private startAutoCloseTimer (): void {\n    this.clearAutoCloseTimer();\n\n    if ( this.duration > 0 ) {\n      this.remainingTime = this.duration;\n      this.pauseTime = Date.now();\n      this.autoCloseTimer = window.setTimeout( () => {\n        this.close();\n      }, this.duration );\n\n      // Start progress bar animation\n      this.startProgressBarAnimation();\n    }\n  }\n\n  /**\n   * Pauses the auto-close timer\n   */\n  private pauseAutoCloseTimer (): void {\n    if ( this.autoCloseTimer && this.duration > 0 ) {\n      clearTimeout( this.autoCloseTimer );\n      this.autoCloseTimer = undefined;\n      this.remainingTime -= Date.now() - this.pauseTime;\n\n      // Pause progress bar animation\n      this.pauseProgressBarAnimation();\n    }\n  }\n\n  /**\n   * Resumes the auto-close timer\n   */\n  private resumeAutoCloseTimer (): void {\n    if ( !this.autoCloseTimer && this.remainingTime > 0 ) {\n      this.pauseTime = Date.now();\n      this.autoCloseTimer = window.setTimeout( () => {\n        this.close();\n      }, this.remainingTime );\n\n      // Resume progress bar animation\n      this.resumeProgressBarAnimation();\n    }\n  }\n\n  /**\n   * Clears the auto-close timer\n   */\n  private clearAutoCloseTimer (): void {\n    if ( this.autoCloseTimer ) {\n      clearTimeout( this.autoCloseTimer );\n      this.autoCloseTimer = undefined;\n    }\n  }\n\n  /**\n   * Starts the progress bar animation\n   */\n  private startProgressBarAnimation (): void {\n    if ( !this.progressBar || this.duration <= 0 ) return;\n\n    // Reset and start the animation\n    this.progressBar.style.animation = 'none';\n    // Force a reflow to reset the animation\n    void this.progressBar.offsetWidth;\n    this.progressBar.style.animation = `shrinkProgress ${ this.duration }ms linear forwards`;\n  }\n\n  /**\n   * Pauses the progress bar animation\n   */\n  private pauseProgressBarAnimation (): void {\n    if ( !this.progressBar ) return;\n\n    // Get the current computed width as a percentage of the container\n    const computedStyle = window.getComputedStyle( this.progressBar );\n    const currentWidth = computedStyle.width;\n    const containerWidth = this.progressBar.parentElement?.offsetWidth || 1;\n    const widthPercent = ( parseFloat( currentWidth ) / containerWidth ) * 100;\n\n    // Stop the animation and set the width directly\n    this.progressBar.style.animation = 'none';\n    this.progressBar.style.width = `${ widthPercent }%`;\n  }\n\n  /**\n   * Resumes the progress bar animation\n   */\n  private resumeProgressBarAnimation (): void {\n    if ( !this.progressBar || this.remainingTime <= 0 ) return;\n\n    // Get current width as starting point\n    const computedStyle = window.getComputedStyle( this.progressBar );\n    const currentWidth = computedStyle.width;\n    const containerWidth = this.progressBar.parentElement?.offsetWidth || 1;\n    const currentPercent = ( parseFloat( currentWidth ) / containerWidth ) * 100;\n\n    // Calculate the duration based on the remaining percentage and remaining time\n    // The animation should take exactly remainingTime to go from currentPercent to 0\n    const adjustedDuration = this.remainingTime;\n\n    // Create a new keyframe animation from current position to 0\n    const animationName = `shrinkProgress-${ Date.now() }`;\n    const styleSheet = this.shadowRoot.styleSheets[ 0 ];\n    const keyframes = `\n      @keyframes ${ animationName } {\n        from {\n          width: ${ currentPercent }%;\n        }\n        to {\n          width: 0%;\n        }\n      }\n    `;\n\n    // Add the new keyframe rule\n    if ( styleSheet ) {\n      styleSheet.insertRule( keyframes, styleSheet.cssRules.length );\n    }\n\n    // Apply the animation\n    this.progressBar.style.animation = `${ animationName } ${ adjustedDuration }ms linear forwards`;\n  }\n\n  /**\n   * Gets the color scheme for the toast type\n   */\n  private getTypeColors (): { background: string; border: string; icon: string } {\n    const type = this.type;\n\n    switch ( type ) {\n      case 'success':\n        return {\n          background: 'var(--toast-success-background, #d4edda)',\n          border: 'var(--toast-success-border, #c3e6cb)',\n          icon: 'var(--toast-success-icon, #155724)'\n        };\n      case 'error':\n        return {\n          background: 'var(--toast-error-background, #f8d7da)',\n          border: 'var(--toast-error-border, #f5c6cb)',\n          icon: 'var(--toast-error-icon, #721c24)'\n        };\n      case 'warning':\n        return {\n          background: 'var(--toast-warning-background, #fff3cd)',\n          border: 'var(--toast-warning-border, #ffeaa7)',\n          icon: 'var(--toast-warning-icon, #856404)'\n        };\n      case 'info':\n      default:\n        return {\n          background: 'var(--toast-info-background, #d1ecf1)',\n          border: 'var(--toast-info-border, #bee5eb)',\n          icon: 'var(--toast-info-icon, #0c5460)'\n        };\n    }\n  }\n\n  /**\n   * Gets the default icon for the toast type\n   */\n  private getDefaultIcon (): string {\n    const type = this.type;\n\n    switch ( type ) {\n      case 'success':\n        return '✓';\n      case 'error':\n        return '✕';\n      case 'warning':\n        return '⚠';\n      case 'info':\n      default:\n        return 'ℹ';\n    }\n  }\n\n  /**\n   * Binds all event listeners\n   */\n  private bindEvents (): void {\n    // Handle close button click and button clicks\n    this.shadowRoot.addEventListener( 'click', ( e ) => {\n      const target = e.target as HTMLElement;\n\n      if ( target.closest( '.close-button' ) ) {\n        this.close();\n      } else if ( target.closest( '.toast-button' ) ) {\n        const buttonIndex = ( target.closest( '.toast-button' ) as HTMLElement ).dataset.index;\n        if ( buttonIndex !== undefined ) {\n          const button = this.buttons[ parseInt( buttonIndex, 10 ) ];\n          if ( button && button.onClick ) {\n            button.onClick();\n          }\n        }\n      }\n    } );\n\n    // Handle mouse enter/leave to pause/resume timer\n    const container = this.shadowRoot.querySelector( '.toast-container' );\n    if ( container ) {\n      container.addEventListener( 'mouseenter', () => {\n        this.pauseAutoCloseTimer();\n      } );\n\n      container.addEventListener( 'mouseleave', () => {\n        this.resumeAutoCloseTimer();\n      } );\n    }\n  }\n\n  /**\n   * Renders the component\n   */\n  private render (): void {\n    const colors = this.getTypeColors();\n    const iconContent = this.icon\n      ? `<img src=\"${ this.icon }\" alt=\"Toast icon\" class=\"toast-icon-img\" />`\n      : `<span class=\"toast-icon-default\">${ this.getDefaultIcon() }</span>`;\n\n    this.shadowRoot.innerHTML = `\n      <style>\n        :host {\n          display: block;\n          font-family: var(--font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);\n          font-size: var(--font-size, 14px);\n          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n        }\n\n        .toast-container {\n          display: flex;\n          flex-direction: column;\n          min-width: 300px;\n          max-width: 500px;\n          padding: 16px;\n          background: ${ colors.background };\n          border: 1px solid ${ colors.border };\n          border-radius: var(--toast-border-radius, 8px);\n          box-shadow: var(--toast-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));\n          animation: slideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);\n          position: relative;\n          will-change: transform, opacity;\n        }\n\n        .toast-container.closing {\n          animation: slideOut 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;\n        }\n\n        @keyframes slideIn {\n          from {\n            opacity: 0;\n            transform: translateY(-20px) scale(0.95);\n          }\n          to {\n            opacity: 1;\n            transform: translateY(0) scale(1);\n          }\n        }\n\n        @keyframes slideOut {\n          from {\n            opacity: 1;\n            transform: translateY(0) scale(1);\n          }\n          to {\n            opacity: 0;\n            transform: translateY(-20px) scale(0.95);\n          }\n        }\n\n        .toast-header {\n          display: flex;\n          align-items: flex-start;\n          gap: 12px;\n          margin-bottom: 8px;\n        }\n\n        .toast-icon {\n          flex-shrink: 0;\n          width: 24px;\n          height: 24px;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          color: ${ colors.icon };\n        }\n\n        .toast-icon-img {\n          width: 100%;\n          height: 100%;\n          object-fit: contain;\n        }\n\n        .toast-icon-default {\n          font-size: 20px;\n          font-weight: bold;\n        }\n\n        .toast-content {\n          flex: 1;\n          min-width: 0;\n        }\n\n        .toast-title {\n          font-weight: 600;\n          font-size: 16px;\n          margin: 0 0 4px 0;\n          color: var(--toast-title-color, #333);\n        }\n\n        .toast-text {\n          margin: 0;\n          color: var(--toast-text-color, #555);\n          line-height: 1.5;\n          word-wrap: break-word;\n        }\n\n        .close-button {\n          position: absolute;\n          top: 8px;\n          right: 8px;\n          width: 24px;\n          height: 24px;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          background: transparent;\n          border: none;\n          cursor: pointer;\n          font-size: 20px;\n          color: var(--toast-close-color, #666);\n          border-radius: 4px;\n          transition: background-color 0.2s, color 0.2s;\n          padding: 0;\n        }\n\n        .close-button:hover {\n          background-color: var(--toast-close-hover-background, rgba(0, 0, 0, 0.1));\n          color: var(--toast-close-hover-color, #333);\n        }\n\n        .toast-buttons {\n          display: flex;\n          gap: 8px;\n          justify-content: flex-end;\n          margin-top: 12px;\n          padding-top: 12px;\n          border-top: 1px solid var(--toast-button-border, rgba(0, 0, 0, 0.1));\n        }\n\n        .toast-button {\n          padding: 6px 16px;\n          border: 1px solid var(--toast-button-border-color, #ccc);\n          border-radius: var(--toast-button-border-radius, 4px);\n          background: var(--toast-button-background, white);\n          color: var(--toast-button-color, #333);\n          font-size: 14px;\n          cursor: pointer;\n          transition: background-color 0.2s, border-color 0.2s;\n          font-family: inherit;\n        }\n\n        .toast-button:hover {\n          background-color: var(--toast-button-hover-background, #f8f9fa);\n          border-color: var(--toast-button-hover-border-color, #999);\n        }\n\n        .toast-button:active {\n          background-color: var(--toast-button-active-background, #e9ecef);\n        }\n\n        .toast-progress-bar {\n          position: absolute;\n          bottom: 0;\n          left: 0;\n          height: 4px;\n          width: 100%;\n          background: var(--toast-progress-bar-color, rgba(0, 0, 0, 0.3));\n          border-bottom-left-radius: var(--toast-border-radius, 8px);\n          border-bottom-right-radius: var(--toast-border-radius, 8px);\n          transform-origin: left;\n        }\n\n        @keyframes shrinkProgress {\n          from {\n            width: 100%;\n          }\n          to {\n            width: 0%;\n          }\n        }\n      </style>\n\n      <div class=\"toast-container\">\n        ${ this.closable ? '<button class=\"close-button\" aria-label=\"Close\">×</button>' : '' }\n\n        <div class=\"toast-header\">\n          <div class=\"toast-icon\">\n            ${ iconContent }\n          </div>\n          <div class=\"toast-content\">\n            <h4 class=\"toast-title\">${ this.title }</h4>\n            <p class=\"toast-text\">${ this.text }</p>\n          </div>\n        </div>\n\n        ${ this.buttons.length > 0 ? `\n          <div class=\"toast-buttons\">\n            ${ this.buttons.map( ( button, index ) => `\n              <button class=\"toast-button\" data-index=\"${ index }\">\n                ${ button.label }\n              </button>\n            `).join( '' ) }\n          </div>\n        ` : '' }\n\n        ${ this.duration > 0 ? '<div class=\"toast-progress-bar\"></div>' : '' }\n      </div>\n    `;\n\n    // Store reference to progress bar\n    this.progressBar = this.shadowRoot.querySelector( '.toast-progress-bar' ) as HTMLElement;\n\n    this.bindEvents();\n  }\n}\n\n/**\n * Conditionally defines the custom element if in a browser environment.\n */\nconst defineToast = ( tagName: string = 'liwe3-toast' ): void => {\n  if ( typeof window !== 'undefined' && !window.customElements.get( tagName ) ) {\n    customElements.define( tagName, ToastElement );\n  }\n};\n\n// Auto-register with default tag name\ndefineToast();\n\n/**\n * Base container ID prefix for toast notifications\n */\nconst CONTAINER_ID_PREFIX = 'liwe3-toast-container';\n\n/**\n * Gets the container positioning styles based on position\n */\nconst getContainerStyles = ( position: ToastPosition ): { top?: string; bottom?: string; left?: string; right?: string; alignItems: string } => {\n  switch ( position ) {\n    case 'TL':\n      return { top: '20px', left: '20px', alignItems: 'flex-start' };\n    case 'T':\n      return { top: '20px', left: '50%', alignItems: 'center' };\n    case 'TR':\n      return { top: '20px', right: '20px', alignItems: 'flex-end' };\n    case 'BL':\n      return { bottom: '20px', left: '20px', alignItems: 'flex-start' };\n    case 'B':\n      return { bottom: '20px', left: '50%', alignItems: 'center' };\n    case 'BR':\n      return { bottom: '20px', right: '20px', alignItems: 'flex-end' };\n    default:\n      return { top: '20px', right: '20px', alignItems: 'flex-end' };\n  }\n};\n\n/**\n * Creates or gets the toast container element for the specified position\n */\nconst getToastContainer = ( position: ToastPosition = 'TR' ): HTMLElement => {\n  const containerId = `${ CONTAINER_ID_PREFIX }-${ position.toLowerCase() }`;\n  let container = document.getElementById( containerId );\n\n  if ( !container ) {\n    container = document.createElement( 'div' );\n    container.id = containerId;\n    container.style.position = 'fixed';\n    container.style.zIndex = '99999';\n    container.style.display = 'flex';\n    container.style.flexDirection = 'column';\n    container.style.maxWidth = '400px';\n    container.style.pointerEvents = 'none';\n\n    // Apply position-specific styles\n    const styles = getContainerStyles( position );\n    if ( styles.top ) container.style.top = styles.top;\n    if ( styles.bottom ) container.style.bottom = styles.bottom;\n    if ( styles.left ) container.style.left = styles.left;\n    if ( styles.right ) container.style.right = styles.right;\n    container.style.alignItems = styles.alignItems;\n\n    // For centered positions, apply transform to center horizontally\n    if ( position === 'T' || position === 'B' ) {\n      container.style.transform = 'translateX(-50%)';\n    }\n\n    // Add media query styles for mobile and smooth transitions\n    const styleId = `${ containerId }-styles`;\n    if ( !document.getElementById( styleId ) ) {\n      const style = document.createElement( 'style' );\n      style.id = styleId;\n      style.textContent = `\n        #${ containerId } > * {\n          margin-bottom: 12px;\n          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n          overflow: hidden;\n        }\n\n        #${ containerId } > *:last-child {\n          margin-bottom: 0;\n        }\n\n        @media (max-width: 768px) {\n          #${ containerId } {\n            left: 20px !important;\n            right: 20px !important;\n            max-width: none !important;\n            transform: none !important;\n          }\n        }\n      `;\n      document.head.appendChild( style );\n    }\n\n    document.body.appendChild( container );\n  }\n\n  return container;\n};\n\n/**\n * Shows a toast notification with the given configuration.\n * This is the recommended way to display toasts.\n *\n * @param config - The toast configuration\n * @returns The toast element instance\n *\n * @example\n * ```typescript\n * import { toastAdd } from '@liwe3/webcomponents';\n *\n * toastAdd({\n *   title: 'Success!',\n *   text: 'Your changes have been saved.',\n *   type: 'success',\n *   duration: 5000,\n *   position: 'TR' // Optional: top-right (default)\n * });\n * ```\n */\nconst toastAdd = ( config: ToastConfig ): ToastElement => {\n  const position = config.position || 'TR';\n  const container = getToastContainer( position );\n  const toast = document.createElement( 'liwe3-toast' ) as ToastElement;\n\n  // Allow pointer events on individual toasts\n  toast.style.pointerEvents = 'auto';\n\n  // Show the toast with the provided config\n  toast.show( config );\n\n  // Add to container\n  container.appendChild( toast );\n\n  return toast;\n};\n\nexport { defineToast, toastAdd };\n"],"names":["ToastElement","_name","oldValue","newValue","attrTitle","configTitle","type","value","attr","config","container","handleAnimationEnd","hostElement","currentHeight","currentWidth","containerWidth","widthPercent","currentPercent","adjustedDuration","animationName","styleSheet","keyframes","target","buttonIndex","button","colors","iconContent","index","defineToast","tagName","CONTAINER_ID_PREFIX","getContainerStyles","position","getToastContainer","containerId","styles","styleId","style","toastAdd","toast"],"mappings":"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"}

package/dist/TreeView.d.ts

@@ -0,0 +1,84 @@
+/**
+ * TreeView Web Component
+ * A customizable tree view with infinite depth, checkboxes, and folder icons
+ */
+export type TreeNode = {
+    id: string;
+    label: string;
+    children?: TreeNode[];
+    icon?: string;
+    customIcon?: string;
+    selected?: boolean;
+    expanded?: boolean;
+};
+export declare class TreeViewElement extends HTMLElement {
+    shadowRoot: ShadowRoot;
+    private treeData;
+    private selectedIds;
+    private expandedIds;
+    private indentWidth;
+    private showBorder;
+    constructor();
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    get data(): TreeNode[];
+    set data(value: TreeNode[]);
+    get selectedNodeIds(): string[];
+    set selectedNodeIds(ids: string[]);
+    get showBorderEnabled(): boolean;
+    set showBorderEnabled(value: boolean);
+    /**
+     * Initialize expanded state from the data
+     */
+    private initializeExpandedState;
+    /**
+     * Toggle node expansion
+     */
+    toggleExpansion(nodeId: string): void;
+    /**
+     * Toggle node selection
+     */
+    toggleSelection(nodeId: string): void;
+    /**
+     * Select all nodes recursively
+     */
+    selectAll(): void;
+    /**
+     * Deselect all nodes
+     */
+    deselectAll(): void;
+    /**
+     * Expand all nodes
+     */
+    expandAll(): void;
+    /**
+     * Collapse all nodes
+     */
+    collapseAll(): void;
+    /**
+     * Get node by ID
+     */
+    private findNode;
+    /**
+     * Get the default folder icon
+     */
+    private getDefaultIcon;
+    /**
+     * Render a single tree node
+     */
+    private renderNode;
+    /**
+     * Bind event listeners
+     */
+    private bindEvents;
+    /**
+     * Render the component
+     */
+    private render;
+}
+/**
+ * Conditionally defines the custom element if in a browser environment.
+ */
+declare const defineTreeView: (tagName?: string) => void;
+export { defineTreeView };
+//# sourceMappingURL=TreeView.d.ts.map

package/dist/TreeView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeView.d.ts","sourceRoot":"","sources":["../src/TreeView.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,qBAAa,eAAgB,SAAQ,WAAW;IACtC,UAAU,EAAE,UAAU,CAAC;IAC/B,OAAO,CAAC,QAAQ,CAAkB;IAClC,OAAO,CAAC,WAAW,CAA0B;IAC7C,OAAO,CAAC,WAAW,CAA0B;IAC7C,OAAO,CAAC,WAAW,CAAc;IACjC,OAAO,CAAC,UAAU,CAAQ;;IAS1B,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;IAajG,IAAI,IAAI,IAAK,QAAQ,EAAE,CAWtB;IAED,IAAI,IAAI,CAAG,KAAK,EAAE,QAAQ,EAAE,EAI3B;IAED,IAAI,eAAe,IAAK,MAAM,EAAE,CAE/B;IAED,IAAI,eAAe,CAAG,GAAG,EAAE,MAAM,EAAE,EAGlC;IAED,IAAI,iBAAiB,IAAK,OAAO,CAEhC;IAED,IAAI,iBAAiB,CAAG,KAAK,EAAE,OAAO,EAIrC;IAED;;OAEG;IACH,OAAO,CAAC,uBAAuB;IAa/B;;OAEG;IACH,eAAe,CAAG,MAAM,EAAE,MAAM,GAAI,IAAI;IAqDxC;;OAEG;IACH,eAAe,CAAG,MAAM,EAAE,MAAM,GAAI,IAAI;IAoBxC;;OAEG;IACH,SAAS,IAAK,IAAI;IAelB;;OAEG;IACH,WAAW,IAAK,IAAI;IAQpB;;OAEG;IACH,SAAS,IAAK,IAAI;IAYlB;;OAEG;IACH,WAAW,IAAK,IAAI;IAKpB;;OAEG;IACH,OAAO,CAAC,QAAQ;IAahB;;OAEG;IACH,OAAO,CAAC,cAAc;IAOtB;;OAEG;IACH,OAAO,CAAC,UAAU;IAsDlB;;OAEG;IACH,OAAO,CAAC,UAAU;IA+FlB;;OAEG;IACH,OAAO,CAAC,MAAM;CAkPf;AAED;;GAEG;AACH,QAAA,MAAM,cAAc,GAAK,UAAS,MAA0B,KAAI,IAI/D,CAAC;AAKF,OAAO,EAAE,cAAc,EAAE,CAAC"}